KendoUI Grid does not invoke update function in popup mode with editable template

Question

I'm using a Kendo UI Grid with AngularJS. The grid has a 'popup' mode editable kendo template. The grid invokes the create, destroy & delete functions; however the update function won't get called. Strangely when I change the edit mode to 'inline', the update function is called. Below are the code snippets from my application :

Main UI Grid:

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

Edit Template:

<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>

Grid Options:

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',
        }],
};

Could anyone help me understand the reason why the 'update' function won't be called in 'popup' mode, but gets called in 'inline' mode ? Appreciate any responses in advance.

xamichee xamichee · Accepted Answer · 2020-04-10T05:01:13

I know this is question old, but I came across it searching for an answer. I think the issue might be that your (and my) edit template uses ng-model binding to edit the dataItem ie we're using angularjs. This doesn't actually seem to change the dirty property on the dataItem. I solved the issue by using ng-change on each control. It's a pain, but seems to work.

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

KendoUI Grid does not invoke update function in popup mode with editable template

1 Answers