Kendo UI for jQuery PivotGrid Overview

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

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

Download Free Trial

• Demo page for the PivotGrid

The new PivotGridV2 is now available. It offers a brand new design and a new future-proof architecture that allows the implementation of many upcoming functionalities. As PivotGridV2 aims to replace the legacy PivotGrid, it is recommended to use the PivotGridV2 in your new projects. For information about the differences between the PivotGrid and PivotGridV2, refer to the Comparison article.

Basic Configuration

1. Start with the initialization of the PivotGrid component. Create the component by defining an HTML

   element.

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

2. Configure PivotGrid to work with the Adventure Works cube that is hosted on https://demos.telerik.com.

   <script>
       $(document).ready(function () {
           $("#pivotgrid").kendoPivotGrid({
               height: 200, // Define the height of the component.
               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.
                   },
               }
           });
       });
   </script>
   

The previous example outputs the following result.



Functionality and Features

• Data binding
• Comparison with the PivotGridV2
• Filtering
• Sorting
• Excel export
• PDF export

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

• Basic Usage of the PivotGrid (Demo)
• PivotGrid JavaScript API Reference