blazor-devexpress-dot-blazor-dot-dxpivotgrid-1-8f0e4e36.md
Specifies the data source.
Namespace : DevExpress.Blazor
Assembly : DevExpress.Blazor.v25.2.dll
NuGet Package : DevExpress.Blazor
[Parameter]
public IEnumerable<T> Data { get; set; }
| Type | Description |
|---|---|
| IEnumerable<T> |
A data source.
|
Important
The Pivot Grid was moved to maintenance support mode. No new features/capabilities will be added to this component. We recommend that you migrate to the Pivot Table component.
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();
}
}
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; }
}
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 additional information.
Pivot Grid - Large Data Source
Pivot Grid - Chart Integration
See Also