How to make a column non-editable in Kendu UI Grid With Row template? - kendo-ui

http://jsfiddle.net/valchev/s7ZCV/15/,
the above link is the simple example of Kendo grid with row template.All I wanted to do is make a specific column non-editable. the usual way is just define a model and further inside fields add editable False to the required field. i just wanted to know is there any other way to make a column editable as false because i dont want to add one more model in kendo as I am using models in entity level and Jay-data Level.
var dataSource = new kendo.data.DataSource({
data: records,
schema: {
model: {
id: "foo",
fields: {
foo: {type: "number"},
CostCategoryAbv: {type: "string",editable:false}, // i dont want this
VendorName: {type: "string"}
}
}
}
});

I've been doing a lot of work with the Kendo Grid using MVC. I've been getting around this by using a custom popup editor. The editor only allows the user to modify the fields that I want them to. Another way of getting around this is by changing the controller so that any user edit does not modify the field when the data source is updated. I know that the code provided is not using C# or MVC, but I hope this helps. I think you may be able to modify the save method so that it only saves select fields.

Related

Create a non-editable field in Strapi

I have a project that sells products.
A product can have a price and optional: new_price. I would like to be able to sort them by price/new_price combined, meaning that I would need an additional entry in the DB like "final_price". I got an idea to create a non-editable field "new_price" in Content-Type Builder/schema.json and then update that with the final price for the product on "beforeCreate" in the lifecycles.js. However, I am not sure Strapi allows that, as I haven't been able to find a resource pointing in the documentation that it can. If there is a hacky way to do it, please advise. I am open to all kinds of other suggestions on how to do this Business logic as well.
Thank you in advance.
There is a way in strapi to make the field non editable on UI. You can go to Content-type-builder-> Your component-> Configure the view. And click on the text field. You can just make editable field as false.
I see two options:
(a) Add the field and forget about it being non-editable. You can calculate the final_price on insertion of an entry in your collection with Lifecycle hooks: https://docs.strapi.io/developer-docs/latest/development/backend-customization/models.html#lifecycle-hooks.
(b) Don't add a new field, but override the controller to return an additional field: https://docs.strapi.io/developer-docs/latest/development/backend-customization/controllers.html#extending-core-controllers.
Ok, so I found a "hacky" way to do this. I don't like it, as it is not that beautiful and sophisticated, but it does the job.
In product schema.json I added a
"final_price": {
"type": "decimal"
}
In lifecycles.js, I created a new function that will calculate my final price and write it in "final_price" attribute:
module.exports = {
beforeCreate(event) {
priceCalc(event);
},
beforeUpdate(event) {
priceCalc(event);
},
};
const priceCalc = (event) => {
const { data } = event.params;
data.final_price = data.new_price ? data.new_price : data.price;
};
In the admin panel, in Content-Type Builder in Product, I clicked "Configure the view" and deleted the Final Price field from Displayed Fields section. This made the field hidden, lol.
Now I am sorting all products with sort: ['final_price:asc']
That is it.Hope it helps anyone!

Angulajs dynamic form data with dynamic layout

I have a form which is built as a directive. I am providing the data for layout in my controller.
MyController.js
[{
"type":"selectbox",
"name":"name_one",
"label":"Name One"
}]
This data is then passed to my form_directive which then loads the template.
Then I am getting the actual data to be populated from an ajax call, inside MyController.js
eg:
$http.get('url/location').success(function(data) {
}).error(function(data) {
});
The data that is coming from the ajax will be like this:
[{
"id":"090986735",
"name":"option_1"
},{
"id":"78645679",
"name":"option_2"
}]
Now my question is how to bind this data to the selectbox?
Please note that there will be many such controls. But I have shown only one select box
Try to change the model of select.
https://docs.angularjs.org/api/ng/directive/select - the example with colors should be useful for you.

how to give a kendo ui autocomplete widget with multiple values, the css functionality of a kendo ui multiselect widget

I am wondering if there's an easy way to have the multiselect widget's css functionality shown in this demo
http://demos.kendoui.com/web/multiselect/index.html
applied to an autocomplete widget.
If the only reason for using autocomplete is that the list of values is huge and you want to do server side filtering (serverFiltering) with a multiselect widget as well. You just need to define serverFiltering as true.
Example:
var ds = new kendo.data.DataSource({
transport: {
read: {
url : "getData.php"
}
},
serverFiltering: true
});
$("#items").kendoMultiSelect({
dataValueField: "name",
dataTextField : "name",
dataSource : ds
});
You will receive a some additional parameters saying what the user has typed so far and you server can return only the data that meets the condition.
This JSFiddle (http://jsfiddle.net/OnaBai/rpDuL/) tries to show you how it works. You can start typing a country name and see that it actually filters the data. Since this is just JavaScript I've simulated server filtering implementing a read function that greps the data for those records meeting the condition.

Populating a Sencha Touch 2 form with associated models

I am trying to take advantage of Sencha Touch 2's ability to handle associated models. In my case, suppose I have a Selection and Book: Selection <<--> Book. So, I have a record that could look like this:
{
id: 123,
position: 1,
book: {
title: 'War and Peace'
}
}
Suppose I want to populate a FormPanel with a Selection record. When it's a flat record, there's lots of documentation about this on the Internet, and I've gotten it to work easily:
myFormPanel.setRecord(record);
When a form covers two associated models at once, this no longer works. A field dedicated to, say, book.title remains empty:
{
xtype: 'textfield',
name: 'title', // also tried 'book.title'
label: 'Title'
}
Is there a way to populate Sencha Touch 2 forms automatically when the record is not flat? I could, of course, create a flat model specifically for this form, but that sort of defeats the purpose.
If there's no automated way, what's the next best alternative? Individually fetching fields from the FormPanel and setting their values?
Since there were no takers here, I went to Sencha Forums for help. The answer:
I need to create a flat object representation of the model like so:
var data = { id: 123, booktitle: 'War and Peace', ... }
and then populate the form with setValues():
myFormPanel.setValues(data);

Defining which field was changed in a grid

Is it possible to identify on a kendo UI grid which field was altered on a row edit?
Right now I am sending the entire row to the server that was changed. I would like to send
the request to the server to also include a variable holding the name
of the field that was edited.
Is something like that supported by kendo or
is there a work around for that?
This is not supported out of the box. However the grid API should allow this to be implemented. Check the edit and save events. In there you can listen to changes of the model instance which is currently being edit. Here is a quick example:
$("#grid").kendoGrid({
edit: function(e) {
e.model.unbind("change", model_change).bind("change", model_change);
}
});
function model_change(e) {
var model = this;
var field = e.field;
// store somewhere the field and model
}

Resources