Expand TreeView with Include Fields Items

The following example demonstrates how to access the TreeView with the Include Fields items and expand the root node on opening the window in a Kendo UI PivotGrid widget.

Example

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

    <script>
        $(document).ready(function () {
            var pivotgrid = $("#pivotgrid").kendoPivotGrid({
                filterable: true,
                sortable: true,
                columnWidth: 200,
                height: 580,
                dataSource: {
                    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]));
                    }
                }
            }).data("kendoPivotGrid");

            $("#configurator").kendoPivotConfigurator({
                dataSource: pivotgrid.dataSource,
                filterable: true,
                sortable: true,
                height: 580
            });

            //wire 'Include fields' open
            $("[data-role=pivotsettingtarget]").each(function(_, setting) {
              var fieldMenu = $(setting).data("kendoPivotSettingTarget").fieldMenu; //get setting FieldMenu

              if (fieldMenu) {
                fieldMenu.includeWindow.bind("open", function() { //wire open event of the 'Include Fields' window
                  var treeView = fieldMenu.treeView;
                  if (treeView) {
                    treeView.one("dataBound", function() {
                      treeView.expand(".k-item:first"); //Expand the root node
                    });
                  }
                });
              }
            });
        });
    </script>
</div>

See Also

• PivotGrid JavaScript API Reference
• How to Change Data Source Dynamically
• How to Drill Down Navigation Always Starting from Root Tuple
• How to Expand Multiple Column Dimensions
• How to Filter by Using the include Operator
• How to Integrate with Kendo UI Chart
• How to Make the Include fields Window Modal
• How to Modify Measure Tag Captions
• How to Reload PivotGrid Configuration Options
• How to Reset Expand State
• How to Show Tooltip with Data Cell Information
• How to Translate PivotConfigurator Field Items

For more runnable examples on the Kendo UI PivotGrid, browse its How To documentation folder.