This is a migrated thread and some comments may be shown as answers.

undefined after selecting item

1 Answer 74 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Steve asked on 27 May 2015, 10:43 PM

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.



A call back for json and literate through a loop to set up my data

var ds = new{
            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 ++;
            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

   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 + '"/>')
                optionLabel: ' ',
                autoBind: false,
                dataSource: iData,
                dataTextField: "nextDesc",
                dataValueField: "nextId"


1 Answer, 1 is accepted

Sort by
Georgi Krustev
Telerik team
answered on 29 May 2015, 11:59 AM
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 (

Georgi Krustev
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Asked by
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
Share this question