Kendo UI Grid Persist state in AngularJS

4
votes

I have some problems loading the saved 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 in and the grid works fine.

Then I save the state of my grid this way:

$scope.GridOptionsBackup = kendo.stringify($scope.GridOptions);

This works fine and 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":"#: data.WidgetName#"},{"encoded":true,"field":"WidgetDescription","title":"Description","template":"#: data.WidgetDescription#"}]},"columns":[{"field":"WidgetName","title":"Name","template":"#: data.WidgetName#"},{"field":"WidgetDescription","title":"Description","template":"#: data.WidgetDescription#"}],"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!

2
angularjskendo-uikendo-grid

2 Answers

2
votes

I found the answer:

I had to give the kendo-grid a name:

<div kendo-grid="GridBram" k-options="GridOptions" k-ng-delay="GridOptions"></div>

In my Angular code, the name is automatically binded to a scope. There i can use the same (strange) get and setOptions methods that are used in jQuery. I also used a var to store the JSON.

This is my code:

var savedState = null;

$scope.saveO = function () {
    savedState = kendo.stringify($scope.GridBram.getOptions());
    console.log(test);
}

$scope.loadO = function () {
    $scope.GridBram.setOptions(JSON.parse(savedState));
}

Like this, u can save and load the state of your grid in Angular!

0
votes

Create 2 angular buttons lt button kendo-button ng-click="save()" gt Save State A lt /button gt lt button kendo-button ng-click="load()" gt Load State A lt /button gt var savedState = null;

    $scope.save = function () {
       // alert('sav')
        savedState = kendo.stringify($scope.GridMAS.getOptions());

    }

    $scope.load = function () {
        //alert('lod')
        $scope.GridMAS.setOptions(JSON.parse(savedState));
    }

Worked for me