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

Question

我有一个剑道 ui 网格，我正在对其进行批量操作。在其中一列中，我在 kendo 下拉列表中填充数据。在我更改该下拉列表的值时进行编辑时，它现在正在更改，但是当我在行外单击时，旧值又回来了。如何将选定的值保留在下拉列表中？ 这是我的代码：

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...但是...您实际上没有设置 MathmetricalSymbolCodeValue 和 MeasureTypeCodeValue 的值，因此它们永远保持为空。

当您在下拉列表中进行选择时，您选择的是“代码”字段的值而不是“代码值”字段...网格和下拉列表不知道这些是关键-值对。

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

有两个重点：

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

另一种可能的解决方案是不绑定到 MathmetricalSymbolCode 数字字段，而是使用适当的列模板将列绑定到由 Code 和 CodeValue 字段组成的复杂对象......但这更复杂（尤其是连接下拉列表) 我只在必要时才这样做。