Question

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

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

网格定义代码：

$("#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上搜索并浏览剑道网站上的不同示例后，我终于能够解决此问题。以下是我对问题和解决方案的理解：

当我们使用下拉框或组合框作为自定义编辑器时，通常我们有一个不同的数据源，其中包含一个带有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作为属性的对象返回。这允许模板正常工作。

希望这会有所帮助。

具有下拉模板的Kendo UI网格保存到服务器后不更新值

1 个答案: