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

Persist State in AngularJS

1 Answer 255 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Bram
Top achievements
Rank 1
Bram asked on 17 Dec 2014, 09:42 AM
I have some problems loading the state of the grid in Angular. 

This is the grids HTML: 
<div id="grid" kendo-grid k-options="GridOptions" k-ng-delay="GridOptions"></div>

Later I start my Http call and the $scope.GridOptions are filled and the grid works fine.

Then I save the state of my grid this way:
$scope.GridOptionsBackup = kendo.stringify($scope.GridOptions);

This works fine when i print the output in the console. It looks like this:
{"dataSource":{"schema":{"data":"Data"},"transport":{},"serverSorting":true,"table":null,"fields":[{"encoded":true,"field":"WidgetName","title":"Name","template":"<span ng-bind='dataItem.WidgetName'>#: data.WidgetName#</span>"},{"encoded":true,"field":"WidgetDescription","title":"Description","template":"<span ng-bind='dataItem.WidgetDescription'>#: data.WidgetDescription#</span>"}]},"columns":[{"field":"WidgetName","title":"Name","template":"<span ng-bind='dataItem.WidgetName'>#: data.WidgetName#</span>"},{"field":"WidgetDescription","title":"Description","template":"<span ng-bind='dataItem.WidgetDescription'>#: data.WidgetDescription#</span>"}],"sortable":{"mode":"multiple","allowUnsort":true},"scrollable":true}

When i try to reload the grid with the saved state, i read the JSON, parse it and reassign it to $scope.GridOptions. But this don't work:
$scope.GridOptions = JSON.parse($scope.GridOptionsBackup);

Why is the grid not updated after this line of code? 

I really appreciate any help you can provide!

1 Answer, 1 is accepted

Sort by
0
Bram
Top achievements
Rank 1
answered on 17 Dec 2014, 01:34 PM
I solved my proplem:

I gave the Kendo grid a name in the html like this:
<div kendo-grid="GridBram" k-options="GridOptions" k-ng-delay="GridOptions"></div>

Then in Angular, i used the name to get the options and set the options. Here i used a normal JS var to save the json:
var savedState = null;
 
$scope.saveO = function () {
    savedState = kendo.stringify($scope.GridBram.getOptions());
    console.log(test);
 
}
 
$scope.loadO = function () {
    $scope.GridBram.setOptions(JSON.parse(savedState));
}

SaveO and loadO are binded to the ng-click of some buttons.

This works to save and load the state of a Kendo Grid!
Tags
Grid
Asked by
Bram
Top achievements
Rank 1
Answers by
Bram
Top achievements
Rank 1
Share this question
or