Kendo UI Dropdownlist in Grid Edit mode

Question

Basically I have a Kendo UI Dropdownlist as my first grid column called "instrumentName" In popup EDIT mode, I can see the correct instrumentName in the dropdown but there's one problem when I change the value:

As soon as I select a new instrument - the instrument ID shows up on the grid (in the background). The updated INSTRUMENT NAME should appear on the grid.

And once I click UPDATE, it does NOT show the instrument NAME, but rather the instrument ID (which is a number).

Some code snippets:

 instrDropDown.value(e.model.instrumentId);
 nodeGrid = $("#curvesGrid").kendoGrid({
      dataSource: new kendo.data.DataSource({ ... });
      columns: [
        {
            field: "instrumentName",
            editor: instrumentsDropDownEditor, template: "#=instrumentName#"
        },
        {
            field: "instrumentTypeName"      
        },
        edit: function(e){
            var instrDropDown = $('#instrumentName').data("kendoDropDownList"); 
            instrDropDown.list.width(350);  // widen the INSTRUMENT dropdown list
            if (!e.model.isNew()) {
                instrDropDown.value(e.model.instrumentId);
            }
        }
  });

and here's my template editor for that Dropdown :

function instrumentsDropDownEditor(container, options) {

    // INIT INSTRUMENT DROPDOWN !
    var dropDown = $('<input id="instrumentName" name="instrumentName">'); 
    dropDown.appendTo(container);
    dropDown.kendoDropDownList({
        dataTextField: "name",
        dataValueField: "id",
        dataSource: {
            type: "json",
            transport: {
                read: "/api/breeze/GetInstruments"
            },
        },
        pageSize: 6,
        //select: onSelect,
        change: function () { },
        close: function (e) {

        },
        optionLabel: "Choose an instrument"
    }).appendTo(container);
}

Do I need to do anything special on change of the Dropdown ?

thanks. Bob

OnaBai OnaBai · Accepted Answer · 2013-11-25T22:54:01

dataFieldValue is what is going to be saved as value of the DropDownList. If you want name to be saved then you should define dataValueField as name.

Regarding the background update that's the default behavior since this is an ObservableObject and as consequence changes are automatically propagated. If you don't want this you should probably try using a fake variable for the drop-down and in the save event copy it to the actual field. Do you really need this?

Kendo UI Dropdownlist in Grid Edit mode

1 Answers