All Components

You are on the site of the Kendo UI Wrappers for React suite which contains wrappers for the Kendo UI for jQuery widgets. To explore the brand-new set of Kendo UI for React components which are built from the ground up, go to the Kendo UI for React suite.

PivotGrid Overview

The PivotGrid allows the user to perform a complex analysis on the visualized data.

It uses the Online Analytical Processing (OLAP) approach to present the result of multidimensional queries in a comprehensive way and also provides a drill-down functionality that represents the underlying data for calculated cells. The PivotGrid uses an instance of the kendo.data.PivotDataSource component as a data source. The PivotDataSource communicates with an OLAP cube instance on HTTP by using the XMLA protocol.

The PivotGrid wrapper for React is a client-side wrapper for the Kendo UI PivotGrid widget.

Basic Usage

The following example demonstrates the PivotGrid in action.

class PivotGridContainer extends React.Component {
    constructor(props) {
        super(props);

        this.dataSource = new kendo.data.PivotDataSource({
                    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: "https://demos.telerik.com/olap/msmdpump.dll"
                    },
                    schema: {
                        type: "xmla"
                    }
                });

    }

    render() {
        return (
            <div>
            <PivotGrid dataSource={this.dataSource}
                filterable={true}
                sortable={true}
                height={550}
                columnWidth={200}>
            </PivotGrid>
            </div>
        );
    }
}

ReactDOM.render(<PivotGridContainer />, document.querySelector('my-app'));

Installation

  1. Download and install the package.

    npm install --save @progress/kendo-pivotgrid-react-wrapper
  2. Once installed, import the PivotGrid wrapper component from the package.

    import { PivotGrid } from '@progress/kendo-pivotgrid-react-wrapper';
  3. You are required to install one of the Kendo UI themes to style your components.

Dependencies

The PivotGrid package requires you to install the following peer dependencies in your application:

  • @progress/kendo-ui

Features and Functionalities

The PivotGrid delivers the PivotConfigurator supplementary component.

Events

The following example demonstrates basic PivotGrid events. You can subscribe to all PivotGrid events by the handler name.

<PivotGrid dataBound={(e=> console.log("The data is bound"))} // Other configuration.
/>

class PivotGridContainer extends React.Component {
    constructor(props) {
        super(props);

        this.dataSource = new kendo.data.PivotDataSource({
                    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: "https://demos.telerik.com/olap/msmdpump.dll"
                    },
                    schema: {
                        type: "xmla"
                    }
                });

    }

    render() {
        return (
            <div>
            <PivotGrid dataSource={this.dataSource}
                filterable={true}
                sortable={true}
                height={550}
                columnWidth={200}
                dataBound={(e=> console.log("The data is bound"))}>
            </PivotGrid>
            </div>
        );
    }
}

ReactDOM.render(<PivotGridContainer />, document.querySelector('my-app'));
In this article