blazor-405475-components-pivottable-bind-to-data.md
This document describes how to bind the DevExpress Blazor Pivot Table to data in different scenarios.
You can bind the Pivot Table to runtime data created during component initialization.
@rendermode InteractiveServer
<DxPivotTable Data="SalesData">
<Fields>
<DxPivotTableField Field="@nameof(Sales.SaleInfo.Region)"
Area="@PivotTableArea.Row"
AreaIndex="0" />
<DxPivotTableField Field="@nameof(Sales.SaleInfo.Country)"
Area="@PivotTableArea.Row"
SortOrder="@PivotTableSortOrder.Descending"
AreaIndex="1" />
<DxPivotTableField Field="@nameof(Sales.SaleInfo.Date)"
GroupInterval="@PivotTableGroupInterval.DateYear"
Area="@PivotTableArea.Column"
AreaIndex="0"
Caption="Year" />
<DxPivotTableField Field="@nameof(Sales.SaleInfo.Date)"
GroupInterval="@PivotTableGroupInterval.DateQuarter"
Area="@PivotTableArea.Column"
AreaIndex="1"
Caption="Quarter" />
<DxPivotTableField Field="@nameof(Sales.SaleInfo.Amount)"
SortOrder="@PivotTableSortOrder.Ascending"
Area="@PivotTableArea.Data"
SummaryType="@PivotTableSummaryType.Sum" />
</Fields>
</DxPivotTable>
@code {
IEnumerable<Sales.SaleInfo> SalesData;
protected override async Task OnInitializedAsync() {
SalesData = await Sales.GetSalesAsync();
}
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
public class Sales {
static IList<SaleInfo> dataSource;
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; }
}
static Sales() {
CreateDataSource();
}
public static Task<IQueryable<SaleInfo>> GetSalesAsync() {
return Task.FromResult(dataSource.AsQueryable());
}
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/02/13")
},
new SaleInfo {
OrderId = 10250,
Region = "North America",
Country = "United States",
City = "Denver",
Amount = 2235,
Date = DateTime.Parse("2017/02/07")
},
new SaleInfo {
OrderId = 10251,
Region = "North America",
Country = "Canada",
City = "Vancouver",
Amount = 1965,
Date = DateTime.Parse("2017/03/03")
},
new SaleInfo {
OrderId = 10252,
Region = "North America",
Country = "Canada",
City = "Edmonton",
Amount = 880,
Date = DateTime.Parse("2017/03/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/05/21")
},
new SaleInfo {
OrderId = 10255,
Region = "South America",
Country = "Paraguay",
City = "Asuncion",
Amount = 3140,
Date = DateTime.Parse("2017/05/01")
},
new SaleInfo {
OrderId = 10256,
Region = "Europe",
Country = "United Kingdom",
City = "London",
Amount = 6175,
Date = DateTime.Parse("2017/06/24")
},
new SaleInfo {
OrderId = 10257,
Region = "Europe",
Country = "Germany",
City = "Berlin",
Amount = 4575,
Date = DateTime.Parse("2017/06/11")
},
new SaleInfo {
OrderId = 10517,
Region = "North America",
Country = "United States",
City = "New York",
Amount = 7710,
Date = DateTime.Parse("2018/07/18")
},
new SaleInfo {
OrderId = 10518,
Region = "North America",
Country = "United States",
City = "Los Angeles",
Amount = 7975,
Date = DateTime.Parse("2018/01/10")
},
new SaleInfo {
OrderId = 10519,
Region = "North America",
Country = "United States",
City = "Denver",
Amount = 3285,
Date = DateTime.Parse("2018/03/13")
},
new SaleInfo {
OrderId = 10520,
Region = "North America",
Country = "Canada",
City = "Vancouver",
Amount = 2580,
Date = DateTime.Parse("2018/04/22")
},
new SaleInfo {
OrderId = 10521,
Region = "North America",
Country = "Canada",
City = "Edmonton",
Amount = 2160,
Date = DateTime.Parse("2018/05/26")
},
new SaleInfo {
OrderId = 10522,
Region = "South America",
Country = "Brazil",
City = "Rio de Janeiro",
Amount = 1100,
Date = DateTime.Parse("2018/05/25")
},
new SaleInfo {
OrderId = 10523,
Region = "South America",
Country = "Argentina",
City = "Buenos Aires",
Amount = 4425,
Date = DateTime.Parse("2018/08/21")
},
new SaleInfo {
OrderId = 10524,
Region = "South America",
Country = "Paraguay",
City = "Asuncion",
Amount = 1360,
Date = DateTime.Parse("2018/08/22")
},
new SaleInfo {
OrderId = 10525,
Region = "Europe",
Country = "United Kingdom",
City = "London",
Amount = 3250,
Date = DateTime.Parse("2018/11/14")
},
new SaleInfo {
OrderId = 10526,
Region = "Europe",
Country = "Germany",
City = "Berlin",
Amount = 5550,
Date = DateTime.Parse("2018/12/21")
},
};
}
View Example: Pivot Table - Data binding using Entity Framework Core
You can use Entity Framework Core in Blazor Server applications. Follow the steps below to bind the Pivot Table to data.
Fetch data from a database. See steps 1-6 in the following article:
Add a Pivot Table to your application and bind its Data property to the created data collection.
Add fields to the component. For additional information, refer to the following article: Data Presentation Basics - Fields.
@inject IDbContextFactory<NorthwindContext> NorthwindContextFactory
@implements IDisposable
@using DevExpress.Blazor.PivotTable
<DxPivotTable Data="Data">
<Fields>
<DxPivotTableField Field="CategoryName"
Area="@PivotTableArea.Row" />
<DxPivotTableField Field="ProductName"
Area="@PivotTableArea.Row" />
<DxPivotTableField Field="OrderDate"
Area="@PivotTableArea.Column"
GroupInterval="@PivotTableGroupInterval.DateYear"
Caption="Year" />
<DxPivotTableField Field="OrderDate"
Area="@PivotTableArea.Column"
GroupInterval="@PivotTableGroupInterval.DateQuarter"
Caption="Quarter">
<ValueTemplate>
<span>@($"Q{context.Text}")</span>
</ValueTemplate>
</DxPivotTableField>
<DxPivotTableField Field="UnitPrice"
Area="@PivotTableArea.Data"
SummaryType="@PivotTableSummaryType.Sum" />
<DxPivotTableField Field="ShipCountry"
Area="@PivotTableArea.Filter" />
<DxPivotTableField Field="ShipCity"
Area="@PivotTableArea.Filter" />
</Fields>
</DxPivotTable>
@code {
NorthwindContext Northwind { get; set; }
IEnumerable<object> Data { get; set; }
protected override async Task OnInitializedAsync() {
Northwind = NorthwindContextFactory.CreateDbContext();
var products = await Northwind.Products.ToListAsync();
var categories = await Northwind.Categories.ToListAsync();
var orders = await Northwind.Orders.ToListAsync();
var orderDetails = await Northwind.OrderDetails.ToListAsync();
Data = (from c in categories
join p in products on c.CategoryId equals p.CategoryId
join od in orderDetails on p.ProductId equals od.ProductId
select new {
CategoryName = c.CategoryName,
ProductName = p.ProductName,
UnitPrice = p.UnitPrice,
OrderDate = od.Order.OrderDate,
ShipCountry = od.Order.ShipCountry,
ShipCity = od.Order.ShipCity
})
.ToList();
}
public void Dispose() {
Northwind?.Dispose();
}
}