DxPivotGrid<T>.Data Property

Specifies the data source.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v20.2.dll

NuGet Package: DevExpress.Blazor

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.

Razor

@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();
    }
} 

SaleInfo

using System;

public class SaleInfo {
    public int OrderId { get; set; }
    public string Region { get; set; }
    public string Country { get; set; }
    public string City { get; set; }
    public int Amount { get; set; }
    public DateTime Date { get; set; }
}

Sales

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

public class Sales {
    static IList<SaleInfo> dataSource;
    static Sales() {
        CreateDataSource();
    }

    static void CreateDataSource() {
        dataSource = new List<SaleInfo> {
            new SaleInfo {
                OrderId = 10248,
                Region = "North America",
                Country = "United States",
                City = "New York",
                Amount = 1740,
                Date = DateTime.Parse("2017/01/06")
            },
            new SaleInfo {
                OrderId = 10249,
                Region = "North America",
                Country = "United States",
                City = "Los Angeles",
                Amount = 850,
                Date = DateTime.Parse("2017/01/13")
            },
            new SaleInfo {
                OrderId = 10250,
                Region = "North America",
                Country = "United States",
                City = "Denver",
                Amount = 2235,
                Date = DateTime.Parse("2017/01/07")
            },
            new SaleInfo {
                OrderId = 10251,
                Region = "North America",
                Country = "Canada",
                City = "Vancouver",
                Amount = 1965,
                Date = DateTime.Parse("2017/01/03")
            },
            new SaleInfo {
                OrderId = 10252,
                Region = "North America",
                Country = "Canada",
                City = "Edmonton",
                Amount = 880,
                Date = DateTime.Parse("2017/01/10")
            },
            new SaleInfo {
                OrderId = 10253,
                Region = "South America",
                Country = "Brazil",
                City = "Rio de Janeiro",
                Amount = 5260,
                Date = DateTime.Parse("2017/01/17")
            },
            new SaleInfo {
                OrderId = 10254,
                Region = "South America",
                Country = "Argentina",
                City = "Buenos Aires",
                Amount = 2790,
                Date = DateTime.Parse("2017/01/21")
            },
            new SaleInfo {
                OrderId = 10255,
                Region = "South America",
                Country = "Paraguay",
                City = "Asuncion",
                Amount = 3140,
                Date = DateTime.Parse("2017/01/01")
            },
            new SaleInfo {
                OrderId = 10256,
                Region = "Europe",
                Country = "United Kingdom",
                City = "London",
                Amount = 6175,
                Date = DateTime.Parse("2017/01/24")
            },
            new SaleInfo {
                OrderId = 10257,
                Region = "Europe",
                Country = "Germany",
                City = "Berlin",
                Amount = 4575,
                Date = DateTime.Parse("2017/01/11")
            },
            new SaleInfo {
                OrderId = 10258,
                Region = "Europe",
                Country = "Spain",
                City = "Madrid",
                Amount = 3680,
                Date = DateTime.Parse("2017/01/12")
            },
            new SaleInfo {
                OrderId = 10259,
                Region = "Europe",
                Country = "Russian Federation",
                City = "Moscow",
                Amount = 2260,
                Date = DateTime.Parse("2017/01/01")
            },
            new SaleInfo {
                OrderId = 10260,
                Region = "Asia",
                Country = "China",
                City = "Beijing",
                Amount = 2910,
                Date = DateTime.Parse("2017/01/26")
            },
            new SaleInfo {
                OrderId = 10261,
                Region = "Asia",
                Country = "Japan",
                City = "Tokyo",
                Amount = 8400,
                Date = DateTime.Parse("2017/01/05")
            },
            new SaleInfo {
                OrderId = 10262,
                Region = "Asia",
                Country = "Republic of Korea",
                City = "Seoul",
                Amount = 1325,
                Date = DateTime.Parse("2017/01/14")
            },
            new SaleInfo {
                OrderId = 10263,
                Region = "Australia",
                Country = "Australia",
                City = "Sydney",
                Amount = 3920,
                Date = DateTime.Parse("2017/01/05")
            },
            new SaleInfo {
                OrderId = 10264,
                Region = "Australia",
                Country = "Australia",
                City = "Melbourne",
                Amount = 2220,
                Date = DateTime.Parse("2017/01/15")
            },
            new SaleInfo {
                OrderId = 10265,
                Region = "Africa",
                Country = "South Africa",
                City = "Pretoria",
                Amount = 940,
                Date = DateTime.Parse("2017/01/01")
            },
            new SaleInfo {
                OrderId = 10266,
                Region = "Africa",
                Country = "Egypt",
                City = "Cairo",
                Amount = 1630,
                Date = DateTime.Parse("2017/01/10")
            },
            new SaleInfo {
                OrderId = 10267,
                Region = "North America",
                Country = "Canada",
                City = "Edmonton",
                Amount = 2910,
                Date = DateTime.Parse("2017/01/23")
            },
            new SaleInfo {
                OrderId = 10268,
                Region = "North America",
                Country = "United States",
                City = "Los Angeles",
                Amount = 2600,
                Date = DateTime.Parse("2017/01/14")
            },
            new SaleInfo {
                OrderId = 10269,
                Region = "Europe",
                Country = "Spain",
                City = "Madrid",
                Amount = 4340,
                Date = DateTime.Parse("2017/01/26")
            },
            new SaleInfo {
                OrderId = 10270,
                Region = "Europe",
                Country = "United Kingdom",
                City = "London",
                Amount = 6650,
                Date = DateTime.Parse("2017/01/24")
            },
            new SaleInfo {
                OrderId = 10271,
                Region = "North America",
                Country = "Canada",
                City = "Edmonton",
                Amount = 490,
                Date = DateTime.Parse("2017/01/22")
            }
        };
    }
    public static Task<IQueryable<SaleInfo>> Load() {
        return Task.FromResult(dataSource.AsQueryable());
    }
}

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