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

2 posts, 0 answers
    2 posts
    Member since:
    Oct 2013

    Posted 23 Nov Link to this post


    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{
    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:

    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


    And this is my custom editor for the DropDownList:

    01.function BaseTypesDropdowns(container, options) {
    02.    $('<input id="bt_' + + '" 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_" +"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.        });


    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).

  2. Stefan
    Stefan avatar
    1389 posts

    Posted 27 Nov Link to this post

    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:

    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.

    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top