add group header aggregates alignment to docs

Author: didiyordanova

controls/datagrid/aggregates/overview.md

@@ -42,6 +42,11 @@ To show the Aggregates in the group header, set the `ShowGroupHeaderAggregates`
 
 ![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.

controls/datagrid/aggregates/styling.md

@@ -36,7 +36,11 @@ Use the following properties to style the `GroupHeader`:
 
 ### Style the Aggregates in the Group Header
 
-You can style the appearance of the aggregate results in the group header by setting the following properties to the `GroupHeaderStyle`:
+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 |
 | ------ | ------ |
@@ -50,6 +54,67 @@ The following example shows how to style the aggregate results in the group head
 
 <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 different styles for 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 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:
+
+<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 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:
+
+<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 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: