blazor-devexpress-dot-blazor-dot-dxgrid-f6ad91f8.md
Allows you to create custom summary items.
Namespace : DevExpress.Blazor
Assembly : DevExpress.Blazor.v25.2.dll
NuGet Package : DevExpress.Blazor
[Parameter]
public Action<GridCustomSummaryEventArgs> CustomSummary { get; set; }
| Type | Description |
|---|---|
| GridCustomSummaryEventArgs |
An object that contains data for this event.
|
Grid allows you to calculate group and total summaries based on custom logic. To create a custom summary, follow the steps below:
Declare a DxGridSummaryItem object in the GroupSummary or TotalSummary template.
Set the SummaryType property to Custom.
Handle the Grid’s CustomSummary event to implement summary calculation algorithm.
(Optional). If the summary value can change dynamically, call the RefreshSummary() method to refresh grid summary values.
(Optional). Specify the summary item’s DisplayText property or handle the CustomizeSummaryDisplayText event to change the summary’s display text.
Run Demo: Grid - Custom Summary
<DxGrid @ref="Grid"
Data="@Data"
SelectedDataItems="@SelectedDataItems"
SelectedDataItemsChanged="Grid_SelectedDataItemsChanged"
CustomSummary="Grid_CustomSummary"
CustomizeSummaryDisplayText="Grid_CustomizeSummaryDisplayText">
<Columns>
<DxGridSelectionColumn />
<DxGridDataColumn FieldName="OrderId" Caption="Order ID"/>
<DxGridDataColumn FieldName="CustomerId" Caption="Customer">
<EditSettings>
<DxComboBoxSettings Data="Customers" ValueFieldName="CustomerId" TextFieldName="ContactName"/>
</EditSettings>
</DxGridDataColumn>
<DxGridDataColumn FieldName="OrderDate" />
<DxGridDataColumn FieldName="ShipCountry" />
<DxGridDataColumn FieldName="ShipCity" />
<DxGridDataColumn FieldName="ShippedDate" />
<DxGridDataColumn FieldName="Total" DisplayFormat="c" />
</Columns>
<TotalSummary>
<DxGridSummaryItem SummaryType="GridSummaryItemType.Custom" Name="Custom" FieldName="Total" />
<DxGridSummaryItem SummaryType="GridSummaryItemType.Sum"
FieldName="Total"
DisplayText="Grand Total: {0}"
ValueDisplayFormat="c0" />
</TotalSummary>
</DxGrid>
@code {
IEnumerable<object> Data { get; set; }
IReadOnlyList<Customer> Customers { get; set; }
IReadOnlyList<object> SelectedDataItems { get; set; }
IGrid Grid { get; set; }
@* ... *@
void Grid_CustomSummary(GridCustomSummaryEventArgs e) {
switch(e.SummaryStage) {
case GridCustomSummaryStage.Start:
e.TotalValue = 0m;
break;
case GridCustomSummaryStage.Calculate:
if(e.Grid.IsDataItemSelected(e.DataItem))
e.TotalValue = (decimal)e.TotalValue + (decimal)e.GetRowValue("Total");
break;
}
}
void Grid_CustomizeSummaryDisplayText(GridCustomizeSummaryDisplayTextEventArgs e) {
if(e.Item.Name == "Custom")
e.DisplayText = string.Format("Sum of Selected ({0}): {1:c0}", SelectedDataItems.Count, e.Value);
}
void Grid_SelectedDataItemsChanged(IReadOnlyList<object> newSelection) {
SelectedDataItems = newSelection;
Grid.RefreshSummary();
}
}
Grid does not support custom summary when you use GridDevExtremeDataSource.
If you use Server Mode data source, the CustomSummary event fires only once. The SummaryStage property returns Finalize.
For additional information about summaries in the Grid component, refer to the following topic: Summary in Blazor Grid.
See Also