diff --git a/controls/datagrid/aggregates/delegate-aggregate-descriptor.md b/controls/datagrid/aggregates/delegate-aggregate-descriptor.md
index 00ab857d6..204950512 100644
--- a/controls/datagrid/aggregates/delegate-aggregate-descriptor.md
+++ b/controls/datagrid/aggregates/delegate-aggregate-descriptor.md
@@ -19,11 +19,11 @@ To set up the `DelegateAggregateDescriptor`, use the following properties:
The following example uses the `DelegateAggregateDescriptor` and a custom implementation for a `SumIf` function which sums the values in a range that meet a certain criteria:
-**1.** First, create a class that inherits from the `IKeyLookup` interface. It will return the values of a Price property declared in our business model that is of type double.
+**1.** Create a class that inherits from the `IKeyLookup` interface. It will return the values of a `Price` property declared in our business model that is of type `double`.
-**2.** Then, declare a class that inherits from the `IAggregateFunction` interface. This class will contain our logic for the `SumIf` function which we will later implement through XAML:
+**2.** Declare a class that inherits from the `IAggregateFunction` interface. This class will contain our logic for the `SumIf` function which we will later implement through XAML:
@@ -31,10 +31,20 @@ The following example uses the `DelegateAggregateDescriptor` and a custom implem
+**4.** Define a sample data:
+
+
+
+**5.** Set a source to the `RadDataGrid.ItemsSource` proeprty:
+
+
+
The following image shows the end result.
+>important For the DataGrid `DelegateAggregateDescriptor` example refer to the [SDKBrowser Demo application]({%slug sdkbrowser-app%}) and navigate to the **DataGrid > Aggregates** category.
+
## See Also
- [Property Aggregate Descriptor]({%slug datagrid-property-aggregate-descriptor%})
diff --git a/controls/datagrid/aggregates/overview.md b/controls/datagrid/aggregates/overview.md
index 1a5c0ed2c..1cf0d777d 100644
--- a/controls/datagrid/aggregates/overview.md
+++ b/controls/datagrid/aggregates/overview.md
@@ -8,31 +8,54 @@ slug: datagrid-aggregates
# .NET MAUI DataGrid Aggregates
-The DataGrid exposes an Aggregates API through its `DataGridColumn.AggregateDescriptors` property where you can add `PropertyAggregateDescriptors` or `DelegateAggregateDescriptors`.
+The DataGrid exposes an Aggregates API through its `DataGridColumn.AggregateDescriptors` collection, where you can add `PropertyAggregateDescriptor` and `DelegateAggregateDescriptor`.
{% if site.has_cta_panels == true %}
-{% include cta-panel-overview.html %}
+{% include cta-panel-maui-overview.html %}
{% endif %}
+## Aggregate Descriptors
+
The [`PropertyAggregateDescriptor`]({%slug datagrid-property-aggregate-descriptor %}) enables you to use a set of available functions while the [`DelegateAggregateDescriptor`]({%slug datagrid-delegate-aggregate-descriptor %}) allows you to implement a custom function through the `IAggregateFunction` interface.
-The Telerik UI for .NET MAUI DataGrid Aggregates can be placed in the `ColumnFooter` as well as the `GroupHeader` and `GroupFooter`.
+## Aggregates Visualization
+
+You can visualize the aggregates inside the:
+
+* [DataGrid Column Footer](#aggregates-in-column-footer)
+* [DataGrid Group Header](#aggregates-in-group-header)
+* [DataGrid Group Footer](#aggregates-in-group-footer)
-The `ShowColumnFooters` property is used to visualize the [`ColumnFooters`]({%slug datagrid-column-footer %}) of the DataGrid and is also used to display the Aggregates for the columns.
+### Aggregates in Column Footer
-> The Aggregates are displayed only if there is no `FooterText` set.
+Use the `ShowColumnFooters` property to visualize the [`ColumnFooters`]({%slug datagrid-column-footer %}) of the DataGrid. When applying aggregate descriptor(s) to the column, the aggregate results are displayed inside the column footer.
+
+> The aggregate results are displayed inside the column footer only if there is no `FooterText` set.
-When [grouping]({%slug datagrid-grouping-overview %}) is applied to the DataGrid, you can display the aggregate results for the groups data in the group footer. To visualize the footer, set the `ShowGroupFooters` property to `True`. The group footer is divided into cells which are aligned with the respective columns and show the aggregate results for the particular column.
+### Aggregates in Group Header
-
+When [grouping]({%slug datagrid-grouping-overview %}) is applied to the DataGrid, you can display the aggregate results for the groups data in the group header, next to the title of the group.
-The aggregate results can also be visualized in the group header next to the title of the group. To show the Aggregates in the group header, set the `ShowGroupHeaderAggregates` to `True`.
+To show the Aggregates in the group header, set the `ShowGroupHeaderAggregates` to `True`.
->tip For an outline of all DataGrid features review the [.NET MAUI DataGrid Overview]({%slug datagrid-overview%}) article.
+To align the aggregates in the group according to its header set the `GroupAggregatesAlignment` (`enum` of type `Telerik.Maui.Controls.DataGrid.DataGridGroupAggregatesAlignment`) property. The available options are:
+
+* (default)`None`—Aggregates are not aligned to the DataGrid columns. The aggregates results are displayed after the text displayed for the group key.
+* `NextToHeader`—Aggregate results are aligned to the DataGrid columns and placed next to the header of the group.
+
+### Aggregates in Group Footer
+
+When [grouping]({%slug datagrid-grouping-overview %}) is applied to the DataGrid, you can display the aggregate results for the groups data in the group footer.
+
+To visualize the group footer, set the `ShowGroupFooters` property to `True`. The group footer is divided into cells which are aligned with the respective columns and show the aggregate results for the particular column.
+
+
+
+>tip For an outline of all DataGrid features, review the [.NET MAUI DataGrid Overview]({%slug datagrid-overview%}) article.
## See Also
diff --git a/controls/datagrid/aggregates/property-aggregate-descriptor.md b/controls/datagrid/aggregates/property-aggregate-descriptor.md
index 4cfffbe85..d268f3e1f 100644
--- a/controls/datagrid/aggregates/property-aggregate-descriptor.md
+++ b/controls/datagrid/aggregates/property-aggregate-descriptor.md
@@ -30,14 +30,34 @@ The `PropertyAggregateDescriptor` supports the following `KnownFunction` aggrega
* `Var`—The `Variance` is a measure of dispersion, based on a sample function.
* `VarP`—The `Variance` is a measure of dispersion, based on the entire population function.
-The following example shows how to add a `PropertyAggregateDescriptor` to the DataGrid's Columns. It will take the values from the `Name`, `Price`, `DeliveryPrice` and `Quantity` properties of the row model and the result will be the `Min` and `Max` prices as well as `Average` price for delivery and the `Count` of the listed items.
+The following example shows how to add a `PropertyAggregateDescriptor` to the DataGrid's columns.
+
+The DataGrid will take the values from the `Name`, `Price`, `DeliveryPrice` and `Quantity` properties of the row model and the result will be the `Min`, `Max`, and `Average` delivery prices, as well as the `Count` of the listed items.
+
+**1.** Define the DataGrid in XAML:
+**2.** Add the `telerik` namespace:
+
+```XAML
+xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
+```
+
+**3.** Define a sample data:
+
+
+
+**4.** Define the `ViewModel`:
+
+
+
The following image shows the end result.
+>important For the DataGrid `PropertyAggregateDescriptor` example refer to the [SDKBrowser Demo application]({%slug sdkbrowser-app%}) and navigate to the **DataGrid > Aggregates** category.
+
## See Also
- [Delegate Aggregate Descriptor]({%slug datagrid-delegate-aggregate-descriptor%})
diff --git a/controls/datagrid/aggregates/styling.md b/controls/datagrid/aggregates/styling.md
index e1c307a29..8db103fa8 100644
--- a/controls/datagrid/aggregates/styling.md
+++ b/controls/datagrid/aggregates/styling.md
@@ -10,23 +10,17 @@ slug: datagrid-aggregates-styling
The .NET MAUI DataGrid provides a styling functionality for its group footer, header, and column footer aggregates.
-## Styling the Group Header
+## Style the Group Header
-The [Telerik UI for .NET MAUI DataGrid]({%slug datagrid-overview%}) provides the `GroupHeaderStyle` (of type `Style` with target type `DataGridGroupHeaderAppearance`) configuration which defines the style of the `GroupHeader` and the aggregates inside the header.
+The [Telerik UI for .NET MAUI DataGrid]({%slug datagrid-overview%}) provides the `GroupHeaderStyle` (of type `Style` with target type `DataGridGroupHeaderAppearance`) configuration, which defines the style of the `GroupHeader` and the aggregates inside the header.
-Style the aggregates by using the following properties:
+> To visualize the aggregates in the DataGrid group header, set the `ShowGroupHeaderAggregates` to `True`. The property is a property inside the `RadDataGrid` instance.
-* `AggregatesTextColor`—Defines the color for the aggregates part of the `GroupHeader`.
-* `AggregatesTextFontAttributes`—Defines the font attributes for the aggregates part of the `GroupHeader`.
-* `AggregatesTextFontFamily`—Defines the font family of the aggregates part of the `GroupHeader`.
-* `AggregatesTextFontSize`—Defines the size of the aggregates part of the `GroupHeader`.
-* `AggregatesTextMargin`—Defines the margin for the aggregates part of the `GroupHeader`.
+Use the following properties to style the `GroupHeader`:
-Style the group header by using the following properties:
-
-| Style | Action |
-|----------------------|-------------------|
-| `BackgroundColor` | Defines the color that fills the area within the header |
+| Property | Description |
+| ------ | ------ |
+| `BackgroundColor` | Defines the color that fills the area within the header. |
| `BorderColor`| Defines the color that fills the border region. |
| `BorderThickness` | Defines the thickness of the border. |
| `ButtonFontAttributes` | Defines the font attributes for the expand/collapse symbol for the group headers. |
@@ -40,15 +34,95 @@ Style the group header by using the following properties:
| `TextFontSize` | Defines the size for the text part of the `GroupHeader`. |
| `TextMargin` | Defines the margin for the text part of the `GroupHeader`. |
-> To visualize the `GroupHeader`, set the `ShowGroupHeaderAggregates` to `True`. The property is a property inside the `RadDataGrid` instance.
+### Style the Aggregates in the Group Header
+
+You can style the appearance of the aggregate results based on the value of the `GroupAggregatesAlignment` (`enum` of type `Telerik.Maui.Controls.DataGrid.DataGridGroupAggregatesAlignment`) property.
+
+To style the aggregates in the group header when the value for the `GroupAggregatesAlignment` is `None`, use the `GroupHeaderStyle` (of type `Style` with target type `DataGridGroupHeaderAppearance`) property.
+
+The available properties in the `GroupHeaderStyle` are:
+
+| Property | Description |
+| ------ | ------ |
+| `AggregatesTextColor` | Defines the color for the aggregates part of the `GroupHeader` |
+| `AggregatesTextFontAttributes` | Defines the font attributes for the aggregates part of the `GroupHeader` |
+| `AggregatesTextFontFamily` | Defines the font family of the aggregates part of the `GroupHeader` |
+| `AggregatesTextFontSize` | Defines the size of the aggregates part of the `GroupHeader` |
+| `AggregatesTextMargin` | Defines the margin for the aggregates part of the `GroupHeader` |
+
+The following example shows how to style the aggregate results in the group header when setting the `GroupHeaderStyle` in the page's resources:
+
+
+
+To style and customize the aggregate results when setting the `GroupAggregatesAlignment` to `NextToHeader`, use the following properties:
+
+* `GroupAggregateCellStyle` (of type `Style` with target type `DataGridGroupAggregateCellAppearance`)—Defines the style of the aggregates cell within the group header of the DataGrid.
+* `GroupAggregateCellStyleSelector` (`IStyleSelector`)—Allows you to set different styles for each aggregate within the group header of the DataGrid by passing the `GroupAggregateCellContext` in the selector.
+* `GroupAggregateCellTemplate` (`DataTemplate`)—Defines the appearance of each aggregate within the group header of the DataGrid.
+
+> The properties listed above are properties inside the `RadDataGrid` instance.
+
+The table below describes the available properties for the `GroupAggregateCellStyle`:
+
+| Property | Description |
+| ------ | ------ |
+| `TextColor` | Defines the color of the cell text. |
+| `FontAttributes` | Defines the font attributes for the text in the cell. |
+| `FontFamily` | Defines the font family for the text in the cell. |
+| `FontSize` | Defines the size for the text in the cell. |
+| `Margin` | Defines the margin that is applied to the text of the cell. |
+
+#### Example with the `GroupAggregateCellStyle`
+
+**1.** Define the DataGrid in XAML:
+
+
+
+**2.** Define the `GroupAggregateCellStyle` in the page's resources:
+
+
+
+**3.** Define the`DataModel`:
+
+
-## Styling the Group Footer
+**4.** Define the `ViewModel`:
+
+
+
+>important For the DataGrid `GroupHeaderAggregates Style` example refer to the [SDKBrowser Demo application]({%slug sdkbrowser-app%}) and navigate to the **DataGrid > Aggregates** category.
+
+#### Example with the `GroupAggregateCellStyleSelector`
+
+**1.** Define the DataGrid in XAML:
+
+
+
+**2.** Define the `StyleSelector` class:
+
+
+
+**3.** Define the `GroupAggregateCellStyleSelector` in the page's resources:
+
+
+
+**4.** Define the `DataModel`:
+
+
+
+**5.** Define the `ViewModel`:
+
+
+
+>important For the DataGrid `GroupHeaderAggregates StyleSelector` example refer to the [SDKBrowser Demo application]({%slug sdkbrowser-app%}) and navigate to the **DataGrid > Aggregates** category.
+
+## Style the Group Footer
The DataGrid provides the following options for styling its group footer:
-* `GroupFooterStyle`(of type `Style` with target type `DataGridColumnFooterAppearance`)—Defines the style of the `GroupFooter` and the aggregates inside the footer.
-* `GroupFooterStyleSelector`(`IStyleSelector`)—Defines the style of the selected `GroupFooter` by passing the `GroupFooterContext` in the selector.
-* `FooterStyle`(of type `Style` with target type `DataGridColumnFooterAppearance`)—Defines the style of the Column Footer and the aggregates inside the Column Footer.
+* `GroupFooterStyle` (of type `Style` with target type `DataGridColumnFooterAppearance`)—Defines the style of the `GroupFooter` and the aggregates inside the footer.
+* `GroupFooterStyleSelector` (`IStyleSelector`)—Defines the style of the selected `GroupFooter` by passing the `GroupFooterContext` in the selector.
+* `FooterStyle` (of type `Style` with target type `DataGridColumnFooterAppearance`)—Defines the style of the Column Footer and the aggregates inside the Column Footer.
> To visualize the `GroupFooter`, set the `ShowGroupFooters` property to `True`. The property is a property inside the `RadDataGrid` instance.
@@ -66,7 +140,9 @@ The following example shows how to use the `GroupFooterStyleSelector` property:
-## Customizing the Group Footer Appearance
+>important For the DataGrid `GroupFooter` Aggregates styling example refer to the [SDKBrowser Demo application]({%slug sdkbrowser-app%}) and navigate to the **DataGrid > Aggregates** category.
+
+### Customizing the Group Footer Appearance
Customizing the footer in the DataGrid also changes the appearance of the aggregates inside the component.
@@ -86,6 +162,9 @@ The following image shows the end result.
+>important For the DataGrid `GroupFooter` styling example refer to the [SDKBrowser Demo application]({%slug sdkbrowser-app%}) and navigate to the **DataGrid > Aggregates** category.
+
+
## See Also
- [Property Aggregate Descriptor]({%slug datagrid-property-aggregate-descriptor%})
diff --git a/controls/datagrid/columns/frozen-columns.md b/controls/datagrid/columns/frozen-columns.md
index 2121c8eb0..f8b171511 100644
--- a/controls/datagrid/columns/frozen-columns.md
+++ b/controls/datagrid/columns/frozen-columns.md
@@ -32,11 +32,18 @@ Set the column freeze programmatically.
-
## Collection of Frozen Columns
Once a column is frozen, it is added to the `FrozenColumns` collection (read-only collection). The collection can be used only for read-only purposes and cannot be modified. Freezing/Unfreezing the columns is done only through the `IsFrozen` property of the columns.
+## Group Header and Frozen Columns
+
+In a scenario with frozen columns and grouping, you can specify whether the group header will be clipped to the bounds of the frozen area by setting the `AreGroupHeadersClippedWhenFrozen` (`bool`) property. The default value is `False`.
+
+Here is the result when the `AreGroupHeadersClippedWhenFrozen` property is set:
+
+
+
## Styling
When there is/are frozen column(s) a splitter UI is visualized. The splitter UI splits the frozen columns from the unfrozen.
@@ -58,6 +65,7 @@ Style the splitter UI's `Width`, `BackgroundColor`, `BorderColor` and `BorderThi
+
## See Also
- [Picker Column]({%slug datagrid-columns-picker-column %})
diff --git a/controls/datagrid/columns/images/frozen-columns-group-headers.gif b/controls/datagrid/columns/images/frozen-columns-group-headers.gif
new file mode 100644
index 000000000..0d5a44b56
Binary files /dev/null and b/controls/datagrid/columns/images/frozen-columns-group-headers.gif differ