Issue with setting selected value of DropDownList when using inline edit within a grid

[Icon]

Hi,

I'm having some trouble with setting a DropDownList value while editing a grid inline.

This is my datasource for the DropDownList:

01.var baseTypesDataSource = new kendo.data.DataSource({
02.    type: "json",
03.    transport: {
04.        read: {
05.            url: "Profile/GetBaseTypes"
06.        }
07.    },
08.    schema: {
09.        model: {
10.            id: "merchandisingBaseTypeId",
11.            fields: {
12.                merchandisingBaseTypeId: { type: "number" },
13.                merchandisingBaseType: { type: "string" }
14.            }
15.        }

 

This is my grid:

01.$("#merchandisingProfileGrid").kendoGrid({
02.    dataSource: profilesDS,
03.    columns: [
04.        { field: "profileNo", title: "Profile No" },
05.        { field: "palletBay", title: "Pallet Bay", editor: booleanEditor, template: kendo.template($("#palletBayTemplate").html()) },
06.        { field: "merchandisingBaseType", title: "Base Type", editor: BaseTypesDropdowns, template: kendo.template($("#baseTypeTemplate").html()) },
07.        { field: "quantity", title: "Overs Qty" },
08.        { field: "comments", title: "Notes" },
09.        { command: ["edit"], width: "200px" }
10.    ],
11.    editable: "inline",
12.    filterable: true
13.});

 

And this is my custom editor for the DropDownList:

01.function BaseTypesDropdowns(container, options) {
02.    $('<input id="bt_' + options.model.id + '" required name="' + options.field + '" />')
03.        .appendTo(container)
04.        .kendoDropDownList({
05.            autoBind: true,
06.            dataTextField: "merchandisingBaseType",
07.            dataValueField: "merchandisingBaseTypeId",
08.            dataSource: baseTypesDataSource,
09.            dataBound: function (e) {
10.                $("#bt_" + options.model.id).data("kendoDropDownList").value(options.model.merchandisingBaseTypeId);
11.            },
12.            change: function (e) {
13.                var dataItem = e.sender.dataItem();
14.                options.model.set("merchandisingBaseTypeId", dataItem.merchandisingBaseTypeId);
15.            }
16.        });
17.}

 

I am simply trying to retain the grid value in the dropdown when I edit a row inline.

The above code does correctly work the first time I edit a row, however on subsequent edits the dropdown loads displaying blank, but has the correct value seelcted when I expand the dropdown (can be seen in the attached image).

[Stefan]

Hello, Alison,

Thank you for the provided details.

After inspecting it I noticed that the issue may occur because the autoBind property is set to true. When the DropDown is used as a custom editor we recommend setting the property to false. This can be observed in our demo as well:

http://demos.telerik.com/kendo-ui/grid/editing-custom

https://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist#configuration-autoBind

Also, please advise if removing the custom logic on the dataBound and change events will affect the result as based on the code it seems that they do a logic which should happen automatically.

If additional assistance is needed, please provide a fully runnable example reproducing the issue and I will gladly investigate and provide a suggestion best suited for it.

Regards,
Stefan
Progress Telerik