New to Kendo UI for jQuery? Download free 30-day trial

Reload PivotGrid Configuration Options

Environment

Product Progress® Kendo UI® PivotGrid for jQuery
Operating System Windows 10 64bit
Browser Google Chrome
Browser Version 61.0.3163.100

Description

How can I reload the configuration options of the Kendo UI PivotGrid widget?

Solution

The following example demonstrates how to reload the configuration options of the Kendo UI PivotGrid widget on a button click event. To set the options, the demo uses the PivotDataSource API.

<div id="example">
    <button id="reload">Reload PivotDataSource configuration</button>
    <div id="pivotgrid"></div>

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

    <script>
        $(document).ready(function () {
            var options = {
              columns: [{"name":["[Date].[Calendar]"],"expand":true},{"name":["[Product].[Category]"]}],
              rows: [{"name":["[Geography].[City]"]}],
              measures: [{"name":"[Measures].[Reseller Freight Cost]"}],
              filter: {
                "logic":"and",
                "filters":[{
                  "field":"[Date].[Calendar]",
                  "operator":"in",
                  "value":"[Date].[Calendar].[Calendar Year].&[2006],[Date].[Calendar].[Calendar Year].&[2008]"
                }]
              }
            };

            var dataSourceConfig = {
              type: "xmla",
              transport: {
                connection: {
                  catalog: "Adventure Works DW 2008R2",
                  cube: "Adventure Works"
                },
                read: "https://demos.telerik.com/olap/msmdpump.dll"
              },
              schema: {
                type: "xmla"
              },
              error: function (e) {
                alert("error: " + kendo.stringify(e.errors[0]));
              }
            };

            var pivotgrid = $("#pivotgrid").kendoPivotGrid({
                filterable: true,
                sortable: true,
                columnWidth: 200,
                height: 580,
                dataSource: dataSourceConfig
            }).data("kendoPivotGrid");

            $("#reload").click(function() {
              var newOptions = $.extend({}, dataSourceConfig, options);
              var newSource = new kendo.data.PivotDataSource(newOptions);

              pivotgrid.setDataSource(newSource);
            });
        });
    </script>
</div>

See Also

In this article