DxPivotGrid<T>.Data Property

Specifies the data source.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.1.dll

Declaration

[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 shows how to bind 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