Question

我有一个kendo 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的值，因此它们将永远保持为空。

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

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

有两个要点：

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

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

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

1 个答案: