Grid Cancel Edit Crashes Angular

[InnisMaggiore]

I am working on an angular application that utilizes the KendoUI Grid.

When editing a row, if I click the "Cancel" button, nothing happens. If I click "Cancel" a second time, my app navigates to the default state.

I have no custom code added to modify the cancel event, and can't find an explanation of why this is happening.

Any help would be much appreciated.

-Joe

[InnisMaggiore]

Here's an example of my grid config:

01.config: {
02.    sortable: true,
03.    pageable: {
04.        pageSize: 5,
05.        pageSizes: [5, 10, 25, 50, 100, "all"]
06.    },
07.    reorderable: true,
08.    resizable: true,
09.    groupable: false,
10.    scrollable: false,
11.    filterable: {
12.        extra: true
13.    },
14.    dataSource = {
15.        transport: {
16.            create: self.createMarket,
17.            read: self.getMarkets,
18.            update: self.updateMarket,
19.            destroy: self.destroyMarket
20.        },
21.        schema: {
22.            model: {
23.                id: "Id",
24.                fields: {
25.                    Id: { type: "number" },
26.                    NodeId: { type: "number", defaultValue: parseInt($stateParams.nodeId) },
27.                    IndustryName: { type: "string" },
28.                    ApplicationName: { type: "string" },
29.                    Size: { type: "number" },
30.                    Growth: { type: "number" },
31.                    MarketShare: { type: "number" }
32.                }
33.            }
34.        }
35.    },
36.    toolbar: [
37.        { name: "create", text: "Add Market/Application" },
38.        "excel"
39.    ],
40.    editable: "inline",
41.    columns: [
42.        {
43.            field: "IndustryName",
44.            title: "Industry Name"
45.        }, {
46.            field: "ApplicationName",
47.            title: "Application Name"
48.        }, {
49.            field: "Size",
50.            title: "Size",
51.            format: "{0:n1}"
52.        }, {
53.            field: "Growth",
54.            title: "Growth (%)",
55.            template: function (dataItem) {
56.                return kendo.format("{0:n1}", dataItem.Growth) + " %"
57.            }
58.        }, {
59.            field: "MarketShare",
60.            title: "Market Share (%)",
61.            template: function (dataItem) {
62.                return kendo.format("{0:n1}",dataItem.MarketShare) + " %"
63.            }
64.        }, {
65.            command: ["edit", "destroy"],
66.            title: " ",
67.            width: "220px"
68.        }
69.    ]
70.}

[InnisMaggiore]

Alright, the issue ended up being with my read function. It was defined as this:

01.this.getMarkets = function (e) {
02.    marketService.getMarkets($stateParams.nodeId).then(function (data) {
03.        var content = angular.element('#dataInputMarkets');
04.        var scope = content.scope();
05.        scope.marketsDataInputController.safeApply(function () {
06.            self.markets = new kendo.data.ObservableArray(data.markets);
07.            e.success(self.markets);
08.        });
09.    }, self.errorHandler);
10.};

 

Notice, on line 6, that I am turning the returned results into a new ObservableArray. If I remove this logic, then the cancel button works as expected. The revised function is thus:

01.this.getMarkets = function (e) {
02.    marketService.getMarkets($stateParams.nodeId).then(function (data) {
03.        var content = angular.element('#dataInputMarkets');
04.        var scope = content.scope();
05.        scope.marketsDataInputController.safeApply(function () {
06.            self.markets = data.markets;
07.            e.success(self.markets);
08.        });
09.    }, self.errorHandler);
10.};

[Kiril Nikolov]

Hello jchenev,

 

I am happy to hear that the issue is resolved.

 

In case you have any further questions, please do not hesitate to contact us.

 

Regards,
Kiril Nikolov
Telerik