I guess I need a better understanding on what is going on when an editor is used within a Kendo UI Grid. I am trying to add a multiselect to a grid as an editor. Ultimately, I would like to be able to click the cell with the data to be edited ( a list of "tags" ) and show a multiselect editor to edit those tags. Then when the user leaves that cell or clicks a save button the cell would update and return to a list of tags hiding the Multiselect control.
Grid is set to inline editing while I perfect the editing mechanism before moving on to how I want the cell based editing to work.
So far I have the following code, but when I click the cell the multiselect is blank, and when I select my values and update the row, the cell becomes a list of [object Object] values which tells me that somehow I am displaying objects and not the properties with the objects. However, I don't know where to do that at.
I would like to know what happens from when the user clicks edit to when the user clicks update and ends up in the update event. Also any ideas as to how I could debug this scenario to see what is being passed around.
$("#grid").kendoGrid({
toolbar: kendo.template($('#template').html()),
dataSource: {
transport: {
read: function (op) {
setTimeout(function () {
op.success([
{ itemId: 1, item: "Widget #1", category: "software", price: 19.99, tags: '["POSITION"]' },
{ itemId: 2, item: "Widget #2", category: "hardware", price: 299.99, tags: '[POSITION, ASSET, TNT]' },
{ itemId: 3, item: "Widget #3", category: "software", price: 29.99, tags: '["POSITION", "ASSET"]' },
{ itemId: 4, item: "Widget #4", category: "software", price: 29.99, tags: '["TRADE", "ASSET", "LOT"]' },
{ itemId: 5, item: "Widget #5", category: "software", price: 09.99, tags: '["TRADE"]' },
]);
}, 1000);
},
update: function(e) {
debugger;
}
},
schema: {
model: {
id: "itemId",
fields: {
item: { type: "string" },
category: { type: "string" },
price: { type: "number" },
tags: { type: "string" },
}
}
}
},
sortable: {
mode: "multiple",
allowUnsort: true
},
groupable: true,
editable: "inline",
edit: function(e) { debugger;},
scrollable: false,
selectable: 'row',
change: function(e) {
var selectedRow = this.select();
var rowData = this.dataItem(selectedRow[0]);
var fn_name = '" + this.ID + "_row_clicked';
var fn = window[fn_name];
if (typeof (fn) === 'function') {
fn(rowData);
}
},
reorderable: true,
filterable: true,
pageable: {
pageSizes: [1,2,3,4,'All'],
buttonCount: 5
//message: {
// empty: 'No Data',
// allpages: 'All'
//}
},
columns: [
{ field: "item", title: "Item"},
//{ field: "item", title: "Item", aggregates: ["count"], footerTemplate: "Total Items: #=count#" },
{ field: "category", title: "Category"},
{ field: "price", title: "Price", format: "{0:n}" },
{ field: "tags", title: "Tags", editor: tagEditor, template: "#=tags#" },
{ command: ["edit"], title: " " }
]
});
});
function getTags() {
var tags = [];
tags.push({ text: "POSITION", value: "POSITION" });
tags.push({ text: "ASSET", value: "ASSET" });
tags.push({ text: "ACTIVITY", value: "ACTIVITY" });
tags.push({ text: "TRADE", value: "TRADE" });
tags.push({ text: "TNT", value: "TNT" });
tags.push({ text: "LOT", value: "LOT" });
return tags;
}
function tagEditor(container, options) {
debugger;
$('<select data-text-field="text" data-value-field="value" data-bind="value:' + options.field + '" />')
.appendTo(container)
.kendoMultiSelect({
autoBind: false,
dataSource: getTags(),
dataTextField: "text",
dataValueField: "value",
animation: false,
value: options.model.tags,
change: function (e) { debugger;}
});
}
1 Answer, 1 is accepted
There are two issues in the code that you provided that prevent the multiselect to correctly show the values:
- The grid model value is a string an not an array of the values. The multiselect widget works only with arrays so you should change the tags values e.g.
{ itemId: 2, item:"Widget #2", category:"hardware", price: 299.99, tags: ["POSITION","ASSET","TNT"] }, - The autoBind option is disabled:
$('<select data-text-field="text" data-value-field="value" data-bind="value:'+ options.field +'" />').appendTo(container).kendoMultiSelect({autoBind:false,
and the multiselect will not show the selected values until the data is bound. You should enable the option if the selected values should be shown automatically when entering edit mode.
Also, in order to correctly update the model you should:
- define the tags field as array in the model:
model: {id:"itemId",fields: {...tags: { defaultValue: [] },}} - set the multiselect valuePrimitive option.
I created an example based on the code that you provided that demonstrates the suggested changes.
Regards,
Daniel
Telerik