Kendo UI Grid Persistent State in AngularJS
I have some problems loading the saved grid state in Angular.
This is the HTML grid:
<div id="grid" kendo-grid k-options="GridOptions" k-ng-delay="GridOptions"></div>
Later I run my Http call and the $ scope.GridOptions are filled in and the grid is working fine.
Then I save the state of the grid this way:
$scope.GridOptionsBackup = kendo.stringify($scope.GridOptions);
This works fine also when I print the output to 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}," scroll ": 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 doesn't work:
$scope.GridOptions = JSON.parse($scope.GridOptionsBackup);
Why is the grid not updating after this line of code?
I really appreciate any help you can provide!
source to share
I found the answer:
I needed to give the kendo mesh a name:
<div kendo-grid="GridBram" k-options="GridOptions" k-ng-delay="GridOptions"></div>
In my Angular code, the name is automatically bound to the scope. There I can use the same (weird) get and setOptions methods that jQuery uses. I also used var to store 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));
}
This way you can save and load the state of your grid in Angular!
source to share
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
source to share