blazor-devexpress-dot-blazor-dot-pivottable-dot-dxpivottable-0ff8af84.md
Specifies a common template for all data cells in the Pivot Table.
Namespace : DevExpress.Blazor.PivotTable
Assembly : DevExpress.Blazor.PivotTable.v25.2.dll
NuGet Package : DevExpress.Blazor.PivotTable
[Parameter]
public RenderFragment<PivotTableFieldCellTemplateContext> FieldCellTemplate { get; set; }
| Type | Description |
|---|---|
| RenderFragment<PivotTableFieldCellTemplateContext> |
The template content.
|
The Pivot Table component allows you to use different templates to customize appearance of its areas: headers, field values, data cells.
Use the FieldCellTemplate property to specify a common template for all data cells in the Pivot Table. To override a template for data cells that correspond to a specific field, use the DxPivotTableField.CellTemplate property.
The following code specifies FieldHeaderTemplate, FieldValueTemplate, and FieldCellTemplate.
@rendermode InteractiveServer
<DxPivotTable Data="SalesData"
CssClass="h-440">
<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>
<FieldHeaderTemplate>
<span class="red">@context.Text </span>
</FieldHeaderTemplate>
<FieldValueTemplate>
<span class="fs">@context.Value</span>
</FieldValueTemplate>
<FieldCellTemplate>
<span class="fw">@context.Value</span>
</FieldCellTemplate>
</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")
},
};
}
.h-440 {
height: 440px;
}
.red {
color: red;
}
.fs {
font-style: italic;
}
.fw {
font-weight: 300;
}
See Also