Kendo UI Grid cancel does not restore original data

Question

I have a kendo grid inside a kendo window template. The grid get's its data from another grid on the main UI. Basically, I have a model hierarchy of Fund -> Currency -> Allocations. The main UI grid is populated with the entire data with the Fund having a detail-template which displays its currencies and their allocations.

Now, let me give some code snippets:

Main Grid:

<div kendo-grid="ctrl.fundGrid" style="margin-top: 2em" k-options="ctrl.fundGridOptions" k-scope-field="kgrid" id="myGrid" k-height='600'></div>

The edit window template:

<script id="edit-template" type="text/x-kendo-template">
<div class="container">
    <div kendo-grid="ctrl.currencyKendoGrid" ng-show="ctrl.IsVisible" style="margin-top: 2em" id="myGrid" k-options="ctrl.currencyGridOptions">
        <div k-detail-template>
            <div id="allocGrid" kendo-grid k-options="ctrl.allocationGridOptions(dataItem)" ng-show="dataItem.FundCurrencyId!=0"></div>
        </div>
    </div>
</div>

The editable configuration that configures the edit window template:

editable: {
            mode: "popup",
            template: kendo.template($("#edit-template").html()),
            //confirmation: "Are you sure you want to delete this fund?",
            window: {
                title: "Edit Fund Details",
                animation: false,
                height: "800",
                width: "1200"
            }
        },

The main grids edit event:

edit: function (e) {
     if (e.model.Currencies)
                ctrl.currencyKendoGrid.dataSource.data(e.model.Currencies);
}

The Currency grids dataSource read is configured as below:

dataSource: {
    transport: {
        read: function (e) {
            e.success();
        },
    }
}

The Currency grid is editable and has edit, destroy commands configured. However when I edit a currency row inline, and then cancel the row edit instead of update, the row won't restore the currency data to it's original state. Can someone help me understand what make the kendo grid restore its state on cancel, and exactly what's the problem with my kendo grid ?

Peppersprout Peppersprout · Accepted Answer · 2016-03-21T14:13:55

I had a situation where I needed to always hide the Delete button on certain rows in my grid. When the Cancel button was clicked the Delete button would reappear. This is what I did to address the problem:

    $(document).on("click", ".k-grid-edit", function () {
        var cancelbtn = $(".k-grid-cancel");

        cancelbtn.each(function () {
            var _this = $(this);
            _this.attr("onclick", "cancelEdit()");
        });
    });

    function cancelEdit() {
        $("#MyGrid").data("kendoGrid").dataSource.read();
    }

Kendo UI Grid cancel does not restore original data

1 Answers