Skip to content

Commit 26d163c

Browse files
didiyordanovadidiyordanova
authored
Merge pull request #1145 from telerik/didi/treedatagrid
Add first part of TreeDataGrid docs
2 parents 8559413 + 18a07c3 commit 26d163c

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+2475
-0
lines changed

‎_config.yml

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -539,6 +539,31 @@ navigation:
539539
title: "Items"
540540
position: 4
541541
## End Toolbar
542+
## TreeDataGrid
543+
controls/treedatagrid:
544+
title: "TreeDataGrid"
545+
controls/treedatagrid/populating-with-data:
546+
title: "Populating with Data"
547+
position: 2
548+
controls/treedatagrid/columns:
549+
title: "Columns"
550+
position: 3
551+
controls/treedatagrid/rows:
552+
title: "Row Details"
553+
position: 4
554+
controls/treedatagrid/cells:
555+
title: "Cells"
556+
position: 5
557+
controls/treedatagrid/filtering:
558+
title: "Filtering"
559+
position: 6
560+
controls/treedatagrid/commands:
561+
title: "Commands"
562+
position: 16
563+
controls/treedatagrid/keyboard-navigation:
564+
title: "Keyboard Navigation"
565+
position: 19
566+
## End TreeDataGrid
542567
## TreeView
543568
controls/treeview:
544569
title: "TreeView"
@@ -650,6 +675,7 @@ intro_columns:
650675
"DataGrid": "datagrid-overview"
651676
"DataPager": "datapager-overview"
652677
"ItemsControl": "itemscontrol-overview"
678+
"TreeDataGrid": "treedatagrid-overview"
653679
-
654680
title: "Data Visualization"
655681
items:

‎controls/datagrid/keyboard-navigation/windows.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,10 @@ The following table lists the actions and keyboard combinations that are availab
3030
| `End` | Focuses the last cell of the selected row. |
3131
| `Ctrl` + `Home`| Focuses the first cell of the DataGrid. |
3232
| `Ctrl` + `End`| Focuses the last cell of the DataGrid. |
33+
| `Ctrl` + `Left Arrow` | Focuses the cell at the beginning. |
34+
| `Ctrl` + `Right Arrow` | Focuses the next cell on the right. |
35+
| `Ctrl` + `Up Arrow` | Focuses the cell at the beginning. When using single selection mode, the selection also changes. |
36+
| `Ctrl` + `Down Arrow` | Focuses the last cell. When using single selection mode, the selection also changes. |
3337
| `Tab` | Focuses the next cell. When in edit mode, the next cell editor is focused. |
3438
| `Shift` + `Tab` | Focuses the previous cell. When in edit mode, the previous editor is focused. |
3539

‎controls/datapager/images/datapager-treedatagrid-paging.png

16.1 KB
Loading

