PivotGrid Overview

The Kendo UI PivotGrid represents multidimensional data in a cross-tabular format.

Kendo UI for jQuery Kendoka image

The PivotGrid is part of Kendo UI for jQuery, a professional grade UI library with 100+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Basic Configuration

To configure the PivotGrid to the Adventure Works cube that is hosted on https://demos.telerik.com, create the widget by defining an HTML <div> element.

    <!-- Define  the HTML div that will hold the PivotGrid -->
    <div id="pivotgrid">

The following example demonstrates how to further configure the PivotGrid widget.

        $(document).ready(function () {
                height: 200, // Define the height of the widget.
                dataSource: {
                    type: "xmla", // Define the type.
                    columns: [{ name: "[Date].[Calendar]" }], // Specify a dimension on columns.
                    rows: [{ name: "[Product].[Category]" }], // Specify a dimension on rows.
                    measures: ["[Measures].[Internet Sales Amount]"], // Specify a measure to display.
                    transport: {
                        connection: {
                            catalog: "Adventure Works DW 2008R2", // Specify the name of the catalog.
                            cube: "Adventure Works" // Specify the name of the cube.
                        read: {
                            url: "https://demos.telerik.com/olap/msmdpump.dll", // Define the URL of the service.
                            dataType: "text",
                            contentType: "text/xml",
                            type: "POST"
                    schema: {
                        type: "xmla" // Specify the type of the schema.

The previous example outputs the following result.

A sample Kendo UI PivotGrid

Functionality and Features

Referencing Existing Instances

To reference an existing PivotGrid instance, use the jQuery.data() method. Once a reference has been established, use the PivotGrid API to control its behavior.

The following example demonstrates how to access an existing PivotGrid instance.

var pivotgrid = $("#pivotgrid").data("kendoPivotGrid");

See Also

In this article
Not finding the help you need? Improve this article