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

Persist State in AngularJS

1 Answer 105 Views

PivotGrid

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

Στέλιος asked on 13 Dec 2016, 03:43 PM

Hello again Team Telerik,

As I continue my project, a Pivot Grind with AngularJS at APS.Net Core, I have new difficulties. At the beginning, I was saving the strings of rows, columns and measures in a database as three different columns. But in this way, I couldn't save the "state", meaning the "expand", "filter", "sort" etc values. So I looked around for a persist state and I found that getOptions() and setOptions() are working for Kendo Grid, so I thought that it would work on Pivot Grid also. But after many tries with different methods, I think that it doesn't work, or I'm doing something clearly wrong. My goal is to save the state as one column in a database per user. So I need a "save" button and a "load" button. There is no need to give you my code for this. I just like to see a working example in the sample code, because I can't make it work even in this. Please, give me an example of saving and loading to/from a local var for the code below, so I can find out what I'm doing wrong...

<!DOCTYPE html>

<html>

<head>

<title></title>

<link rel="stylesheet" href="styles/kendo.common.min.css" />

<link rel="stylesheet" href="styles/kendo.default.min.css" />

<link rel="stylesheet" href="styles/kendo.default.mobile.min.css" />

<script src="js/jquery.min.js"></script>

<script src="js/angular.min.js"></script>

<script src="js/kendo.all.min.js"></script>

</head>

<body>

<div id="example">

<div ng-app="KendoDemo" ng-controller="MyCtrl">

<div kendo-pivot-configurator k-height="580" k-data-source="dataSource" id="configurator" class="hidden-on-narrow"></div>

<div kendo-pivot-grid="pivot" k-options="options" id="pivotgrid" class="hidden-on-narrow"></div>

<div class="responsive-message"></div>

</div>

<script>

angular.module("KendoDemo", [ "kendo.directives" ])

.controller("MyCtrl", function($scope){

$scope.dataSource = new kendo.data.PivotDataSource({

type: "xmla",

columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Product].[Category]" } ],

rows: [{ name: "[Geography].[City]" }],

measures: ["[Measures].[Reseller Freight Cost]"],

transport: {

connection: {

catalog: "Adventure Works DW 2008R2",

cube: "Adventure Works"

},

read: "//demos.telerik.com/olap/msmdpump.dll"

},

schema: {

type: "xmla"

},

error: function (e) {

alert("error: " + kendo.stringify(e.errors[0]));

}

});

$scope.options = {

groupable: true,

sortable: true,

reorderable: true,

filterable: true,

columnWidth: 200,

height: 580,

dataSource: $scope.dataSource

};

})

</script>

<style>

#pivotgrid {

width: 70%;

}

.hidden-on-narrow {

display: inline-block;

vertical-align: top;

}

</style>

</body>

</html>

Thanks in advance for your time and help,

Regards,

Stelios

1 Answer, 1 is accepted

answered on 16 Dec 2016, 01:58 PM

Hello Stelios,

The PivotGrid does not have getOptions and setOptions functionality to allow you to save it's whole state.
You could apply options client side as described here:
http://docs.telerik.com/kendo-ui/controls/data-management/pivotgrid/how-to/reset-expand-state
But if you need to save them, you have to traverse the current settings and save what is needed.

You may want to submit an issue here:
https://github.com/telerik/kendo-ui-core/issues?utf8=%E2%9C%93&q=setOptions%20

Regards,
Vasil
Telerik by Progress

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.