Selected kendo Dropdownlist value getting reset to previous selected value while performing batch operation in kendo ui grid

Question

I have a kendo ui grid and I am doing batch operation on it. In one of the columns I populating data in kendo dropdownlist. While editing when I change value of that dropdown, it is getting changed at the moment but when I click outside of the row, old value comes back. How to keep teh selected value in dropdown? here is my code:

var rateScheduleItemGridDatasource = new kendo.data.DataSource({
            transport: {
                read: {
                    type: 'get',
                    url: config.apiServer + "api/RateSchedule/GetAllRateScheduleItems?rateScheduleId=" + selectedRateScheduleId,
                    dataType: "json"
                },
                destroy: {
                    type: 'delete',
                    url: function (options) {
                        $.ajax({
                            url: config.apiServer + "api/RateSchedule/DeleteRateScheduleItem?rateScheduleItemId=" + options.RateScheduleItemId,
                            type: 'delete',
                            data: ko.toJSON(options),
                            contentType: "application/json",
                            success: function (data) {
                                popupNotification.show(updateSuccessMessage, "success");
                                rateScheduleItemGridDatasource.read();
                            },
                            error: function (jqXHR, textStatus, errorThrown) {
                                popupNotification.show(updateFailureMessage, "error");
                            }
                        });
                    },
                    dataType: "json",
                    contentType: "application/json"
                }
            },
            pageSize: 10,
            serverPaging: true,
            serverSorting: true,
            serverFiltering: true,
            serverGrouping: true,
            serverAggregates: true,
            batch: true,
            schema: {
                data: "Data",
                total: "Total",
                errors: "Errors",
                model: {
                    id: "RateScheduleItemId",
                    fields: {
                        RateScheduleItemId: { type: "number", editable: false, nullable: false },
                        RateScheduleId: { type: "number", editable: false, nullable: false, validation: { required: true } },
                        MathmetricalSymbolCode: { type: "number", nullable: true, editable: true, validation: { required: false } },
                        MathmetricalSymbolCodeValue: { type: "string", nullable: true, editable: true, validation: { required: false } },
                        MeasureTypeCode: { type: "number", nullable: true, editable: true, validation: { required: false } },
                        MeasureTypeCodeValue: { type: "string", nullable: true, editable: true, validation: { required: false } },
                        MultiplierRate: { type: "number", nullable: true, editable: true, validation: { required: false } },
                        RangeLowerNumber: { type: "number", nullable: true, editable: true, validation: { required: false } },
                        RangeUpperNumber: { type: "number", nullable: true, editable: true, validation: { required: false } },
                        RateTier: { type: "string", nullable: true, editable: false, validation: { required: false } }
                    }
                }
            }
        });
$("#rateScheduleItemGrid")
               .kendoGrid({
                   columns: [
                       { "command": [{ name: "destroy", text: "&nbsp" }], "width": "60px" },
                       { "title": "Rate Tier", "width": "100px", "field": "RateTier" },
                       { "title": "Operand", "width": "100px", "field": "MathmetricalSymbolCode", "editor": rateScheduleItemOperandDropDownEditor, "template": "#= (MathmetricalSymbolCodeValue == null ) ? ' ' : MathmetricalSymbolCodeValue#" },
                       { "title": "Range Type", "width": "100px", "field": "MeasureTypeCode", "editor": rateScheduleItemRangeTypeDropDownEditor, "template": "#= (MeasureTypeCodeValue == null) ? ' ' : MeasureTypeCodeValue#" },
                       { "title": "Range (From)", "width": "100px", "field": "RangeLowerNumber" },
                       { "title": "Range (to)", "width": "100px", "field": "RangeUpperNumber" },
                       { "title": "Rate (Multiplier)", "width": "100px", "field": "MultiplierRate" }
                   ],
                   toolbar: kendo.template($("#rateScheduleGridItemTemplate").html()),
                   resizable: true,
                   editable: true,
                   groupable: false,
                   filterable: true,
                   pageable: {
                       pageSize: 10,
                       pageSizes: [10, 50, 100, 150, 200, 250]
                   },
                   sortable: true,
                   height: 200,
                   dataSource: rateScheduleItemGridDatasource,
                   cancel: function (e) {
                       dirty = false;
                   },
                   save: function (e) {
                       dirty = false;
                   }
               });
function rateScheduleItemOperandDropDownEditor(container, options) {
            $('<input data-bind="value:' + options.field + '"/>')
              .appendTo(container)
              .kendoDropDownList({
                  dataTextField: "ReferenceValue",
                  dataValueField: "ReferenceValueId",
                  dataSource: rateScheduleItemOperandReferenceData,
                  optionLabel: "Select Operand"
              });
        }

        function rateScheduleItemRangeTypeDropDownEditor(container, options) {
            $('<input data-bind="value:' + options.field + '"/>')
              .appendTo(container)
              .kendoDropDownList({
                  dataTextField: "ReferenceValue",
                  dataValueField: "ReferenceValueId",
                  dataSource: rateScheduleItemRangeItemReferenceData,
                  optionLabel: "Select Range Type"
              });
        }

The Dread Pirate Stephen The Dread Pirate Stephen · Accepted Answer · 2016-10-03T18:05:08

You are binding your columns to MathmetricalSymbolCode and MeasureTypeCode but you have based the templates on MathmetricalSymbolCodeValue and MeasureTypeCodeValue...BUT...you have nothing that actually sets the value of MathmetricalSymbolCodeValue and MeasureTypeCodeValue so they forever remain null.

When you make your selection in your dropdownlist, you are selecting the value for the "Code" fields not the "CodeValue" fields...the grid and dropdownlist have no idea that those are key-value pairs.

Here's an example with your setup(tweaked so I can run it without access to your data) where I have the Operand column working: http://dojo.telerik.com/@Stephen/OCEpa

There are 2 important points:

using valuePrimitive: true on the DropDownList config, which is kind of required if the value is nullable(http://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist#configuration-valuePrimitive)
After selecting the value in the dropdownlist(which returns the ID) you need to map that ID to the text you want to display in the cell somehow. The Kendo Grid provides the values for this purpose(http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.values)

Another possible solution is instead of binding to the MathmetricalSymbolCode number field, bind the column to a complex object consisting of both the Code and the CodeValue fields with an appropriate column template...but that's more complicated(especially hooking up the dropdownlist) and I only do it when I have to.

Selected kendo Dropdownlist value getting reset to previous selected value while performing batch operation in kendo ui grid

1 Answers