Add part of the features that have tables

_config.yml

@@ -539,6 +539,31 @@ navigation:
         title: "Items"
         position: 4
     ## End Toolbar
+    ## TreeDataGrid
+    controls/treedatagrid:
+        title: "TreeDataGrid"
+    controls/treedatagrid/populating-with-data:
+        title: "Populating with Data"
+        position: 2
+    controls/treedatagrid/columns:
+        title: "Columns"
+        position: 3
+    controls/treedatagrid/rows:
+        title: "Row Details"
+        position: 4
+    controls/treedatagrid/cells:
+        title: "Cells"
+        position: 5
+    controls/treedatagrid/filtering:
+        title: "Filtering"
+        position: 6
+    controls/treedatagrid/commands:
+        title: "Commands"
+        position: 16
+    controls/treedatagrid/keyboard-navigation:
+        title: "Keyboard Navigation"
+        position: 19
+    ## End TreeDataGrid
     ## TreeView
     controls/treeview:
         title: "TreeView"
@@ -650,6 +675,7 @@ intro_columns:
       "DataGrid": "datagrid-overview"
       "DataPager": "datapager-overview"
       "ItemsControl": "itemscontrol-overview"
+      "TreeDataGrid": "treedatagrid-overview"
   -
     title: "Data Visualization"
     items:

controls/datagrid/keyboard-navigation/windows.md

@@ -30,6 +30,10 @@ The following table lists the actions and keyboard combinations that are availab
 | `End`	| Focuses the last cell of the selected row. |
 | `Ctrl` + `Home`| Focuses the first cell of the DataGrid. |
 | `Ctrl` + `End`| Focuses the last cell of the DataGrid. |
+| `Ctrl` + `Left Arrow` | Focuses the cell at the beginning. |
+| `Ctrl` + `Right Arrow` | Focuses the next cell on the right. |
+| `Ctrl` + `Up Arrow` | Focuses the cell at the beginning. When using single selection mode, the selection also changes. |
+| `Ctrl` + `Down Arrow` | Focuses the last cell. When using single selection mode, the selection also changes. |
 | `Tab` | Focuses the next cell. When in edit mode, the next cell editor is focused. |
 | `Shift` + `Tab` | Focuses the previous cell. When in edit mode, the previous editor is focused. |
 

controls/treedatagrid/cells/current-cell.md

