Grid drop-down edit initial value (from row value)

[Itai]

Hello, 

 

I'm trying to get a grid with a column editing with a drop down list. I'm following this example, but although I get the values translated correctly and saved and loaded correctly, whenever I start editing the Drop-Down list doesn't have the value, as if it failed reading the current value from the row. 

 

Here is the relevant code snippets: 

 

Dictionary data source, translation helper and drop down callback: 

 

var puDict = new kendo.data.DataSource({
        type: "json",
        transport: {
            read: {
                url: "getdict",
            }
        },
        schema: {
            model: {
                id: "code",
                fields: {
                    code: {nullable: false},
                    name: {nullable: false}
                }
            }
        }
    });
    puDict.fetch();

    function translateType(type) {
        return puDict.get(type).name;
    }

    function typeDropDownEditor(container, options) {
        $('<input required data-text-field="name" data-value-field="code" data-bind="value:' + options.field + '"/>')
                .appendTo(container)
                .kendoDropDownList({
                            autoBind: false,
                            dataSource: puDict

                        }
                )
    }

 

Here is the fields part of the grid: 

 

columns: [
                {field: "code", title: "Code (Unique)"},
                {field: "name", title: "Unit name"},
                {field: "type", title: "Unit type", editor: typeDropDownEditor, template: "#=translateType(type)#"},
                {command: ["edit", "destroy"], title: " "}
            ]

 

And `getdict` returns a JSON array that looks like this - 

[{
    "code": "TYPE1",
    "name": "Something of Type One"
},
{
    "code": "TYPE2",
    "name": "Something of Type Two"
}]

 

The grid shows the string "Something of Type One" and "Something of Type Two" correctly, so the translation works. Also, updating works correctly (and server side only knows about the code ("TYPE1", "TYPE2")), so the Drop Down also knows how to translate values back and forth. 

 

The only problem is that when I click on "edit", the dropdown is initially empty (nothing selected), instead of having the current value selected. 

[Itai]

Ok, so I solved it by setting "autoBind" to true on the DropDown list. 

Still, in the example linked it works fine with "false". Also, the documentation here makes it sound like it means binding to the list datasource, not the item. 

 

Can someone clarify what is actually going on? Also - may be helpful to explain the "autoBind" property better in the online documentation. 

[Boyan Dimitrov]

Hello Itai,

 

I am afraid that I am not able to replicate the problem you are facing. I prepared a sample http://dojo.telerik.com/ilAzU that works fine and it is based on your scenario. 

 

As a side note I would like to mention that in case of fetching the data for the Kendo UI DataSource there is no point to set the "autoBind" option of the DropDownList to false. If set to false the widget will not bind to the data source during initialization, but the data is already populated due to calling the fetch method. 

 

Regards,
Boyan Dimitrov
Telerik

 

 

[Itai]

Thank you for the response! In the meanwhile, setting it to `autoBind: true` solves it for some reason. I will try to pin-point exactly what are the requirements to reproduce this, and post back if I find anything.