add group header and frozen column

controls/datagrid/aggregates/delegate-aggregate-descriptor.md

@@ -19,22 +19,32 @@ 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`.
 
 <snippet id='datagrid-delegate-aggregate-key'/>
 
-**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:
 
 <snippet id='datagrid-delegate-aggregate-function'/>
 
 **3.** Declare the `DelegateAggregateDescriptor` in XAML.
 
 <snippet id='datagrid-property-delegate-descriptor-example'/>
 
+**4.** Define a sample data:
+
+<snippet id='datagrid-aggregates-model'/>
+
+**5.** Set a source to the `RadDataGrid.ItemsSource` proeprty:
+
+<snippet id='datagrid-gelegate-aggregate-source'/>
+
 The following image shows the end result.
 
 ![Delegate Aggregate Descriptor](../images/datagrid-delegate-aggregate-windows.png)
 
+>important For 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%})

controls/datagrid/aggregates/overview.md

@@ -8,30 +8,53 @@ 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
+
+Visualize the aggregates inside the:
+
+* DataGrid Column Footer
+* DataGrid Group Header
+* DataGrid 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.
 
 ![DataGrid Column Footer Aggregate](../images/datagrid-property-aggregate-windows.png)
 
-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
 
-![DataGrid Group Footer Aggregate](../images/datagrid-group-footer-aggregate.png)
+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`.
 
 ![DataGrid Group Header Aggregate](../images/datagrid-group-header-aggregate.png)
 
+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.
+
+![DataGrid Group Footer Aggregate](../images/datagrid-group-footer-aggregate.png)
+
 >tip For an outline of all DataGrid features review the [.NET MAUI DataGrid Overview]({%slug datagrid-overview%}) article.
 
 ## See Also

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. 
+
+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.
+
+**1.** Define the DataGrid in XAML:
 
 <snippet id='datagrid-property-aggregate-descriptor-example'/>
 
+**2.** Add the `telerik` namespace:
+
+```XAML
+xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
+```
+
+**3.** Define a sample data:
+
+<snippet id='datagrid-aggregates-model'/>
+
+**4.** Define the `ViewModel`:
+
+<snippet id='datagrid-aggregates-viewmodel'/>
+
 The following image shows the end result.
 
 ![Property Aggregate Descriptor](../images/datagrid-property-aggregate-windows.png)
 
+>important For 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%})

controls/datagrid/aggregates/styling.md

@@ -10,22 +10,18 @@ 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. 
 
-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`.
+### Style the Group Header:
 
-Style the group header by using the following properties:
+Use the following properties to style the `GroupHeader`:
 
-| Style  | Action 		   |
-|----------------------|-------------------|
+| 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. |
@@ -40,15 +36,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
 
-## Styling the Group Footer
+You can style the aggregates results depending on the value set for 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:
+
+<snippet id='datagrid-group-header-aggregate-styling-example'/>
+
+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`)&mdash;Defines the style of the aggregates cell within the group header of the DataGrid. 
+* `GroupAggregateCellStyleSelector` (`IStyleSelector`)&mdash;Allows you to set a different styles of each aggregate within the group header of the DataGrid by passing the `GroupAggregateCellContext` in the selector.
+* `GroupAggregateCellTemplate` (`DataTemplate`)&mdash;Defines the appearance of each aggregate within the group header of the DataGrid.
+
+> The properties are a 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:
+
+<snippet id='datagrid-group-header-aggregates'/>
+
+**2.** Define the `GroupAggregateCellStyle` in the page's resources:
+
+<snippet id='datagrid-group-header-aggregate-nexttoheader-style-xaml'/>
+
+**3.** Define the`DataModel`:
+
+<snippet id='datagrid-aggregates-model'/>
+
+**4.** Define the `ViewModel`:
+
+<snippet id='datagrid-aggregates-viewmodel'/>
+
+>important For 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:
+
+<snippet id='datagrid-group-header-aggregates'/>
+
+**2.** Define the `StyleSelector` class:
+
+<snippet id='datagrid-group-header-aggregate-nexttoheader-style-xaml'/>
+
+**3.** Define the `GroupAggregateCellStyleSelector` in the page's resources:
+
+<snippet id='datagrid-group-header-aggregate-nexttoheader-style-xaml'/>
+
+**4.** Define the `DataModel`:
+
+<snippet id='datagrid-aggregates-model'/>
+
+**5.** Define the `ViewModel`:
+
+<snippet id='datagrid-aggregates-viewmodel'/>
+
+>important For 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`)&mdash;Defines the style of the `GroupFooter` and the aggregates inside the footer.
-* `GroupFooterStyleSelector`(`IStyleSelector`)&mdash;Defines the style of the selected `GroupFooter` by passing the `GroupFooterContext` in the selector.
-* `FooterStyle`(of type `Style` with target type `DataGridColumnFooterAppearance`)&mdash;Defines the style of the Column Footer and the aggregates inside the Column Footer.
+* `GroupFooterStyle` (of type `Style` with target type `DataGridColumnFooterAppearance`)&mdash;Defines the style of the `GroupFooter` and the aggregates inside the footer.
+* `GroupFooterStyleSelector` (`IStyleSelector`)&mdash;Defines the style of the selected `GroupFooter` by passing the `GroupFooterContext` in the selector.
+* `FooterStyle` (of type `Style` with target type `DataGridColumnFooterAppearance`)&mdash;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 +142,9 @@ The following example shows how to use the `GroupFooterStyleSelector` property:
 
 <snippet id='datagrid-group-aggregate-style-selector-xaml'/>
 
-## Customizing the Group Footer Appearance
+>important For 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 +164,9 @@ The following image shows the end result.
 
 ![Group Aggregate Style](../images/datagrid-grouping-aggregates.png)
 
+>important For 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%})

controls/datagrid/columns/frozen-columns.md

@@ -32,11 +32,18 @@ Set the column freeze programmatically.
 
 <snippet id='data-grid-frozen-columns-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 Column(s)
+
+In a scenario when there is/are frozen column(s) 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:
+
+![.NET MAUI DataGrid Frozen Columns and Group Headers](images/frozen-columns-group-headers.gif)
+
 ## 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
 
 ![.NET MAUI DataGrid Frozen Column](../images/frozen-column-style.png)
 
+
 ## See Also
 
 - [Picker Column]({%slug datagrid-columns-picker-column %})