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.
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 app, you can use either.
The PivotGrid represents multidimensional data in a cross-tabular format.
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:
- 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. - Add a PivotGrid to the
Indexview.
@(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)
)
)
.Events(e => e.Error("onError"))
)
)
<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>
- Build and run the application.
Functionality and Features
Referencing Existing Instances
To reference an existing PivotGrid instance, use the jQuery.data() method. Once a reference is established, use the PivotGrid client-side API to control its behavior.
var pivotgrid = $("#pivotgrid").data("kendoPivotGrid");