@@ -0,0 +1,44 @@
+---
+title: Current Cell
+page_title: .NET MAUI TreeDataGrid Documentation - Current Cell
+description: Learn how to set the behavior and style the appearance of the current cell of the Telerik UI for .NET MAUI TreeDataGrid component.
+position: 1
+slug: treedatagrid-current-cell
+---
+
+# .NET MAUI TreeDataGrid Current Cell
+
+ The [Telerik UI for .NET MAUI TreeDataGrid]({%slug treedatagrid-overview%}) provides options for configuring the behavior and style of its current cell.
+
+## Setting the Behavior
+
+In the TreeDataGrid, you can use the `RadDataGrid.CurrentCell` (`DataGridCellInfo`) property to programmatically modify the current cell during keyboard navigation, when using the mouse, and so on.
+
+By subscribing to the `CurrentCellChanged` event, you can listen for the changes in the current cell resulting from user interaction with the keyboard.
+
+The `CurrentCellChanged` event handler receives the following parameters:
+
+* The sender argument, which is of type `object`, but can be cast to the `RadDataGrid` type.
+* A `CurrentCellChangedEventArgs` object, which provides the following properties:
+	- `OldCurrentCell`—Gets the previous `CurrentCell`.
+	- `NewCurrentCell`—Gets the new `CurrentCell`.
+
+## Styling the Cell
+
+You can style the current cell by using the `CurrentCellStyle` property (of type `Style` with target type `DataGridCurrentCellAppearance`) and applying the `BackgroundColor`, `BorderColor`, and `BorderThickness` properties.
+
+> As the TreeDataGrid inherits from the DataGrid, for a runnable example with the CurrentCell scenario, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to **DataGrid > Keyboard Navigation** category. 
+
+## Additional Resources
+
+- [.NET MAUI TreeDataGrid Product Page](https://www.telerik.com/maui-ui/treedatagrid)
+- [.NET MAUI TreeDataGrid Forum Page](https://www.telerik.com/forums/maui?tagId=1801)
+- [Telerik .NET MAUI Blogs](https://www.telerik.com/blogs/mobile-net-maui)
+- [Telerik .NET MAUI Roadmap](https://www.telerik.com/support/whats-new/maui-ui/roadmap)
+
+## See Also
+
+- [Setting the .NET MAUI TreeDataGrid Columns]({%slug treedatagrid-columns-overview%})
+- [Using the TreeDataGrid Commands]({%slug treedatagrid-aggregates%})
+- [Sorting .NET MAUI TreeDataGrid Records]({%slug treedatagrid-sorting%})
+- [Filtering .NET MAUI TreeDataGrid Records]({%slug treedatagrid-filtering-overview%})

controls/treedatagrid/cells/mouse-hover-cell.md

@@ -0,0 +1,36 @@
+---
+title: Mouse Hover Cell
+page_title: .NET MAUI TreeDataGrid Documentation - Hover Cell
+description: Learn how to get the current hovered cell and style the appearance of the cell of the Telerik UI for .NET MAUI TreeDataGrid component.
+position: 2
+slug: treedatagrid-mouse-hover-cell
+---
+
+# .NET MAUI TreeDataGrid Hover Cell
+
+The [Telerik UI for .NET MAUI TreeDataGrid]({%slug treedatagrid-overview%}) provides an option to get the data of the cell that the mouse is currently over. In addition, you can change the default hover style. The feature is available only on Desktop—`WinUI` and `MacCatalyst`.
+
+## Getting the Hovered Cell
+
+The `VisualStateService` property (of type `DataGridVisualStateService`) gets the service that handles visual-state related logic, such as keeping track of the element that the mouse is currently over.
+
+The `DataGridVisualStateService` class encapsulates visual state related logic such as mouse-hovered elements within a `Telerik.Maui.Controls.RadDataGrid` instance. This class exposes the `MouseHoverCell` property (`DataGridCellInfo`) which allows you to get the cell that the mouse is currently over.
+
+Here is an example how to get the hovered cell.
+
+```C#
+var hoveredCell = treeDataGrid.VisualStateService.MouseHoverCell;
+```
+
+## Styling the Cell
+
+You can specify the style for the cells and rows when the mouse is over by using the `MouseHoverStyle` property (of type `DataGridBorderStyle`) and applying the `BackgroundColor`, `BorderColor`, and `BorderThickness` properties.
+
+> As the TreeDataGrid inherits from the DataGrid, for a runnable example with the Mouse Hover Cell scenario, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to **DataGrid > Cells** category.
+
+## See Also
+
+- [Setting the .NET MAUI TreeDataGrid Columns]({%slug treedatagrid-columns-overview%})
+- [Using the TreeDataGrid Commands]({%slug treedatagrid-aggregates%})
+- [Sorting .NET MAUI TreeDataGrid Records]({%slug treedatagrid-sorting%})
+- [Filtering .NET MAUI TreeDataGrid Records]({%slug treedatagrid-filtering-overview%})

controls/treedatagrid/columns/cell-templates.md

@@ -0,0 +1,25 @@
+---
+title: Columns Cell Templates
+page_title: .NET MAUI TreeDataGrid  Documentation - Columns Cell Templates
+description: Learn how to define cell templates in TreeDataGrid  for .NET MAUI columns.
+position: 2
+slug: treedatagrid-cell-templates
+---
+
+# .NET MAUI TreeDataGrid Columns Cell Templates
+
+This article describes how to extend the functionality of the columns in the [.NET MAUI TelerikDataGrid]({%slug treedatagrid-overview%}) and define custom content and edit templates using the `CellContentTemplate` and `CellEditTemplate` properties.
+
+* `CellContentTemplate` (`DataTemplate`)—Defines the appearance of each cell associated with the concrete column. `CellContentTemplate` gives you the opportunity to wrap the text inside each DataGrid column. You can add a Label as a content of the Text, Template Column and wrap its text using the Label's `LineBreakMode` property.
+* `CellContentTemplateSelector` (`DataTemplateSelector`)—Defines a `DataTemplateSelector` instance that may be used to retrieve dynamic data templates on a per-cell basis.
+* `CellEditTemplate` (`DataTemplate`)—Defines the editor associated with the concrete column. The `CellEditTemplate` is displayed when the cell is in edit mode.
+
+> As the TreeDataGrid inhertis from the DataGrid, for a runnable example with `CellContentTemplate` and `CellEditTemplate` scenario, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to **DataGrid > Columns** category. 
+
+## See Also
+
+- [Column Footers]({%slug treedatagrid-column-footer%})
+- [Column Resizing]({%slug treedatagrid-column-resizing%})
+- [Columns Width]({%slug treedatagrid-columns-width%})
+- [Frozen Columns]({%slug treedatagrid-frozen-columns%})
+- [Columns Reordering]({%slug treedatagrid-columns-reordering%})

controls/treedatagrid/columns/footer.md

@@ -0,0 +1,56 @@
+---
+title: Column Footers
+page_title: .NET MAUI TreeDataGrid Documentation - Columns Footer
+description: Learn how to visualize a column footer in the Telerik TreeDataGrid for .NET MAUI control.
+position: 3
+slug: treedatagrid-column-footer
+---
+
+
+# .NET MAUI TreeDataGrid Column Footers
+
+The [Telerik UI for .NET MAUI TreeDataGrid]({%slug treedatagrid-overview%}) allows you to display additional information which applies to the columns in a specific row placed at the bottom of the control. This row consists of individual footer cells for each column.
+
+By default, column footers are hidden. To make them visible, set the `ShowColumnFooters` property to `True`.
+
+The following example shows how to define a footer in the TreeDataGrid:
+
+```XAML
+<telerik:RadTreeDataGrid x:Name="dataGrid" 
+                         ShowColumnFooters="True"/>
+```
+
+## Setting Text in the Footer
+
+To define a text inside the footer, use the `FooterText` property. The property is per column:
+
+```XAML
+<telerik:RadTreeDataGrid x:Name="dataGrid" 
+						 ShowColumnFooters="True" 
+						 AutoGenerateColumns="False">
+	<telerik:RadDataGrid.Columns>
+		<telerik:DataGridTextColumn PropertyName="Capital" 
+									FooterText="Capital Footer"/>
+		<telerik:DataGridTextColumn PropertyName="Country" 
+									FooterText="Country Footer"/>
+	</telerik:RadDataGrid.Columns>
+</telerik:RadTreeDataGrid>
+```
+
+> Define the footer per column; otherwise, the cell will appear empty.
+
+## Styling 
+
+Use the `FooterStyle` property to style the footer of the columns in the TreeDataGrid.
+
+## Footer Content Customization
+
+You can customize the content of the footer by using the `FooterContentTemplate`(`DataTemplate`) property.
+
+## See Also
+
+- [Columns Cells Templates]({%slug treedatagrid-cell-templates%})
+- [Column Resizing]({%slug treedatagrid-column-resizing%})
+- [Columns Width]({%slug treedatagrid-columns-width%})
+- [Frozen Columns]({%slug treedatagrid-frozen-columns%})
+- [Columns Reordering]({%slug treedatagrid-columns-reordering%})

controls/treedatagrid/columns/frozen-columns.md

@@ -0,0 +1,56 @@
+---
+title: Frozen Columns
+page_title: .NET MAUI TreeDataGrid  Documentation - Frozen Columns
+description: Learn how to freeze columns in Telerik TreeDataGrid for .NET MAUI.
+position: 4
+slug: treedatagrid-frozen-columns
+---
+
+# .NET MAUI TreeDataGrid Frozen Columns
+
+This article describes the frozen columns feature that the [.NET MAUI TreeDataGrid]({%slug treedatagrid-overview%}) provides. 
+
+You can pin a column on the left side of the grid by setting the `IsFrozen`(`bool`) property to the column. By default the value is `False`. When setting it to `True` to a concrete column, it makes the column frozen. 
+
+The next example shows how to set the frozen columns in XAML:
+
+```XAML
+<telerik:RadTreeDataGrid x:Name="grid" 
+                         ItemsSource="{Binding Clubs}" 
+                         AutoGenerateColumns="False">
+    <telerik:RadDataGrid.Columns>
+        <telerik:DataGridTextColumn PropertyName="Name" 
+                                    IsFrozen="True"
+                                    HeaderText="Name"/>
+    </telerik:RadDataGrid.Columns>
+</telerik:RadTreeDataGrid> 
+```
+
+## 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.
+
+## Styling
+
+When there is a frozen column, a splitter UI is visualized. The splitter UI splits the frozen columns from the unfrozen.
+
+You can style the frozen splitter UI using the `FrozenColumnsSplitterStyle`(`Telerik.Maui.Controls.DataGrid.DataGridFrozenColumnsSplitterStyle`) property. The `FrozenColumnsSplitterStyle` property is a property of the DataGrid. It cannot be set on a specific column.
+
+The next example shows how to style the splitter UI by using the `Width`, `BackgroundColor`, `BorderColor` and `BorderThickness` properties of the FrozenColumnsSplitterStyle class.
+
+```XAML
+<telerik:RadDataGrid.FrozenColumnsSplitterStyle>
+    <telerik:DataGridFrozenColumnsSplitterStyle Width="8"
+                                                BorderColor="Gray"
+                                                BorderThickness="2"
+                                                BackgroundColor="LightBlue"/>
+</telerik:RadDataGrid.FrozenColumnsSplitterStyle>
+```
+
+## See Also
+
+- [Columns Cells Templates]({%slug treedatagrid-cell-templates%})
+- [Column Resizing]({%slug treedatagrid-column-resizing%})
+- [Columns Width]({%slug treedatagrid-columns-width%})
+- [Frozen Columns]({%slug treedatagrid-frozen-columns%})
+- [Columns Reordering]({%slug treedatagrid-columns-reordering%})

controls/treedatagrid/columns/header.md

@@ -0,0 +1,91 @@
+---
+title: Column Headers
+page_title: .NET MAUI DataGrid Documentation - Columns Header
+description: Learn how to style and customize the text in the Telerik UI for .NET MAUI DataGrid Header by using the properties of the component.
+position: 2
+slug: datagrid-column-header
+---
+
+
+# .NET MAUI TreeDataGrid Column Headers
+
+This article will guide you through the usage of the column headers, their customization as well through performing different data operations. Column headers are always visible by default. You can further customize the headers by using the `HeaderStyle` property.
+
+## Changing the Text in the Header
+
+To customize text inside the header, you use the `HeaderText` property. The property is per column. If `HeaderText` is not set, the text inside the `PropertyName` is displayed.
+
+```XAML
+<telerik:RadTreeDataGrid x:Name="dataGrid" 
+					     AutoGenerateColumns="False">
+	<telerik:RadDataGrid.Columns>
+		<telerik:DataGridTextColumn PropertyName="Capital" 
+									HeaderText="Capital Header"/>
+		<telerik:DataGridTextColumn PropertyName="Country" 
+									HeaderText="Country Header"/>
+	</telerik:RadDataGrid.Columns>
+</telerik:RadTreeDataGrid>
+```
+
+## Sorting
+
+The user of the application can sort a particular column by tapping on its header. When the data is sorted by a column, the sort indicator shows in the header.
+
+To learn more about the sorting functionality of the [.NET MAUI TreeDataGrid]({%slug treedatagrid-overview%}), take a look at the [Sorting]({%slug treedatagrid-sorting-overview%}) article.
+
+## Filtering
+
+The header of the column hosts the built-in filtering mechanism (the filter indicator which opens the Filtering UI), which allows the user to filter the data by the columns' values.
+
+To learn more about the filtering functionality, take a look at the [Filtering]({%slug treedatagrid-filtering-overview%}) article.
+
+## Styling 
+
+Use the `HeaderStyle` property to style the `DataGridColumn` header.
+
+## Header Content Customization
+
+You can customize the content of the Header using the `HeaderContentTemplate`(`DataTemplate`) property.
+
+To define the `DataTemplate` for the header:
+
+<snippet id='datagrid-headercontenttemplate-datatemplate' />
+
+## Color on Hover
+
+You can change the hover state background color of the column header by setting the `BackgroundColor` property.
+
+The following example demonstrates how to apply the `BackgroundColor` property to the DataGrid `HeaderContentTemplate` for its hover visual state: 
+
+```XAML
+<DataTemplate x:Key="CustomHeaderTemplate">
+    <telerik:RadBorder BackgroundColor="#F8F8F8"
+                       BorderThickness="1">
+        <VisualStateManager.VisualStateGroups>
+            <VisualStateGroup x:Name="CommonStates">
+                <VisualState x:Name="Normal" />
+                <VisualState x:Name="Focused" />
+                <VisualState x:Name="Disabled" />
+                <VisualState x:Name="PointerOver">
+                    <VisualState.Setters>
+                        <Setter Property="BackgroundColor" Value="#33000000" />
+                    </VisualState.Setters>
+                </VisualState>
+            </VisualStateGroup>
+        </VisualStateManager.VisualStateGroups>
+    </telerik:RadBorder>
+</DataTemplate>
+```
+
+## Customizing the Column
+
+Customize the column header by using the `HeaderContentTemplate`(of type `DataTemplate`) to achieve the desired full customization of the column. The property demonstrates the ability of the DataGrid to specify and show custom appearance for the column headers.
+
+## See Also
+
+- [Columns Cells Templates]({%slug treedatagrid-cell-templates%})
+- [Column Footers]({%slug treedatagrid-column-footer%})
+- [Column Resizing]({%slug treedatagrid-column-resizing%})
+- [Columns Width]({%slug treedatagrid-columns-width%})
+- [Frozen Columns]({%slug treedatagrid-frozen-columns%})
+- [Columns Reordering]({%slug treedatagrid-columns-reordering%})

controls/treedatagrid/columns/nested-properties.md

@@ -0,0 +1,25 @@
+---
+title: Nested Properties
+page_title: .NET MAUI TreeDataGrid Documentation - Nested Properties Support
+description: Check our "Nested Properties" documentation article for Telerik TreeDataGrid for .NET MAUI.
+position: 5
+slug: datagrid-nested-properties
+---
+
+# .NET MAUI TreeDataGrid Nested Properties Support
+
+The [Telerik UI for .NET MAUI TreeDataGrid]({%slug treedatagrid-overview%}) inherits the support for nested properties form the DataGrid control. Nested properties allow binding of complex objects to the tree grid columns.
+
+In addition, the `ListenForNestedPropertyChange` (`bool`) property gives the ability to listen for changes in the nested properties' values. The default value is `false`.
+
+>tip `ListenForNestedPropertyChange` is `false` due to optimization purposes. You can enable it in case you'd need to update the nested properties' values.
+
+## See Also
+
+- [Column Headers]({%slug treedatagrid-column-header%})
+- [Columns Cells Templates]({%slug treedatagrid-cell-templates%})
+- [Column Footers]({%slug treedatagrid-column-footer%})
+- [Column Resizing]({%slug treedatagrid-column-resizing%})
+- [Columns Width]({%slug treedatagrid-columns-width%})
+- [Frozen Columns]({%slug treedatagrid-frozen-columns%})
+- [Columns Reordering]({%slug treedatagrid-columns-reordering%})