Skip to content

Latest commit

 

History

History
124 lines (104 loc) · 7.31 KB

overview.md

File metadata and controls

124 lines (104 loc) · 7.31 KB
title page_title description slug position
Overview
Overview
Learn the basics when working with the Telerik UI PivotGridV2 HtmlHelper for {{ site.framework }}.
overview_pivotgridhelperv2_aspnetcore
0

{{ site.framework }} PivotGridV2 Overview

{% if site.core %} The Telerik UI PivotGridV2 HtmlHelper and TagHelper for {{ site.framework }} are server-side wrappers for the Kendo UI PivotGridV2 widget. To add the component to your ASP.NET Core application, you can use either. {% else %} The Telerik UI PivotGridV2 HtmlHelper for {{ site.framework }} is a server-side wrapper for the Kendo UI PivotGridV2 widget. {% endif %}

The PivotGridV2 represents multidimensional data in a cross-tabular format. Compared to the legacy [PivotGrid]({% slug overview_pivotgridhelper_aspnetcore %}), PivotGridV2 offers a brand new design, and its future-proof architecture allows the implementation of many upcoming features. We recommended using the PivotGridV2 in your new projects, because, at some point in the future, the PivotGridV2 will replace the legacy PivotGrid. For more details about the differences between the PivotGrid and PivotGridV2, refer to the [Comparison]({% slug htmlhelpers_pivotgridv2_aspnetcore_comparison %}) article.

Basic Configuration

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

{% if site.core %}

  1. Create a new {{ site.framework }} application. If you have the [Telerik UI for ASP.NET Core Visual Studio Extensions]({% slug overview_visualstudio_aspnetcore %}) installed, create a {{ site.product }} application. Name the application KendoPivotGridV2. If you decide not to use the Visual Studio Extensions, follow the steps from the [introductory article]({% slug gettingstarted_aspnetmvc6_aspnetmvc %}) to install {{ site.product }} in the application. {% else %}

  2. Create a new {{ site.framework }} application. If you have the [Telerik UI for ASP.NET MVC Visual Studio Extensions]({% slug overview_visualstudio_aspnetcore %}) installed, create a {{ site.product }} application. Name the application KendoPivotGridV2. If you decide not to use the Visual Studio Extensions, follow the steps from the [introductory article]({% slug gettingstarted_aspnetmvc %}) to install {{ site.product }} in the application. {% endif %}

  3. Add a PivotGridV2 to the Index View.

         @(Html.Kendo().PivotConfiguratorV2()
        .Name("configurator")
        .Filterable(true)
        .Sortable()
        .Height(570)
    )

    @(Html.Kendo().PivotGridV2()
        .Name("pivotgridv2")
        .ColumnWidth(200)
        .Height(570)
        .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)
                )
            )
        )
    )

    {% if site.core %}

        <kendo-pivotconfiguratorv2 name="configurator" sortable="true" filterable="true" height="570">
    </kendo-pivotconfiguratorv2>

    <kendo-pivotgridv2 name="pivotgrid" column-width="200" height="570" configurator="#configurator">
        <pivot-datasource type="PivotDataSourceType.Xmla">
            <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>
            <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>
        </pivot-datasource>
    </kendo-pivotgridv2>

    {% endif %}

  4. Build and run the application.

The following image demonstrates the output from the example.

{{ site.product_short }} PivotGridV2 bound to data

Functionality and Features

  • [Comparison with the PivotGrid]({% slug htmlhelpers_pivotgridv2_aspnetcore_comparison %})—Learn more about the major differences between the PivotGrid and PivotGridV2 components.
  • [Data binding]({% slug databinding_pivotgridv2helper_aspnetcore %})—You can bind the PivotGridV2 to Online Analytical Processing (OLAP) cube and or flat data.
  • [Templates]({% slug htmlhelpers_pivotgridv2_aspnetcore_templates %})—The available templates allow you to control the rendering of the data cells and headers.
  • [Excel export]({% slug htmlhelpers_pivotgridv2_aspnetcore_excelexport %})—Built-in support for exporting the component data to Excel.
  • [PDF export]({% slug htmlhelpers_pivotgridv2_aspnetcore_pdfexport %})—You can export the component data to PDF through a single click.
  • [Accessibility]({% slug htmlhelpers_actionsheet_accessibility %})—The PivotGridV2 is accessible for screen readers, supports WAI-ARIA, Section 508, WCAG 2.2, and delivers [keyboard shortcuts]({% slug keynav_aspnetcore_pivotgridv2 %}) for faster navigation.

Next Steps

See Also