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

2 posts, 0 answers
  1. ALISON THOMPSON-O’CONNOR
    ALISON THOMPSON-O’CONNOR avatar
    2 posts
    Member since:
    Oct 2013

    Posted 23 Nov Link to this post

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

  2. Stefan
    Admin
    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:

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