Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxPivotGrid<T>.Data Property

Specifies the data source.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
[Parameter]
public IEnumerable<T> Data { get; set; }

#Property Value

Type Description
IEnumerable<T>

A data source.

#Remarks

Use the Data property to bind the Pivot Grid component to a strongly typed collection. Create Pivot Grid fields (DxPivotGridField objects) to supply data to columns, rows, and data cells. Use the field’s Field property to bind it to the data field and the Area property to specify the field’s location.

The following code snippets binds the Pivot Grid component to a sample data source.

@if(GridData == null) {
    <p><em>Loading...</em></p>
} else {
    <DxPivotGrid Data="@GridData">
        <DxPivotGridField Field="@nameof(SaleInfo.Region)" SortOrder="PivotGridSortOrder.Ascending" Area="PivotGridFieldArea.Row"></DxPivotGridField>
        <DxPivotGridField Field="@nameof(SaleInfo.Country)" Area="PivotGridFieldArea.Row"></DxPivotGridField>
        <DxPivotGridField Field="@nameof(SaleInfo.City)" Area="PivotGridFieldArea.Row"></DxPivotGridField>
        <DxPivotGridField Field="@nameof(SaleInfo.Date)" GroupInterval="PivotGridGroupInterval.Year" Area="PivotGridFieldArea.Column" Caption="Year"></DxPivotGridField>
        <DxPivotGridField Field="@nameof(SaleInfo.Date)" GroupInterval="PivotGridGroupInterval.Quarter" Area="PivotGridFieldArea.Column" Caption="Quarter">
            <HeaderTemplate>@string.Format("Q{0}", context)</HeaderTemplate>
        </DxPivotGridField>
        <DxPivotGridField Field="@nameof(SaleInfo.Amount)" Area="PivotGridFieldArea.Data" SummaryType="PivotGridSummaryType.Sum"></DxPivotGridField>
        <DxPivotGridField Field="@nameof(SaleInfo.OrderId)" Caption="Count" Area="PivotGridFieldArea.Data" SummaryType="PivotGridSummaryType.Count"></DxPivotGridField>
    </DxPivotGrid>
}
@code { 
    IQueryable<SaleInfo> GridData;

    protected override async Task OnInitializedAsync() {
        GridData = await Sales.Load();
    }
} 

You can also link the Pivot Grid to the DxChart<T> component. Create a DxPivotGridDataProvider<T> object and set the Pivot Grid’s Data property to the provider’s PivotGridDataSource property value. Refer to the Visualize Data section for more information.

#Online Demos

Pivot Grid - Overview

Pivot Grid - Large Data Source

Pivot Grid - Chart Integration

See Also