Skip to content

Commit 96c5b17

Browse files
984045: Updated the UG content and samples for Aggregate section in DataGrid
1 parent 7213cc2 commit 96c5b17

File tree

5 files changed

+81
-74
lines changed

5 files changed

+81
-74
lines changed

blazor/datagrid/aggregates.md

Lines changed: 30 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,27 @@
11
---
22
layout: post
33
title: Aggregates in Blazor DataGrid Component | Syncfusion
4-
description: Checkout and learn here all about Aggregates in the Syncfusion Blazor DataGrid component and much more.
4+
description: Learn how to configure and display aggregates (sum, average, min, max, count, true/false count) in the Syncfusion Blazor DataGrid footer, group footer, and group caption using templates and formatting.
55
platform: Blazor
66
control: DataGrid
77
documentation: ug
88
---
99

1010
# Aggregates in Blazor DataGrid
1111

12-
The Aggregates feature in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows you to display aggregate values in the footer, group footer, and group caption of the Grid. With this feature, you can easily perform calculations on specific columns and show summary information.This feature can be configured using the **GridAggregates** component.To represent an aggregate column, you need to specify the minimum required properties, such as [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_Field) and [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_Type).
12+
The aggregates feature in the Syncfusion Blazor DataGrid displays summary values in the footer, group footer, and group caption. It enables computing summary information for specific columns and presenting it at key locations in the DataGrid. Configure aggregates with the GridAggregates component. For each aggregate column, specify at least the [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_Field) and [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_Type) properties.
1313

14-
**Displaying aggregate values**
14+
For customized rendering, use aggregate templates and access values via AggregateTemplateContext (for example, Sum, Average, Min, Max, Count, TrueCount, and FalseCount). See: [AggregateTemplateContext](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.AggregateTemplateContext.html) and [AggregateType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.AggregateType.html).
1515

16-
By default, the aggregate values are displayed in the footer, group, and caption cells of the Grid. However, you can choose to display the aggregate value in any of these cells by using the following properties:
16+
**Displaying aggregate values**
1717

18-
* [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_FooterTemplate): Use this property to display the aggregate value in the footer cell. You can define a custom template to format the aggregate value as per your requirements.
18+
By default, aggregate values can be shown in the footer, group footer, and group caption cells. Control where and how the values are displayed using these properties:
1919

20-
* [GroupFooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_GroupFooterTemplate): Use this property to display the aggregate value in the group footer cell. Similar to the footerTemplate, you can provide a custom template to format the aggregate value.
20+
* [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_FooterTemplate): Display and format the aggregate value in the footer cell with a custom template.
21+
* [GroupFooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_GroupFooterTemplate): Display and format the aggregate value in the group footer cell with a custom template.
22+
* [GroupCaptionTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_GroupCaptionTemplate): Display and format the aggregate value in the group caption cell with a custom template.
2123

22-
* [GroupCaptionTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_GroupCaptionTemplate): Use this property to display the aggregate value in the group caption cell. You can define a custom template to format the aggregate value.
24+
N> Group footer and group caption aggregates appear when grouping is enabled and data is grouped.
2325

2426
{% tabs %}
2527
{% highlight razor tabtitle="Index.razor" %}
@@ -125,27 +127,26 @@ By default, the aggregate values are displayed in the footer, group, and caption
125127
{% endhighlight %}
126128
{% endtabs %}
127129

128-
{% previewsample "https://blazorplayground.syncfusion.com/embed/hZrACXUDUeyrfGOs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
130+
{% previewsample "https://blazorplayground.syncfusion.com/embed/BtrIDaLdIjQgCsmJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
129131

130-
> * When using local data, the total summary is calculated based on the entire dataset available in the Grid. The aggregate values will reflect calculations across all the rows in the Grid.
131-
> * When working with remote data, the total summary is calculated based on the current page records. This means that if you have enabled pagination and are displaying data in pages, the aggregate values in the footer will represent calculations only for the visible page.
132+
> - With local data, total summaries are calculated over the entire bound dataset. Footer aggregates reflect calculations across all rows.
133+
> - With remote data, footer summaries typically reflect only the current page unless the data adaptor or server returns total summaries. When paging is enabled, the footer shows aggregates for visible page records by default.
132134
133135
## Built-in aggregate types
134136

135-
The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides several built-in aggregate types that can be specified in the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_Type) property to configure an aggregate column.
137+
The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides several built-in aggregate types that can be assigned via the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_Type) property on an aggregate column.
136138

