Forcefully Reload the Data Source of the PivotGrid

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 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

• PivotGrid JavaScript API Reference
• Change Data Source Dynamically
• Drill Down Navigation Always Starting from Root Tuple
• Expand Multiple Column Dimensions
• Filter by Using the include Operator