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

Persist State in AngularJS

1 Answer 22 Views
PivotGrid
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>
<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>
</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

Sort by
0
Vasil
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:
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.
Tags
PivotGrid
Asked by
Στέλιος
Top achievements
Rank 1
Answers by
Vasil
Telerik team
Share this question
or