undefined after selecting item

[Steve]

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"

            });
    }

[Georgi Krustev]

Hello Steve,

Based on the given code snippet, I believe that the model filed (rList) is actually an array of objects. If my assumption is correct, then DropDownList widget will not work as expected with it. It can be used to update primitive or object value, not arrays. If updating an array is a must, then you will need to use MultiSelect widget.

If I am missing something in the described scenario, please send us a repro demo (http://dojo.telerik.com).

Regards,
Georgi Krustev
Telerik