带有下拉模板的 Kendo UI Grid 保存到服务器后不更新值

Question

我们正在使用基于服务器的简单网格。网格读取和更新远程数据源的数据。它有两列使用下拉编辑器。一切似乎都工作正常，除了保存后，当编辑器关闭时，更改的值不会显示在编辑的行中。它仍然显示旧值。当我们尝试使用同步事件刷新网格时，它会更改行的顺序，但是，它会在刷新时更新值。

更新完成后好像没有执行模板功能。如何编辑网格/代码以确保更改的值反映在网格中？

网格定义代码：

$("#servicetype-grid").kendoGrid({
    pageable: true,
    toolbar: [{name: "create", text: ""}, { template: kendo.template($("#servicetype-search-template").html())}],
    columns: [
        {
            field: "serviceName", title: "Service Name" 
        },
        {
            field: "billCalculationTypeId", 
            editor: calculationTypeDropDownEditor, 
            template: function(dataItem) {
                return kendo.htmlEncode(dataItem.billCalculationTypeName);
            },
            title: "Bill Calculation Type"
        },
        {
            field: "payCalculationTypeId", 
            editor: calculationTypeDropDownEditor, 
            template: function(dataItem) {
                return kendo.htmlEncode(dataItem.payCalculationTypeName);
            },                            
            title: "Pay Calculation Type"
        },
        {
            command: [
                { name: "edit", text: { edit: "", cancel: "", update: "" }},
                { name: "destroy", text:""}
            ],
            title: "Actions"
        }
    ],
    dataSource: dataSource,
    sortable: {
        mode: "single",
        allowUnsort: false
    },
    dataBound: function(e) {
        setToolTip(); 
    },
    edit: function(e) {
        $('.k-grid-update').kendoTooltip({content: "Update"});
        $('.k-grid-cancel').kendoTooltip({content: "Cancel"});
    },
    cancel: function(e) {
        setToolTip();
    },
    editable: {
        mode: "inline",
        confirmation: "Are you sure that you want to delete this record?"
    }
});

下拉功能定义为：

function calculationTypeDropDownEditor(container, options) {
    $('<input required data-text-field="name" data-value-field="id" data-bind="value:' + options.field + '"/>')
    .appendTo(container)
    .kendoDropDownList({
        autoBind: false,
        dataSource: {
            transport: {
                read: {
                    dataType: "jsonp",
                    url: baseURL + "rips/services/calculationType/lookupList"
                }
            }
        }
    });
}

Answer 1

在 Google 上进行了一些搜索并浏览了 Kendo 网站上的不同示例后，我终于能够解决这个问题。以下是我对问题的理解和解决方案：

当我们使用下拉框或组合框作为自定义编辑器时，通常我们有一个不同的数据源，其中包含一个带有 id 和要显示的值的列表选项。我将模板定义为我正在查找的字段的“#=field.property#”。就我而言，它是计算类型。以下是我的模型：

                    model: {
                    id: "serviceId",
                    fields: {
                        serviceName: { field:"serviceName", type: "string", validation: { required: { message: "Service Name is required"}} },
                        billCalculationType: { field: "billCalculationType", validation: { required: true}},
                        payCalculationType: { field: "payCalculationType", validation: { required: true} }
                    }

在上面，billCalculationType 和 payCalculationType 应该是显示计算类型名称但存储相应计算类型的 id 的下拉列表值。因此，在我的网格定义中，我添加了以下内容：

                          { field: "billCalculationType", 
                        editor: calculationTypeDropDownEditor, 
                        template:"#=billCalculationType.name#",
                        title: "Bill Calculation Type" },

其中计算下拉编辑器是一个从外部数据源构建下拉列表的功能。所以，它工作正常。但是，为了使模板定义以 (field.property) 格式工作，服务器必须将值作为该字段的类返回，而不是简单的文本。因此，在我的服务器服务中，我以以下格式返回：

{"billCalculationType":{"id":"4028828542b66b3a0142b66b3b780001","name":"Hourly","requiredDetails":false},"payCalculationType":{"id":"4028828542b66b3a0142b66b3b960002","name":"Kilometers","requiredDetails":false},"serviceId":"4028828542b66b3a0142b66b3c16000a","serviceName":"XYZ"} 

请注意，billCalculationType 和 payCalculationType 作为对象返回，其中 name 和 id 作为属性。这允许模板正常工作。

希望这会有所帮助。