137139
The available built-in aggregate types are :
138140

139-
* **Sum:** Calculates the sum of the values in the column.
140-
141-
* **Average:** Calculates the average of the values in the column.
142-
* **Min:** Finds the minimum value in the column.
143-
* **Max:** Finds the maximum value in the column.
144-
* **Count:** Counts the number of values in the column.
145-
* **TrueCount:** Counts the number of true values in the column.
146-
* **FalseCount:** Counts the number of false values in the column.
141+
* Sum: Calculates the sum of values in the column.
142+
* Average: Calculates the average of values in the column.
143+
* Min: Finds the minimum value in the column.
144+
* Max: Finds the maximum value in the column.
145+
* Count: Counts the number of values in the column.
146+
* TrueCount: Counts the number of true values in the column.
147+
* FalseCount: Counts the number of false values in the column.
147148

148-
Here is an example that demonstrates how to use built-in aggregates types in the Grid:
149+
The following example demonstrates built-in aggregate types with footer templates. Access aggregate values through AggregateTemplateContext using the matching type property (for example, Max, Min, TrueCount):
149150

150151
{% tabs %}
151152
{% highlight razor tabtitle="Index.razor" %}
@@ -289,11 +290,16 @@ Here is an example that demonstrates how to use built-in aggregates types in the
289290
{% endhighlight %}
290291
{% endtabs %}
291292

