ASP.NET Core PivotGrid Overview

The PivotGrid is part of Telerik UI for ASP.NET Core, 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

The Telerik UI PivotGrid TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI PivotGrid widget. To add the component to your ASP.NET Core application, you can use either.

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

• Demo page for the PivotGrid HtmlHelper

• Demo page for the PivotGrid TagHelper

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

To configure the PivotGrid for Ajax binding to an Adventure Works cube that is hosted on https://demos.telerik.com/olap/msmdpump.dll, follow the next steps:

1. Create a new ASP.NET Core application. If you have the Telerik UI for ASP.NET Core Visual Studio Extensions installed, create a Telerik UI for ASP.NET Core application. Name the application KendoPivotGrid. If you decide not to use the Telerik UI for ASP.NET Core Visual Studio Extensions, follow the steps from the introductory article to add Telerik UI for ASP.NET Core to the application.

2. Add a PivotGrid to the Index View.

       @(Html.Kendo().PivotConfigurator()
           .Name("configurator")
           .Filterable(true)
           .Sortable()
           .Height(570)
       )
   
       @(Html.Kendo().PivotGrid()
           .Name("pivotgrid")
           .ColumnWidth(200)
           .Height(570)
           .Filterable(true)
           .Sortable()
           .Configurator("#configurator")
           .DataSource(dataSource => dataSource.
               Xmla()
               .Columns(columns => {
                   columns.Add("[Date].[Calendar]").Expand(true);
                   columns.Add("[Product].[Category]");
               })
               .Rows(rows => rows.Add("[Geography].[City]"))
               .Measures(measures => measures.Values(new string[]{"[Measures].[Reseller Freight Cost]"}))
               .Transport(transport => transport
                   .Connection(connection => connection
                       .Catalog("Adventure Works DW 2008R2")
                       .Cube("Adventure Works"))
                   .Read(read => read
                       .Url("https://demos.telerik.com/olap/msmdpump.dll")
                       .DataType("text")
                       .ContentType("text/xml")
                       .Type(HttpVerbs.Post)
                   )
               )
           )
       )
   

       @addTagHelper *, Kendo.Mvc
   
       <kendo-pivotdatasource type=@(PivotDataSourceType.Xmla) name="pivotSource">
           <columns>
               <pivot-datasource-column name="[Date].[Calendar]" expand="true"></pivot-datasource-column>
               <pivot-datasource-column name="[Product].[Category]"></pivot-datasource-column>
           </columns>
           <rows>
               <row name="[Geography].[City]"></row>
           </rows>
           <schema type="xmla"/>
           <measures values=@(new string[] {"[Measures].[Reseller Freight Cost]"} ) ></measures>
           <transport>
               <read url="https://demos.telerik.com/olap/msmdpump.dll" datatype="text" content-type="text/xml" type="POST" />
               <connection catalog="Adventure Works DW 2008R2" cube="Adventure Works"></connection>
           </transport>
       </kendo-pivotdatasource>
   
       <kendo-pivotconfigurator name="configurator" 
           filterable="true" 
           height="570" 
           datasource-id="pivotSource">
       </kendo-pivotconfigurator>
   
       <kendo-pivotgrid name="pivotgrid"
           filterable="true" 
           column-width="200" 
           height="570"
           datasource-id="pivotSource">
           <sortable enabled="true" />
       </kendo-pivotgrid>
   

3. Build and run the application.

Functionality and Features

• Data binding—You can bind the PivotGrid to Online Analytical Processing (OLAP) cube and or flat data.
• Filtering—Enable the filtering of the PivotGrid rows and columns.
• Sorting—The component supports sorting by the caption name of the members.
• Templates—The available templates allow you to control the rendering of the data cells and headers.
• Excel export—The PivotGrid provides an export to Excel feature.
• PDF export—You can export the PivotGrid content to PDF through a single click.

Next Steps

• Getting Started with the PivotGrid

• Basic Usage of the PivotGrid HtmlHelper for ASP.NET Core (Demo)

• Basic Usage of the PivotGrid TagHelper for ASP.NET Core (Demo)

See Also

• Server-Side API of the PivotGrid HtmlHelper

• Server-Side API of the PivotGrid TagHelper

• Client-Side API of the PivotGrid