Values of Dropdownlist in Grid Template not always returned

[Keith]

I have a grid, one of the columns is a dropdown which comes from another datasource.  When the grid goes into edit mode I select the dropdown.  However if I select the first item in the dropdown it's value is never retrurned.  If I select any other value it's fine, also if I select another value and then the first one it is also ok.  

My code is:
$("#memberGrid").kendoGrid({
                dataSource: dataSource,
                toolbar: ["create"],
                columns: [
                    { field: "LOGIN_NAME", title: "User Name", editor: userDropDownEditor, template: "#=LOGIN_NAME#" },
                    { command: ["edit", "destroy"], title: " ", width: "172px" }
                    ],
                editable: "inline",
            });

My template function is:
function userDropDownEditor(container, options) {
        $('<input required data-text-field="LOGIN_NAME" data-value-field="LOGIN_NAME" data-bind="value:' + options.field + '"/>')
            .appendTo(container)
            .kendoDropDownList({
                autoBind: true,
                dataSource: {
                    transport: {
                        read: '@Url.Action("GetAvailableUsers", "Role")'
                    }
                }
            });
    }

My Data source is:
var dataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: '@Url.Action("GetUsersObjectInRole", "Role")' + "?roleName=" + roleName                        
                    },
                    create: {
                        url: '@Url.Action("AddUserToGroup", "Role")',
                        contentType: "application/json",
                        type: "POST"
                    },
                    parameterMap: function (data, operation) {
                        if (operation != "read") {
                            return JSON.stringify(data);
                        } else {                            
                            return JSON.stringify(data); //return stringified options to the server
                        }
                    }
                },
                schema: {
                    model: {
                        id: "LOGIN_NAME",
                        fields: {
                            LOGIN_NAME: { type: "string" },
                            GROUP_ID: {type: "number" }
                        }
                    }
                }
            });


If I check the value of the field in parameterMap it is always empty.  This is really weird, I can't see how it can be a code issue.  Thanks.

[Alexander Valchev]

Hello Keith,

Thank you for getting in touch with us. The problem comes from the fact that editing of the Grid works on the basis of MVVM bindings which listen on the change event of the editors, if the user does not change the pre-selected DropDownList item the change event will not fire.

To fix the issue, please use one of the following solutions:

1. (Recommended one) Add an optionLabel so the user will be forced to change the selection.
2. (The workaround) Trigger manually the change event of the editor right after the data is loaded and items are rendered.
   

   function userDropDownEditor(container, options) {
       $('<input required data-text-field="LOGIN_NAME" data-value-field="LOGIN_NAME" data-bind="value:' + options.field + '"/>')
       .appendTo(container)
       .kendoDropDownList({
           autoBind: true,
           dataSource: {
               transport: {
                   read: '@Url.Action("GetAvailableUsers", "Role")'
               }
           }
       })
       .data("kendoDropDownList")
       .one("dataBound", function (e) {
           this.trigger("change");
       });
   }

I hope this information will help.

Regards,
Alexander Valchev
Telerik