# Reload PivotGrid Configuration Options

## Environment

<table>
 <tr>
  <td>Product</td>
  <td>Progress® Kendo UI® PivotGrid for jQuery</td>
 </tr>
 <tr>
  <td>Operating System</td>
  <td>Windows 10 64bit</td>
 </tr>
 <tr>
  <td>Browser</td>
  <td>Google Chrome</td>
 </tr>
 <tr>
  <td>Browser Version</td>
  <td>61.0.3163.100</td>
 </tr>
</table>

## 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](https://docs.telerik.com/kendo-ui/api/data/pivotdatasource#methods).

```dojo
<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/service/v2/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

* [PivotGrid JavaScript API Reference](https://www.telerik.com/kendo-jquery-ui/documentation/api/ui/pivotgrid)
* [Change Data Source Dynamically](https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/change-data-source)
* [Drill Down Navigation Always Starting from Root Tuple](https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/drill-down-with-root-tuple)
* [Expand Multiple Column Dimensions](https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/expand-multiple-dimensions)
* [Filter by Using the include Operator](https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/filter-dimension-with-include)