在kendo ui网格中执行批处理操作时，选定的kendo Dropdownlist值将重置为先前选择的值

Question

我有一个kendo ui网格，并且正在对其进行批处理操作。 在其中一列中，我在kendo dropdownlist中填充数据。 当我更改该下拉菜单的值时进行编辑时，此刻该值正在更改，但是当我在行外单击时，旧值又回来了。 如何在下拉菜单中保持所选值？ 这是我的代码：

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"
              });
        }

Answer 1

您将列绑定到MathmetricalSymbolCode和MeasureTypeCode，但是模板基于MathmetricalSymbolCodeValue和MeasureTypeCodeValue ... BUT ...却没有任何东西可以实际设置MathmetricalSymbolCodeValue和MeasureTypeCodeValue的值，因此它们永远保持为空。

当您在下拉列表中进行选择时，您是在为“代码”字段而不是 “代码值”字段选择值...表格和下拉列表不知道它们是键值对。

这是您的设置的一个示例（经过调整，因此我可以在不访问您的数据的情况下运行它），其中Operand列起作用： http : //dojo.telerik.com/@Stephen/OCEpa

有两个要点：

1. 使用valuePrimitive：在DropDownList配置上为true，如果该值可为空，则是必需的（ http://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist#configuration-valuePrimitive ）
2. 在下拉列表中选择值（返回ID）后，您需要将该ID映射到要以某种方式显示在单元格中的文本。 Kendo网格为此提供了值（ http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.values ）

另一种可能的解决方案是代替绑定到MathmetricalSymbolCode数字字段，而是将列绑定到由Code和CodeValue字段组成的复杂对象以及适当的列模板...但这更复杂（尤其是连接下拉列表），并且仅在必要时这样做。