‎controls/datapager/integration/treedatagrid.md

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
---
2+
title: Integration with TreeDataGrid
3+
page_title: .NET MAUI DataPager Documentation - Integration with TreeDataGrid
4+
description: Learn more about how to add paging functionality to the TreeDataGrid for .NET MAUI.
5+
position: 0
6+
slug: datapager-treedatagrid
7+
---
8+
9+
# .NET MAUI DataPager Integration with TreeDataGrid
10+
11+
You can page the data of the [Telerik UI for .NET MAUI TreeDataGrid]({%slug treedatagrid-overview%}) by using the DataPager control.
12+
13+
![.NET MAUI DataPager with TreeDataGrid](../images/datapager-treedatagrid-paging.png)
14+
15+
>Currently, the DataPager does not support the Telerik UI for .NET MAUI TreeDataGrid [`LoadOnDemandCollection`]({%slug treedatagrid-loadondemand%}#loadOnDemand-collection).
16+
17+
## Example
18+
19+
Here is an example of how to use the DataPager with the TreeDataGrid control.
20+
21+
**1.** Define the DataPager and the TreeDataGrid in XAML:
22+
23+
<snippet id='treedatagrid-datapager' />
24+
25+
**2.** Add the following namespace:
26+
27+
```XAML
28+
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
29+
```
30+
31+
**3.** Create a sample `Data` class:
32+
33+
<snippet id='treedatagrid-data-model' />
34+
35+
**4.** Add the `ViewModel` class:
36+
37+
<snippet id='treedatagrid-viewmodel' />
38+
39+
> For the DataPager Integration with TreeDataGrid example, go to the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and navigate to the **DataPager > Integration** category.
40+
41+
## See Also
42+
43+
- [Paged Source]({%slug datapager-data-binding%})
44+
- [Display Modes]({%slug datapager-display-mode%})
45+
- [Ellipsis Modes]({%slug datapager-ellipsis-mode%})
46+
- [Page Configuration]({%slug datapager-page-configuration%})
47+
- [Localization]({%slug datapager-localization%})
48+
- [Commands in DataPager]({%slug datapager-commands%})
49+
- [Styling]({%slug datapager-styling%})

‎controls/treedatagrid/cells/current-cell.md

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
---
2+
title: Current Cell
3+
page_title: .NET MAUI TreeDataGrid Documentation - Current Cell
4+
description: Learn how to set the behavior and style the appearance of the current cell of the Telerik UI for .NET MAUI TreeDataGrid component.
5+
position: 1
6+
slug: treedatagrid-current-cell
7+
---
8+
9+
# .NET MAUI TreeDataGrid Current Cell
10+
11+
The [Telerik UI for .NET MAUI TreeDataGrid]({%slug treedatagrid-overview%}) provides options for configuring the behavior and style of its current cell.
12+
13+
## Setting the Behavior
14+
15+
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.
16+
17+
By subscribing to the `CurrentCellChanged` event, you can listen for the changes in the current cell resulting from user interaction with the keyboard.
18+
19+
The `CurrentCellChanged` event handler receives the following parameters:
20+
21+
* The sender argument, which is of type `object`, but can be cast to the `RadDataGrid` type.
22+
* A `CurrentCellChangedEventArgs` object, which provides the following properties:
23+
- `OldCurrentCell`&mdash;Gets the previous `CurrentCell`.
24+
- `NewCurrentCell`&mdash;Gets the new `CurrentCell`.
25+
26+
## Styling the Cell
27+
28+
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.
29+
30+
> 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.
31+
32+
## Additional Resources
33+
34+
- [.NET MAUI TreeDataGrid Product Page](https://www.telerik.com/maui-ui/treedatagrid)
35+
- [.NET MAUI TreeDataGrid Forum Page](https://www.telerik.com/forums/maui?tagId=1801)
36+
- [Telerik .NET MAUI Blogs](https://www.telerik.com/blogs/mobile-net-maui)
37+
- [Telerik .NET MAUI Roadmap](https://www.telerik.com/support/whats-new/maui-ui/roadmap)
38+
39+
## See Also
40+
41+
- [Setting the .NET MAUI TreeDataGrid Columns]({%slug treedatagrid-columns-overview%})
42+
- [Sorting .NET MAUI TreeDataGrid Records]({%slug treedatagrid-sorting%})
43+
- [Filtering .NET MAUI TreeDataGrid Records]({%slug treedatagrid-filtering-overview%})

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

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
---
2+
title: Mouse Hover Cell
3+
page_title: .NET MAUI TreeDataGrid Documentation - Hover Cell
4+
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.
5+
position: 2
6+
slug: treedatagrid-mouse-hover-cell
7+
---
8+
9+
# .NET MAUI TreeDataGrid Hover Cell
10+
11+
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&mdash;`WinUI` and `MacCatalyst`.
12+
13+
## Getting the Hovered Cell
14+
15+
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.
16+
17+
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.
18+
19+
Here is an example how to get the hovered cell.
20+
21+
```C#
22+
var hoveredCell = treeDataGrid.VisualStateService.MouseHoverCell;
23+
```
24+
25+
## Styling the Cell
26+
27+
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.
28+
29+
> 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.
30+
31+
## See Also
32+
33+
- [Setting the .NET MAUI TreeDataGrid Columns]({%slug treedatagrid-columns-overview%})
34+
- [Sorting .NET MAUI TreeDataGrid Records]({%slug treedatagrid-sorting%})
35+
- [Filtering .NET MAUI TreeDataGrid Records]({%slug treedatagrid-filtering-overview%})

‎controls/treedatagrid/columns/cell-templates.md

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
---
2+
title: Columns Cell Templates
3+
page_title: .NET MAUI TreeDataGrid Documentation - Columns Cell Templates
4+
description: Learn how to define cell templates in TreeDataGrid for .NET MAUI columns.
5+
position: 2
6+
slug: treedatagrid-cell-templates
7+
---
8+
9+
# .NET MAUI TreeDataGrid Columns Cell Templates
10+
11+
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.
12+
13+
* `CellContentTemplate` (`DataTemplate`)&mdash;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.
14+
* `CellContentTemplateSelector` (`DataTemplateSelector`)&mdash;Defines a `DataTemplateSelector` instance that may be used to retrieve dynamic data templates on a per-cell basis.
15+
* `CellEditTemplate` (`DataTemplate`)&mdash;Defines the editor associated with the concrete column. The `CellEditTemplate` is displayed when the cell is in edit mode.
16+
17+
> 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.
18+
19+
## See Also
20+
21+
- [Column Footers]({%slug treedatagrid-column-footer%})
22+
- [Column Resizing]({%slug treedatagrid-column-resizing%})
23+
- [Columns Width]({%slug treedatagrid-columns-width%})
24+
- [Frozen Columns]({%slug treedatagrid-frozen-columns%})
25+
- [Columns Reordering]({%slug treedatagrid-columns-reordering%})

‎controls/treedatagrid/columns/footer.md

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
---
2+
title: Column Footers
3+
page_title: .NET MAUI TreeDataGrid Documentation - Columns Footer
4+
description: Learn how to visualize a column footer in the Telerik TreeDataGrid for .NET MAUI control.
5+
position: 3
6+
slug: treedatagrid-column-footer
7+
---
8+
9+
10+
# .NET MAUI TreeDataGrid Column Footers
11+
12+
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.
13+
14+
By default, column footers are hidden. To make them visible, set the `ShowColumnFooters` property to `True`.
15+
16+
The following example shows how to define a footer in the TreeDataGrid:
17+
18+
```XAML
19+
<telerik:RadTreeDataGrid x:Name="dataGrid"
20+
ShowColumnFooters="True"/>
21+
```
22+
23+
## Setting Text in the Footer
24+
25+
To define a text inside the footer, use the `FooterText` property. The property is per column:
26+
27+
```XAML
28+
<telerik:RadTreeDataGrid x:Name="dataGrid"
29+
ShowColumnFooters="True"
30+
AutoGenerateColumns="False">
31+
<telerik:RadDataGrid.Columns>
32+
<telerik:DataGridTextColumn PropertyName="Capital"
33+
FooterText="Capital Footer"/>
34+
<telerik:DataGridTextColumn PropertyName="Country"
35+
FooterText="Country Footer"/>
36+
</telerik:RadDataGrid.Columns>
37+
</telerik:RadTreeDataGrid>
38+
```
39+
40+
> Define the footer per column; otherwise, the cell will appear empty.
41+
42+
## Styling
43+
44+
Use the `FooterStyle` property to style the footer of the columns in the TreeDataGrid.
45+
46+
## Footer Content Customization
47+
48+
You can customize the content of the footer by using the `FooterContentTemplate`(`DataTemplate`) property.
49+
50+
## See Also
51+
52+
- [Columns Cells Templates]({%slug treedatagrid-cell-templates%})
53+
- [Column Resizing]({%slug treedatagrid-column-resizing%})
54+
- [Columns Width]({%slug treedatagrid-columns-width%})
55+
- [Frozen Columns]({%slug treedatagrid-frozen-columns%})
56+
- [Columns Reordering]({%slug treedatagrid-columns-reordering%})

‎controls/treedatagrid/columns/frozen-columns.md

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
---
2+
title: Frozen Columns
3+
page_title: .NET MAUI TreeDataGrid Documentation - Frozen Columns
4+
description: Learn how to freeze columns in Telerik TreeDataGrid for .NET MAUI.
5+
position: 4
6+
slug: treedatagrid-frozen-columns
7+
---
8+
9+
# .NET MAUI TreeDataGrid Frozen Columns
10+
11+
This article describes the frozen columns feature that the [.NET MAUI TreeDataGrid]({%slug treedatagrid-overview%}) provides.
12+
13+
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.
14+
15+
The next example shows how to set the frozen columns in XAML:
16+
17+
```XAML
18+
<telerik:RadTreeDataGrid x:Name="grid"
19+
ItemsSource="{Binding Clubs}"
20+
AutoGenerateColumns="False">
21+
<telerik:RadDataGrid.Columns>
22+
<telerik:DataGridTextColumn PropertyName="Name"
23+
IsFrozen="True"
24+
HeaderText="Name"/>
25+
</telerik:RadDataGrid.Columns>
26+
</telerik:RadTreeDataGrid>
27+
```
28+
29+
## Collection of Frozen Columns
30+
31+
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.
32+
33+
## Styling
34+
35+
When there is a frozen column, a splitter UI is visualized. The splitter UI splits the frozen columns from the unfrozen.
36+
37+
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.
38+
39+
The next example shows how to style the splitter UI by using the `Width`, `BackgroundColor`, `BorderColor` and `BorderThickness` properties of the FrozenColumnsSplitterStyle class.
40+
41+
```XAML
42+
<telerik:RadDataGrid.FrozenColumnsSplitterStyle>
43+
<telerik:DataGridFrozenColumnsSplitterStyle Width="8"
44+
BorderColor="Gray"
45+
BorderThickness="2"
46+
BackgroundColor="LightBlue"/>
47+
</telerik:RadDataGrid.FrozenColumnsSplitterStyle>
48+
```
49+
50+
## See Also
51+
52+
- [Columns Cells Templates]({%slug treedatagrid-cell-templates%})
53+
- [Column Resizing]({%slug treedatagrid-column-resizing%})
54+
- [Columns Width]({%slug treedatagrid-columns-width%})
55+
- [Frozen Columns]({%slug treedatagrid-frozen-columns%})
56+
- [Columns Reordering]({%slug treedatagrid-columns-reordering%})

0 commit comments

Comments
 (0)