This is a migrated thread and some comments may be shown as answers.

Grid Cancel Edit Crashes Angular

3 Answers 63 Views
Grid
This is a migrated thread and some comments may be shown as answers.
InnisMaggiore
Top achievements
Rank 1
InnisMaggiore asked on 25 Jan 2016, 04:46 PM

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

3 Answers, 1 is accepted

Sort by
0
InnisMaggiore
Top achievements
Rank 1
answered on 25 Jan 2016, 08:05 PM
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.}
0
InnisMaggiore
Top achievements
Rank 1
answered on 25 Jan 2016, 09:01 PM

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.};

0
Kiril Nikolov
Telerik team
answered on 27 Jan 2016, 04:30 PM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
InnisMaggiore
Top achievements
Rank 1
Answers by
InnisMaggiore
Top achievements
Rank 1
Kiril Nikolov
Telerik team
Share this question
or