Kendo DropDownList default item binding with Kendo Grid

Question

I want to include kendo dropdownlist into my grid. Everything's going to be fine except one thing. When i want to "Add Record" with default kendo create toolbar, i can't bind first value fetched from dropdownlist datasource.

Datasource works fine. Dropdownlist works fine too. If I choose anything from dropdownlist manually, everything works fine.

 $scope.mainGridOptions = {

                dataSource: {
                    transport: ...
                    schema: ...
                },

                batch: false,
                       ...    
                toolbar: ["create"],
                columns: [
                    ...,{

                    field: "location_id",
                    title: "Location",

                    editor: function(container,options){

                                var input = $('<input/>');
                                input.attr('name',options.field);
                                input.appendTo(container);

                                input.kendoDropDownList({
                                    autoBind: true,
                                    dataTextField: "text",
                                    dataValueField: "value",
                                    dataSource: locationsDataSource,
                                    index: 0,
                                });
                            }
                    },
                  ...
                ]
            };

I tried this too. except "index", i tried to manually select first item from dataSource. Visually it works fine. Even with Third item selected too, but when i click "Update", data isn't bounded.

input.kendoDropDownList({
     autoBind: true,
     dataTextField: "text",
     dataValueField: "value",
     dataSource: locationsDataSource,
     dataBound: function(e){
        this.select(0);
     }
});

Anyone?

Unknown Unknown · Accepted Answer · 2015-03-09T07:53:25

So, i found the solution.

It's seem to be a bug of Kendo DropDownList.

I'm bounding it manually after dataSource load from dropdown dataBound event.

Here we go:

editor: function(container,options){

        var input = $('<input/>');
        input.attr('name',options.field);
        input.attr('data-bind','value:' + options.field);
        input.appendTo(container);

        input.kendoDropDownList({
            autoBind: true,
            dataTextField: "text",
            dataValueField: "value",
            dataSource: locationsDataSource,
            index: 0,
            dataBound: function(){

                options.model[options.field] = this.dataItem().value;

            }//end databound

        });//end dropdownlist

}//end editor

Kendo DropDownList default item binding with Kendo Grid

1 Answers