Hey Guys,
I have been stuck on this issue for a day now and still can’t figure it out.
The issue is that the drop down list in the grid column always return 'undefined' after selecting an item and moving to the next column.
It will display the last selected item if I go back to the drop down list. I am not sure if I need to refresh the grid or it's not proper bind to the field.
Any help is appreciated. Below are the codes.
TIA
A call back for json and literate through a loop to set up my data
var ds = new kendo.data.DataSource({
transport: {
read: function (options) {
var myData = [];
var tCounter = 0;
json call here ......
function (result) {
for (var i = 0; i < result.length; i++) {
for (var j = 0; j < result[i].TS.length; j++) {
var rData = [];
for (var m = 0; m < result[i].TS[j].DRP.length; m++) {
rData[m] = {
nextId: result[i].TS[j].DRP[m].Id,
nextDesc: result[i].TS[j].DRP[m].Description
}
}
myData[tCounter] = {
...other variables
rList: rData,
};
tCounter ++;
};
};
});
options.success(myData);
}
},
schema: {
model: {
id: "Id",
fields: {
JN: { editable: false },
TI: { editable: false },
rList: { editable: true }
}
}
},
});
var test = $("#grid").kendoGrid({
dataSource: ds,
columns: [
{
...'other column settings'
},
{
field: 'rList',
title: 'Next',
width: 200,
template: "#=rList.nextDesc#", // I think is causing the issue
editor: dropDownEditor
},
}],
editable: true,
navigatable: true
}).data("kendoGrid");
function dropDownEditor(container, options) {
var iData = [];
for (var i = 0; i < options.model.rList.length; i++) {
iData.push({ nextDesc: options.model.rList[i].nextDesc, nextId: options.model.rList[i].nextId });
}
//iData = [{ nextDesc: "ABC", nextId: "123" },
// { nextDesc: "CDF", nextId: "456" },
// { nextDesc: "HIJ", nextId: "789" }];
var ddl = $('<input data-text-field="nextDesc" data-value-field="nextId" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
optionLabel: ' ',
autoBind: false,
dataSource: iData,
dataTextField: "nextDesc",
dataValueField: "nextId"
});
}