KendoUI Grid 在可编辑模板的弹出模式下不调用更新功能答案

【问题标题】：KendoUI Grid does not invoke update function in popup mode with editable templateKendoUI Grid 在可编辑模板的弹出模式下不调用更新功能
【发布时间】：2015-11-24 09:38:43
【问题描述】：

我正在使用带有 AngularJS 的 Kendo UI Grid。网格有一个“弹出”模式可编辑的剑道模板。网格调用创建、销毁和删除函数；但是不会调用更新函数。奇怪的是，当我将编辑模式更改为“内联”时，会调用更新函数。以下是我的应用程序中的代码 sn-ps：

主 UI 网格：

<div class="container-fluid">
    <kendo-grid style="margin-top: 2em" k-options="ctrl.fundGridOptions" k-scope-field="kgrid" id="myGrid"></kendo-grid>
</div>

编辑模板：

<script id="edit-template" type="text/x-kendo-template">
<div class="container">
    <div class="well">
        Fund :
        <select kendo-drop-down-list k-options="ctrl.fundOptions" style="width: 130px;" ng-model="dataItem.GenevaId"></select>
        <!--<select kendo-drop-down-list k-data-source="ctrl.funds" style="width: 130px;" ng-model="dataItem.GenevaId"></select>-->
        NAV Change Threshold
        <input kendo-numeric-text-box k-min="0" k-max="100" k-ng-model="value" style="width: 60px;" ng-model="dataItem.NAVThreshold" />
        NAV Source
        <select k-data-source="ctrl.navSources" kendo-drop-down-list k-option-label="'-Select-'" style="width: 130px;" ng-model="dataItem.NAVSource"></select>
        Frequency
        <select k-data-source="ctrl.frequencyList" kendo-drop-down-list k-option-label="'-Select-'" style="width: 130px;" ng-model="dataItem.Frequency"></select>
        Type
        <select k-data-source="ctrl.typeList" kendo-drop-down-list k-option-label="'-Select-'" style="width: 130px;" ng-model="dataItem.Type"></select>
    </div>
    <div kendo-grid="ctrl.currencyKendoGrid" style="margin-top: 2em" k-options="ctrl.currencyGridOptions"></div>
</div>
</script>

网格选项：

ctrl.fundGridOptions = {
    dataSource: {
        transport: {
            update: function (options) {
                DataSvc.updateFund(e.data).then(function (response) {
                    e.success(e.data);
                });
            },
        },
        schema: {
            model: {
                id: "FundId",
                fields: {
                    FundId: { type: "number", editable: false, nullable: true },
                    GenevaId: { type: "string", editable: true },
                    NAVThreshold: { type: "number", editable: true },
                    NAVSource: { type: "string", editable: true },
                    Frequency: { type: "string", editable: true },
                    Type: { type: "string", editable: true },
                }
            }
        },
    },
    sortable: true,
    columns: [
         { field: "GenevaId", title: "Fund Name" },
         { field: "NAVThreshold*100", title: "NAV Threshold", template: '#=kendo.format("{0:p}", NAVThreshold)#' },
         { field: "NAVSource", title: "NAV Source" },
         { field: "Frequency", title: "Frequency" },
         { field: "Type", title: "Type" },
         { command: ["edit", "destroy"], title: " " }
    ],
    detailTemplate: kendo.template($("#detail-template").html()),
    detailInit: function (e) {
        kendo.bind(e.detailRow, e.data);
    },
    dataBound: function (e) {
        var grid = e.sender;
        if (grid.dataSource.total() == 0) {
            var colCount = grid.columns.length;
            $(e.sender.wrapper)
                .find('tbody')
                .append('<tr class="kendo-data-row"><td colspan="' + colCount + '" class="no-data">Sorry, no data :(</td></tr>');
        }
    },
    editable: {
        mode: "popup",
        template: kendo.template($("#edit-template").html()),
        window: {
            title: "Edit Fund Details",
            animation: false,
            height: "600",
            width: "1200"
        }
    },
    edit: function (e) {
        if (e.model.Currencies)
            ctrl.currencyKendoGrid.dataSource.data(e.model.Currencies);
    },
    toolbar: [
        {
            name: 'create',
            text: 'Add Fund',
        }],
};

谁能帮我理解为什么'update'函数不会在'popup'模式下被调用，而是在'inline'模式下被调用？提前感谢任何回复。

【问题讨论】：

您找到解决方法了吗？

标签： angularjs kendo-ui kendo-grid

【解决方案1】：

我知道这是个老问题，但我在寻找答案时遇到了它。我认为问题可能是您（和我的）编辑模板使用 ng-model 绑定来编辑数据项，即我们使用的是 angularjs。这实际上似乎并没有改变 dataItem 上的脏属性。我通过在每个控件上使用 ng-change 解决了这个问题。这很痛苦，但似乎有效。

   <input id="Title" type="text" class="k-textbox" ng-model="dataItem.Title" ng-change="dataItem.dirty=true"/>

【讨论】：