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

4 posts, 0 answers
  1. Itai
    Itai avatar
    34 posts
    Member since:
    Feb 2016

    Posted 08 Mar 2016 Link to this post



    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{
            type: "json",
            transport: {
                read: {
                    url: "getdict",
            schema: {
                model: {
                    id: "code",
                    fields: {
                        code: {nullable: false},
                        name: {nullable: false}
        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 + '"/>')
                                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. 

  2. Itai
    Itai avatar
    34 posts
    Member since:
    Feb 2016

    Posted 09 Mar 2016 in reply to Itai Link to this post

    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. 

  3. Boyan Dimitrov
    Boyan Dimitrov avatar
    2062 posts

    Posted 10 Mar 2016 Link to this post

    Hello Itai,


    I am afraid that I am not able to replicate the problem you are facing. I prepared a sample 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. 


    Boyan Dimitrov
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  4. Itai
    Itai avatar
    34 posts
    Member since:
    Feb 2016

    Posted 10 Mar 2016 in reply to Boyan Dimitrov Link to this post

    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. 
Back to Top