292-
{% previewsample "https://blazorplayground.syncfusion.com/embed/LNrgCDAjUmunNwOO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
293+
{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVeturxIXlkRbPO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
293294

294-
> * Multiple types for a column are supported only when one of the aggregate templates is used.
295-
> * The aggregate values must be accessed inside the template using their corresponding [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_Type) name.
295+
> - Multiple aggregate types for a single column are supported only when one of the aggregate templates is used.
296+
> - Access aggregate values inside the template using the corresponding [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_Type) name (for example, Sum, Average, Min, Max, Count, TrueCount, FalseCount).
297+
> - Use the Format property (for example, C2 or d) to apply culture-aware currency and date formatting to aggregate values.
296298
297299
## See also
298300

299-
* [Handling Aggregates in Custom Adaptor](https://blazor.syncfusion.com/documentation/datagrid/custom-binding#handling-aggregates-in-custom-adaptor)
301+
* [Handling aggregates in custom adaptor](https://blazor.syncfusion.com/documentation/datagrid/custom-binding#handling-aggregates-in-custom-adaptor)
302+
* [AggregateTemplateContext API reference](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.AggregateTemplateContext.html)
303+
* [AggregateType enumeration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.AggregateType.html)
304+
* [Grouping in DataGrid](https://blazor.syncfusion.com/documentation/datagrid/grouping)
305+
* [Column templates](https://blazor.syncfusion.com/documentation/datagrid/column-template)

blazor/datagrid/custom-aggregate.md

Lines changed: 18 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,25 @@
11
---
22
layout: post
33
title: Custom aggregate in Blazor DataGrid Component | Syncfusion
4-
description: Checkout and learn here all about Custom aggregate in Syncfusion Blazor DataGrid component and much more details.
4+
description: Learn how to create and display custom aggregates in the Syncfusion Blazor DataGrid, including footer and group aggregates, using the CustomAggregate callback and AggregateTemplateContext.Custom.
55
platform: Blazor
66
control: DataGrid
77
documentation: ug
88
---
99

1010
# Custom aggregate in Blazor DataGrid
1111

12-
The custom aggregate feature in Syncfusion’s Blazor DataGrid allows you to calculate aggregate values using your own aggregate function. This feature can be useful in scenarios where the built-in aggregate functions do not meet your specific requirements. To use the custom aggregate option, follow the steps below:
12+
The custom aggregate feature in the Syncfusion Blazor DataGrid enables calculating summary values with a user-defined function when built-in aggregate types do not meet specific requirements. Configure a custom aggregate by setting the aggregate type and providing a delegate that computes the value.
1313

14-
* Set the **AggregateType** as Custom in **GridAggregateColumn** component.
14+
To use the custom aggregate option:
15+
* Set the `AggregateType` as Custom in the `GridAggregateColumn` component.
16+
* Provide a custom aggregate function using the `CustomAggregate` property on the GridAggregateColumn.
1517

16-
* Provide your custom aggregate function in the **customAggregate** property.
18+
The custom aggregate function is invoked differently based on the context:
19+
- **Total Aggregation:** The function receives the entire dataset and the current aggregate column object.
20+
- **Group Aggregation:** The function receives the current group details and the aggregate column object.
1721

18-
The custom aggregate function will be invoked differently for total and group aggregations:
19-
20-
**Total Aggregation:** The custom aggregate function will be called with the whole dataset and the current aggregate column object as arguments.
21-
22-
**Group Aggregation:** The custom aggregate function will be called with the current group details and the aggregate column object as arguments.
23-
24-
Here’s an example that demonstrates how to use the custom aggregate feature in the Grid:
22+
Here’s an example that demonstrates how to use the custom aggregate feature in the DataGrid:
2523

2624
{% tabs %}
2725
{% highlight razor tabtitle="Index.razor" %}
@@ -60,9 +58,8 @@ Here’s an example that demonstrates how to use the custom aggregate feature in
6058
}
6159
private int CustomAggregateFunction()
6260
{
63-
int Count = Queryable.Count(Orders.Where(x => x.ShipCountry.Contains("Brazil")).AsQueryable());
64-
return Count;
65-
}
61+
return Orders.Count(x => x.ShipCountry.Contains("Brazil"));
62+
}
6663
}
6764
{% endhighlight %}
6865
{% highlight c# tabtitle="OrderData.cs" %}
@@ -111,15 +108,15 @@ Here’s an example that demonstrates how to use the custom aggregate feature in
111108
{% endhighlight %}
112109
{% endtabs %}
113110

114-
{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBAsZUjTrNSVYmc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
111+
{% previewsample "https://blazorplayground.syncfusion.com/embed/VZVIXkVRertPQOeX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
115112

116-
> To access the custom aggregate value inside template, use the key as **Custom**
113+
> To access a custom aggregate value inside a template, use the `Custom` key (AggregateTemplateContext.Custom).
117114
118115
**Show the count of distinct values in aggregate row**
119116

120-
You can calculate the count of distinct values in an aggregate row by using custom aggregate functions. By specifying the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_Type) as **Custom** and providing a custom aggregate function in the `CustomAggregate` property, you can achieve this behavior.
117+
Custom aggregate functions can also compute distinct counts or other domain-specific summaries. Specify the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_Type) as Custom and provide a function via the [CustomAggregate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_CustomAggregate) property. The result can be rendered in the footer, group footer, or group caption by using the corresponding template and accessing AggregateTemplateContext.Custom.
121118

122-
Here’s an example that demonstrates how to show the count of distinct values for the **ShipCountry** column using a custom aggregate:
119+
Here’s an example that shows the count of distinct values for the ShipCountry column using a custom aggregate:
123120

124121
{% tabs %}
125122
{% highlight razor tabtitle="Index.razor" %}
@@ -213,6 +210,6 @@ Here’s an example that demonstrates how to show the count of distinct values f
213210

214211
{% previewsample "https://blazorplayground.syncfusion.com/embed/BZVUDvBkVInESEoB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
215212

216-
> To display the aggregate value of the current column in another column, you can use the [ColumnName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_ColumnName) property. If the `ColumnName` property is not defined, the field name value will be assigned to the `ColumnName` property.
217-
218-
> You can refer to the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap4) to understand how to present and manipulate data.
213+
> To display the aggregate value of the current column in another column, use the [ColumnName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_ColumnName) property. If ColumnName is not defined, the value of Field is used.
214+
>
215+
> Refer to the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for feature overviews. Explore the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid examples](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap4) to see data presentation and manipulation in action.

0 commit comments

Comments
 (0)