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

Forcefully Reload the Data Source of the PivotGrid

Environment

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

Description

How can I reload the data source of the PivotGrid manually?

Solution

The following example demonstrates how to reload the data source of the PivotGrid manually, starting from the initial expand state of the widget.

<div id="example">
    <div id="forceReadButton">Force DataSource Read</div>

    <div id="pivotgrid"></div>

    <script>
        $(document).ready(function () {

            $("#forceReadButton").kendoButton({
                click: function() {
                  var pivot = $("#pivotgrid").data("kendoPivotGrid");

                  reset(pivot, dataSourceConfig);
                }
            });

            function reset(pivot, config) {
              // Call the setDataSource method and reset the current state of the PivotGrid using the initial options. This will cause the data to reload with the exact same configuration.
              pivot.setDataSource(new kendo.data.PivotDataSource(config));
            };

            var dataSourceConfig = {
              type: "xmla",
              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])); }
            };

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

        });
    </script>
    <style>
      #forceReadButton {
        margin-bottom: 10px;
      }
    </style>
</div>

See Also

In this article