DxGridSummaryItem Class
A summary item.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v21.1.dll
NuGet Package: DevExpress.Blazor
Declaration
public class DxGridSummaryItem :
ParameterTrackerSettingsComponent,
IGridSummaryItem
Remarks
The DxGrid allows you to add total and group summaries. Each summary can contain predefined and custom summary items.
Add a Predefined Summary Item
Add a
DxGridSummaryItem
object to the TotalSummary or GroupSummary collection.Specify the summary item’s SummaryType and FieldName properties.
<DxGrid Data="GridDataSource"
UnboundColumnData="Grid_CustomUnboundColumnData"
ShowGroupPanel="true">
<Columns>
<DxGridDataColumn FieldName="Order.ShipName" Caption="Contact Name" />
<DxGridDataColumn FieldName="Order.ShipCountry" Caption="Country" />
<DxGridDataColumn FieldName="Order.ShipCity" Caption="City" />
<DxGridDataColumn FieldName="ProductId" DisplayFormat="d" />
<DxGridDataColumn FieldName="UnitPrice" />
<DxGridDataColumn FieldName="Quantity" />
<DxGridDataColumn FieldName="Discount" DisplayFormat="p0" />
<DxGridDataColumn FieldName="TotalPrice"
DisplayFormat="c"
UnboundType="GridUnboundColumnType.Decimal" />
</Columns>
<GroupSummary>
<DxGridSummaryItem SummaryType="GridSummaryItemType.Max"
ValueDisplayFormat="c"
FieldName="UnitPrice" />
</GroupSummary>
<TotalSummary>
<DxGridSummaryItem SummaryType="GridSummaryItemType.Sum" FieldName="TotalPrice" />
</TotalSummary>
</DxGrid>
Add a Custom Summary Item
Add a
DxGridSummaryItem
object to the TotalSummary or GroupSummary collection and specify the item’s FieldName property.Set the SummaryType property to Custom to use a custom algorithm to calculate a custom summary value.
Handle the CustomSummary event to implement the summary calculation algorithm.
The summary calculation consists of three stages:
Initialization
The CustomSummary event fires once at this stage. The event’s SummaryStage property value is
Start
. Use this stage to initialize a summary value (for example, reset internal counters).Calculation
The
CustomSummary
event fires for each data row in a grid or in a group. The event’s SummaryStage property value isCalculate
. Use this stage to calculate a summary value.You can set the TotalValueReady property to
true
at the Initialization stage to skip the Calculation stage and calculate a custom summary at the Initialization or Finalization stage.Finalization
The CustomSummary event fires once at this stage. The event’s SummaryStage property value is
Finalize
. Use this stage to assign the calculated summary value to the TotalValue property.
In the following example, the custom summary calculates the number of records whose Unit Price
field values are less than 20.
<DxGrid Data="GridDataSource"
UnboundColumnData="Grid_CustomUnboundColumnData"
CustomizeSummaryDisplayText="Grid_CustomizeSummaryDisplayText"
CustomSummary="Grid_CustomSummary">
<Columns>
<DxGridDataColumn FieldName="ProductId" DisplayFormat="d" />
<DxGridDataColumn FieldName="UnitPrice" />
<DxGridDataColumn FieldName="Quantity" />
<DxGridDataColumn FieldName="Discount" DisplayFormat="p0" />
<DxGridDataColumn FieldName="TotalPrice"
DisplayFormat="c"
UnboundType="GridUnboundColumnType.Decimal" />
</Columns>
<TotalSummary>
<DxGridSummaryItem SummaryType="GridSummaryItemType.Sum" FieldName="TotalPrice" />
<DxGridSummaryItem SummaryType="GridSummaryItemType.Custom" Name="Custom" FieldName="ProductId" />
</TotalSummary>
</DxGrid>
@* ... *@
@code {
object GridDataSource { get; set; }
int totalCount;
protected override void OnInitialized() {
GridDataSource = Northwind.OrderDetails
.Include(i => i.Order)
.Include(i => i.Product)
.ToList();
}
void Grid_CustomSummary(GridCustomSummaryEventArgs e) {
if (e.SummaryStage == GridCustomSummaryStage.Start)
totalCount = 0;
else if (e.SummaryStage == GridCustomSummaryStage.Calculate) {
if (Convert.ToInt16(e.GetValue("UnitPrice")) < 20)
totalCount++;
}
else if (e.SummaryStage == GridCustomSummaryStage.Finalize)
e.TotalValue = totalCount;
}
void Grid_CustomizeSummaryDisplayText(GridCustomizeSummaryDisplayTextEventArgs e) {
if (e.Item.Name == "Custom")
e.DisplayText = string.Format("Count (Unit Price < 20): {0}", e.Value);
}
@* ... *@
}
Note
The Grid does not support custom summary calculation when you use a GridDevExtremeDataSource.
Format a Summary
The summary’s default display text can contain the summary function, summary value and a name of a column whose values are summarized. What to display in the summary depends on a summary function and a column under which the summary is located.
@using Grid.Northwind
@inject NorthwindContext Northwind
<DxGrid Data="GridDataSource"
ShowGroupPanel="true"
UnboundColumnData="Grid_CustomUnboundColumnData">
<Columns>
<DxGridDataColumn FieldName="Order.ShipCountry" Caption="Country" />
<DxGridDataColumn FieldName="Order.ShipCity" Caption="City" />
<DxGridDataColumn FieldName="ProductId" DisplayFormat="d" />
<DxGridDataColumn FieldName="UnitPrice" />
<DxGridDataColumn FieldName="Quantity" />
<DxGridDataColumn FieldName="Discount" DisplayFormat="p0" />
<DxGridDataColumn FieldName="TotalPrice"
DisplayFormat="c0"
UnboundType="GridUnboundColumnType.Decimal" />
</Columns>
<TotalSummary>
<DxGridSummaryItem SummaryType="GridSummaryItemType.Sum" FieldName="TotalPrice" />
<DxGridSummaryItem SummaryType="GridSummaryItemType.Sum" FieldName="Quantity" FooterColumnName="TotalPrice" />
</TotalSummary>
<GroupSummary>
<DxGridSummaryItem SummaryType="GridSummaryItemType.Count" FieldName="ProductId" />
</GroupSummary>
</DxGrid>
@* ... *@
@code {
object GridDataSource { get; set; }
protected override void OnInitialized()
{
GridDataSource = Northwind.OrderDetails
.Include(i => i.Order)
.Include(i => i.Product)
.ToList();
}
@* ... *@
void Grid_CustomUnboundColumnData(GridUnboundColumnDataEventArgs e)
{
if (e.FieldName == "TotalPrice")
{
var UnitPrice = Convert.ToDecimal(e.GetRowValue("UnitPrice"));
var Quantity = Convert.ToDecimal(e.GetRowValue("Quantity"));
var Discount = Convert.ToDecimal(e.GetRowValue("Discount"));
e.Value = Quantity * UnitPrice * (1 - Discount);
}
}
}
The following API members allows you to format the summary’s value and display text:
- ValueDisplayFormat property
- CustomizeSummaryDisplayText event
- CustomizeGroupValueDisplayText event
<DxGrid Data="GridDataSource"
UnboundColumnData="Grid_CustomUnboundColumnData"
CustomizeSummaryDisplayText="Grid_CustomizeSummaryDisplayText"
ShowGroupPanel="true">
<Columns>
<DxGridDataColumn FieldName="Order.ShipCountry" Caption="Country" />
<DxGridDataColumn FieldName="Order.ShipCity" Caption="City" />
<DxGridDataColumn FieldName="ProductId" />
<DxGridDataColumn FieldName="UnitPrice" />
<DxGridDataColumn FieldName="Quantity" />
<DxGridDataColumn FieldName="Discount" />
<DxGridDataColumn FieldName="TotalPrice"
UnboundType="GridUnboundColumnType.Decimal" />
</Columns>
<TotalSummary>
<DxGridSummaryItem SummaryType="GridSummaryItemType.Sum"
FieldName="TotalPrice"
ValueDisplayFormat="C0"/>
<DxGridSummaryItem SummaryType="GridSummaryItemType.Count"
Name="CustomTotal"
FieldName="ProductId"
FooterColumnName="TotalPrice"/>
</TotalSummary>
<GroupSummary>
<DxGridSummaryItem SummaryType="GridSummaryItemType.Count"
Name="CustomGroup"
FieldName="ProductId" />
</GroupSummary>
</DxGrid>
@* ... *@
@code {
object GridDataSource { get; set; }
protected override void OnInitialized()
{
GridDataSource = Northwind.OrderDetails
.Include(i => i.Order)
.Include(i => i.Product)
.ToList();
}
void Grid_CustomizeSummaryDisplayText(GridCustomizeSummaryDisplayTextEventArgs e)
{
if (e.Item.Name == "CustomTotal") {
e.DisplayText = string.Format("Total Rows: {0:N0}", e.Value);
}
else if (e.Item.Name == "CustomGroup") {
e.DisplayText = string.Format("Rows in Group: {0}", e.Value);
}
}
void Grid_CustomUnboundColumnData(GridUnboundColumnDataEventArgs e)
{
if (e.FieldName == "TotalPrice")
{
var UnitPrice = Convert.ToDecimal(e.GetRowValue("UnitPrice"));
var Quantity = Convert.ToDecimal(e.GetRowValue("Quantity"));
var Discount = Convert.ToDecimal(e.GetRowValue("Discount"));
e.Value = Quantity * UnitPrice * (1 - Discount);
}
}
}