The requested page is not available for the requested platform. You are viewing the content for Default platform.

DxPivotGrid<T> Class

A pivot grid component.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.dll

Declaration

public class DxPivotGrid<T> :
    DxPivotGridBase<T>

Type Parameters

Name Description
T

The data item type.

Remarks

The DevExpress Pivot Grid for Blazor (<DxPivotGrid>) allows you to display and analyze multi-dimensional data from the underlying data source. Use this component to calculate summaries and totals against specific values and display the results within the pivot table's cells.

Blazor-PivotGrid-Overview

Note

Online Demo: Pivot Grid - Overview

To add the <DxPivotGrid> component to an application, follow the steps below:

  1. Create and configure the application as described in the Create a New Blazor Application document.

  2. Add the <DxPivotGrid>...</DxPivotGrid> markup to your application.

  3. Bind the Pivot Grid to data.

  4. Configure the component (see the sections below).

Bind to Data

Use the Data property to bind <DxPivotGrid> to an IEnumerable<T> or IQueryable<T> data source.

Note

The Pivot Grid operates in bound mode only. Unbound mode is not supported.

<DxPivotGrid Data=@GridData>
    ...
</DxPivotGrid> 

Fields

The Pivot Grid fields supply data to <DxPivotGrid> columns, rows, and data cells. The DxPivotGridField class represents a field.

<DxPivotGrid Data=@GridData>
    <DxPivotGridField Field=@nameof(SaleInfo.Date) Area=@PivotGridFieldArea.Column></DxPivotGridField>
    ...
</DxPivotGrid> 

Use the field's Area property to specify the field location: Column Header Area, Row Header Area, or Data Header Area.

Blazor-PivotGrid-Areas

  • Column Header Area contains fields that represent grid columns.

    <DxPivotGridField Field=@nameof(SaleInfo.Date) Area=@PivotGridFieldArea.Column></DxPivotGridField>
    
  • Row Header Area contains fields that represent grid rows.

    <DxPivotGridField Field=@nameof(SaleInfo.Region) Area=@PivotGridFieldArea.Row></DxPivotGridField>
    
  • Data Header Area contain fields that provide data for grid cells.

    <DxPivotGridField Field=@nameof(SaleInfo.Amount) Area=@PivotGridFieldArea.Data></DxPivotGridField>
    
Note

To hide field headers, set the ShowFieldHeaders property to false.

Cells

Pivot Grid cells display summaries calculated against data fields. The SummaryType property specifies the field's summary type.

<DxPivotGridField Area=@PivotGridFieldArea.Data SummaryType=@PivotGridSummaryType.Sum></DxPivotGridField>

The available summary types are:

  • Avg (average) - The average of the field values. This type applies to numeric fields only.
  • Count - The total number of field values.
  • Max (maximum) - The largest field value.
  • Min (minimum) - The smallest field value.
  • Sum - The sum of the field values. This type applies to numeric fields only.

Totals

DxPivotGrid calculates totals and displays them as separate columns and rows. Totals use the corresponding data field's summary type for calculations.

The Pivot Grid component supports the following totals:

  • Row/column totals display sub-totals calculated for outer row/column fields.
  • Row/column grand totals display summary totals calculated against all the rows/columns. To hide grand totals, set the ShowGrandTotals property to false.

Blazor-PivotGrid-Totals

Sort Data

DxPivotGrid data is always sorted by row and column fields. A field header displays a sort order (ascending or descending) for the corresponding field's values. To change the sort order, use the SortOrder property in code or click the field header at runtime.

<DxPivotGridField Field=@nameof(SaleInfo.Region) SortOrder=@SortOrder.Ascending></DxPivotGridField>

Blazor-PivotGrid-Sort-Data

Group Data

You can group grid data by date/time field values. To specify how field values are grouped, use the GroupInterval property.

<DxPivotGrid Data=@GridData>
    <DxPivotGridField Field=@nameof(SaleInfo.Date) GroupInterval=@PivotGridGroupInterval.Year Caption="Year"></DxPivotGridField>
    <DxPivotGridField Field=@nameof(SaleInfo.Date) GroupInterval=@PivotGridGroupInterval.Quarter Caption="Quarter">
        <HeaderTemplate>@string.Format("Q{0}", context)</HeaderTemplate>
    </DxPivotGridField>
</DxPivotGrid>

The image below displays DxPivotGrid in two states:

  • The Date field contains original data.
  • The Date field is grouped by years and quarters.

Blazor-PivotGrid-Group-Data

Paging

Use the PageSize property to specify the maximum number of rows a page can display.

Blazor-PivotGrid-Sort-Paging

To hide the pager, set the ShowPager property to false.

Templates

To provide a completely different look and feel of row/column field headers and data cells, use templates: HeaderTemplate and DataTemplate.

<DxPivotGrid Data=@GridData ShowGrandTotals="@ShowGrandTotals" ShowFieldHeaders="@ShowFieldHeaders">
    <DxPivotGridField Field=@nameof(SaleInfo.Date) GroupInterval=@PivotGridGroupInterval.Month Area=@PivotGridFieldArea.Column Caption="Month">
        <HeaderTemplate>
            @System.Globalization.CultureInfo.CurrentCulture.DateTimeFormat.GetMonthName((int)context)
        </HeaderTemplate>
    </DxPivotGridField>
    <DxPivotGridField Field=@nameof(SaleInfo.Amount) Area=@PivotGridFieldArea.Data SummaryType=@PivotGridSummaryType.Sum>
        <DataTemplate>
            <span class=@((decimal)context > 100000 ? "text-success" : "text-danger")>
                @string.Format("{0:c0}", context)
            </span>
        </DataTemplate>
    </DxPivotGridField>
</DxPivotGrid>
Note

Online Demo: Pivot Grid - Templates

Inheritance

Object
Microsoft.AspNetCore.Components.ComponentBase

Implements

Microsoft.AspNetCore.Components.IComponent
Microsoft.AspNetCore.Components.IHandleEvent
Microsoft.AspNetCore.Components.IHandleAfterRender
See Also