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

Persist State in AngularJS

1 Answer 38 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Στέλιος 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>
    <link rel="stylesheet" href="styles/kendo.common.min.css" />
    <link rel="stylesheet" href="styles/kendo.default.min.css" />
    <link rel="stylesheet" href="styles/" />
    <script src="js/jquery.min.js"></script>
    <script src="js/angular.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
<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>
  angular.module("KendoDemo", [ "kendo.directives" ])
      .controller("MyCtrl", function($scope){
          $scope.dataSource = new{
              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: "//"
              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
    #pivotgrid {
        width: 70%;
    .hidden-on-narrow {
        display: inline-block;
        vertical-align: top;



Thanks in advance for your time and help,




1 Answer, 1 is accepted

Sort by
Telerik team
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:
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:

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.
Asked by
Top achievements
Rank 1
Answers by
Telerik team
Share this question