Skip to content

Commit 9225257

Browse files
didiyordanovadidiyordanova
committed
Add part of the features that have tables
1 parent 4c87549 commit 9225257

File tree

7 files changed

+273
-0
lines changed

7 files changed

+273
-0
lines changed

‎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/treedatagrid/cells/current-cell.md‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
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 as a result of 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`—Gets the previous `CurrentCell`.
24+
- `NewCurrentCell`—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+
## Example
31+
32+
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.
33+
34+
## Additional Resources
35+
36+
- [.NET MAUI TreeDataGrid Product Page](https://www.telerik.com/maui-ui/treedatagrid)
37+
- [.NET MAUI TreeDataGrid Forum Page](https://www.telerik.com/forums/maui?tagId=1801)
38+
- [Telerik .NET MAUI Blogs](https://www.telerik.com/blogs/mobile-net-maui)
39+
- [Telerik .NET MAUI Roadmap](https://www.telerik.com/support/whats-new/maui-ui/roadmap)
40+
41+
## See Also
42+
43+
- [Setting the .NET MAUI TreeDataGrid Columns]({%slug treedatagrid-columns-overview%})
44+
- [Using the TreeDataGrid Commands]({%slug treedatagrid-aggregates%})
45+
- [Sorting .NET MAUI TreeDataGrid Records]({%slug treedatagrid-sorting%})
46+
- [Filtering .NET MAUI TreeDataGrid Records]({%slug treedatagrid-filtering-overview%})

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

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
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 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`.
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+
## Example
30+
31+
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.
32+
33+
## See Also
34+
35+
- [Setting the .NET MAUI TreeDataGrid Columns]({%slug treedatagrid-columns-overview%})
36+
- [Using the TreeDataGrid Commands]({%slug treedatagrid-aggregates%})
37+
- [Sorting .NET MAUI TreeDataGrid Records]({%slug treedatagrid-sorting%})
38+
- [Filtering .NET MAUI TreeDataGrid Records]({%slug treedatagrid-filtering-overview%})

‎controls/treedatagrid/commands/editing.md‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
---
2+
title: Editing Commands
3+
page_title: .NET MAUI TreeDataGrid Documentation - Editing Commands
4+
description: Lear how to use the editing commands in TreeDataGrid for .NET MAUI.
5+
position: 2
6+
slug: treedatagrid-commands-editing
7+
---
8+
9+
# .NET MAUI TreeDataGrid Editing Commands
10+
11+
The [.NET MAUI TreeDataGrid]({%slug treedatagrid-overview%}) control provides the following commands for editing the data inside the column:
12+
13+
* `BeginEdit`—Provides an entry point just before the editing begins.
14+
* `CancelEdit`—Provides an entry point just before the editing is canceled.
15+
* `CommitEdit`—Provides an entry point just before the editing is committed.
16+
17+
The execution parameter of the `Editing Commands` is of type `EditContext` that exposes the following properties:
18+
19+
* `CellInfo`—Gets the cell information associated with the operation.
20+
* `TriggerAction`—Gets the `SourceTriggerAction` value that triggered the operation.
21+
* `Parameter`—Gets an optional parameter holding additional information associated with the operation.
22+
23+
## BeginEdit and CommitEdit Commands Example
24+
25+
As the TreeDataGrid inherits from the DataGrid, for a runnable example with the Editing commands, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to **DataGrid > Commands** category.
26+
27+
## See Also
28+
29+
- [DataGrid Styling]({%slug treedatagrid-styling%})
30+
- [Columns Styling]({%slug treedatagrid-columns-styling%})

‎controls/treedatagrid/commands/overview.md‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
---
2+
title: Overview
3+
page_title: .NET MAUI TreeDataGrid Documentation - Overview
4+
description: Review the commands the TreeDataGrid inherits from the DataGrid for .NET MAUI control.
5+
position: 0
6+
slug: treedatagrid-commands-overview
7+
---
8+
9+
# .NET MAUI TreeDataGrid Commands
10+
11+
The command design-pattern is very important and widely used in the XAML and MVVM world. The [Telerik UI for .NET MAUI DataGrid]({%slug datagrid-overview%}) strictly follows these best practices and provides an intuitive and an easy-to-use set of APIs that allow different aspects of the DataGrid behavior to be handled and/or completely overridden.
12+
13+
The DataGrid exposes a `Commands` collection that allows you to register custom commands with each control instance through the `RadDataGrid.Commands` property:
14+
15+
* `Commands`—Gets the collection with all the custom commands registered with the `CommandService`. Custom commands have higher priority than the built-in (default) ones.
16+
17+
## Command Types
18+
19+
* `DataGridCommand`—All the default commands within `RadDataGrid` derive from the base `DataGridCommand`. Think of this command as a UI-related command as it operates over the `RadDataGrid` instance that owns the command.
20+
21+
* `Id`—The key that relates a command instance to a particular action/routine. This value is used to associate a command with a known event within a `RadDataGrid` instance.
22+
* `Command`—Gets or sets the generic `ICommand` implementation that may come from the `ViewModel`.
23+
* `EnableDefaultCommand`—Gets or sets a value indicating whether the default (built-in) UI command associated with the specified `Id` will be executed. The default value is `True`.
24+
25+
## DataGridCommandId Enumeration
26+
27+
All the predefined commands within a `RadDataGrid` instance are identified by a member of the `DataGridCommandId` enumeration. This is actually the key that relates a command instance to a particular action/routine within the owning grid. To register a custom command within a `RadDataGrid` instance, you can inherit the `DataGridCommand` class and override its `CanExecute` and `Execute` methods. You need to set the `Id` property of the new command so that it can be properly associated with the desired action/event. Following are the members of the `DataGridCommandId` enumerations.
28+
29+
The table below shows all commands in the DataGrid control and for each of the available commands there is an object which is passed as a `parameter` in its `Execute` method.
30+
31+
| Commands | Object type |
32+
| -------- | ---------- |
33+
| Unknown | `DataGridColumn` |
34+
| `ColumnHeaderTap` | `DataGridTextColumn` |
35+
| `GroupHeaderTap` | `GroupHeaderContext` |
36+
| `GroupHeaderButtonTap` | `GroupHeaderContext` |
37+
| `CellTap` | `DataGridCellInfo` |
38+
| `CellDoubleTap` | `DataGridCellInfo` |
39+
| `GenerateColumn` | `GenerateColumnContext` |
40+
| `DataBindingComplete` | `DataBindingCompleteEventArgs` |
41+
| `BeginEdit` | `EditContext` |
42+
| `CancelEdit` | `EditContext` |
43+
| `CommitEdit` | `EditContext` |
44+
| `ValidateCell` | `ValidateCellContext` |
45+
| `LoadMoreData` | `LoadOnDemandContext` |
46+
| `FilterTap` | `FilterTapContext` |
47+
| `ApplyFilter` | `FilterTapContext` |
48+
| `CloseFilter` | `FilterTapContext` |
49+
| `ResetFilter` | `FilterTapContext` |
50+
| `KeyDown` | `KeyboardInfo` |
51+
| `ToggleRowDetailsButtonTap` | the `type` is the data model |
52+
53+
>tip For an outline of all TreeDataGrid features review the [.NET MAUI DataGrid Overview]({%slug treedatagrid-overview%}) article.
54+
55+
## See Also
56+
57+
- [Editing Command]({%slug datagrid-commands-editing%})

‎controls/treedatagrid/keyboard-navigation/maccatalyst.md‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
---
2+
title: MacCatalyst
3+
page_title: .NET MAUI TreeDataGrid Documentation - Keyboard Support on MacCatalyst
4+
description: Learn more about the available keyboard combinations as part of the supported Telerik UI for .NET MAUI TreeDataGrid accessibility standards.
5+
position: 2
6+
slug: treedatagrid-keyboard-support-mac
7+
---
8+
9+
# .NET MAUI TreeDataGrid Keyboard Support on MacCatalyst
10+
11+
The [Telerik UI for .NET MAUI TreeDataGrid]({%slug datagrid-overview%}) provides keyboard navigation support on `MacCatalyst`.
12+
13+
While applying part of the keyboard keys, you can also change the current cell behavior of the DataGrid component. For more details, see the article on [setting the .NET MAUI DataGrid cells]({%slug datagrid-current-cell%}).
14+
15+
The following table lists the actions and keyboard combinations that are available in the DataGrid:
16+
17+
| Hotkey Combinations | Action |
18+
|----------------------|-------------------|
19+
| `Left Arrow` | Focuses the next cell on the left. When using single selection mode, the selection also changes. |
20+
| `Right Arrow` | Focuses the next cell on the right. When using single selection mode, the selection also changes. |
21+
| `Up Arrow` | Focuses the next cell above. When using single selection mode, the selection also changes. |
22+
| `Down Arrow` | Focuses the next cell below. When using single selection mode, the selection also changes. |
23+
| `Fn` + `F2` | Puts the current cell in edit mode. |
24+
| `Enter` | Selects the next or previous row. When the cell is in edit mode, the changes are committed and the next row is selected. |
25+
| `Esc` | Cancels the editing of the current cell. |
26+
| `Tab` | Focuses the next cell. When cell is in edit mode, the next cell editor is focused. |
27+
| `Shift` + `Tab` | Focuses the previous cell. When in edit mode, the previous editor is focused. |
28+
| `Command` + `Left Arrow` | Collapses the TreeDataGrid item if item has children. If the item is collapsed, focuses the first cell of the current row. |
29+
| `Command` + `Right Arrow` | Expands the TreeDataGrid item if item has children. If the item is expanded, focuses the last cell of the current row. |
30+
| `Command` + `Up Arrow` | Focuses the first cell of the column where the current cell is presented. |
31+
| `Command` + `Down Arrow` | Focuses the last cell of the column where the current cell is presented. |
32+
| `Fn` + `Left Arrow` | Focuses the first cell of the current row. |
33+
| `Fn` + `Right Arrow` | Focuses the last cell of the current row. |
34+
| `Fn` + `Up Arrow` | Focuses the first cell of the column where the current cell is presented. |
35+
| `Fn` + `Down Arrow` | Focuses the last cell of the column where the current cell is presented. |
36+
37+
## Additional Resources
38+
39+
- [.NET MAUI TreeDataGrid Product Page](https://www.telerik.com/maui-ui/treedatagrid)
40+
- [.NET MAUI TreeDataGrid Forum Page](https://www.telerik.com/forums/maui?tagId=1801)
41+
- [Telerik .NET MAUI Blogs](https://www.telerik.com/blogs/mobile-net-maui)
42+
- [Telerik .NET MAUI Roadmap](https://www.telerik.com/support/whats-new/maui-ui/roadmap)
43+
44+
## See Also
45+
46+
- [Sorting Telerik UI for .NET MAUI TreeDataGrid Records]({%slug treedatagrid-sorting%})
47+
- [Filtering .NET MAUI TreeDataGrid Records]({%slug treedatagrid-filtering-overview%})
48+
- [Styling the Appearance of the TreeDataGrid]({%slug treedatagrid-styling%})

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

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
---
2+
title: WinUI
3+
page_title: .NET MAUI TreeDataGrid Documentation - Keyboard Support for WinUI
4+
description: Learn more about the available keyboard combinations as part of the supported Telerik UI for .NET MAUI TreeDataGrid accessibility standards.
5+
position: 1
6+
slug: treedatagrid-keyboard-support
7+
---
8+
9+
# .NET MAUI TreeDataGrid Keyboard Support on WinUI
10+
11+
The [Telerik UI for .NET MAUI TreeDataGrid]({%slug treedatagrid-overview%}) provides keyboard navigation support on `WinUI`.
12+
13+
While applying part of the keyboard keys, you can also change the current cell behavior of the TreeDataGrid component. For more details, see the article on [setting the .NET MAUI TreeDataGrid cells]({%slug treedatagrid-current-cell%}).
14+
15+
The following table lists the actions and keyboard combinations that are available in the TreeDataGrid:
16+
17+
| Hotkey Combinations | Action |
18+
|----------------------|-------------------|
19+
| `Left Arrow` | Focuses the next cell on the left. When using single selection mode, the selection also changes. |
20+
| `Right Arrow` | Focuses the next cell on the right. When using single selection mode, the selection also changes. |
21+
| `Up Arrow` | Focuses the next cell above. When using single selection mode, the selection also changes. |
22+
| `Down Arrow` | Focuses the next cell below. When using single selection mode, the selection also changes. |
23+
| `F2` | Puts the current cell in edit mode. |
24+
| `Enter` | Selects the next or previous row. When the cell is in edit mode, the changes are committed and the next row is selected. |
25+
| `Esc` | Cancels the editing of the current cell. |
26+
| `PageUp` | Focuses the first cell of the viewport. |
27+
| `PageDown` | Focuses the last cell of the viewport. |
28+
| `Home` | Focuses the first cell of the selected row. |
29+
| `End` | Focuses the last cell of the selected row. |
30+
| `Ctrl` + `Home`| Focuses the first cell of the DataGrid. |
31+
| `Ctrl` + `End`| Focuses the last cell of the DataGrid. |
32+
| `Ctrl` + `Left Arrow` | Collapses the TreeDataGrid item. If pressign the key combination again, focuses the cell at the beginning. |
33+
| `Ctrl` + `Right Arrow` | Expands the TreeDataGrid item. If the item is expanded, focuses the next cell on the right. |
34+
| `Ctrl` + `Up Arrow` | Focuses the cell at the beginning. When using single selection mode, the selection also changes. |
35+
| `Ctrl` + `Down Arrow` | Focuses the last cell. When using single selection mode, the selection also changes. |
36+
| `Tab` | Focuses the next cell. When in edit mode, the next cell editor is focused. |
37+
| `Shift` + `Tab` | Focuses the previous cell. When in edit mode, the previous editor is focused. |
38+
39+
## Additional Resources
40+
41+
- [.NET MAUI TreeDataGrid Product Page](https://www.telerik.com/maui-ui/treedatagrid)
42+
- [.NET MAUI TreeDataGrid Forum Page](https://www.telerik.com/forums/maui?tagId=1801)
43+
- [Telerik .NET MAUI Blogs](https://www.telerik.com/blogs/mobile-net-maui)
44+
- [Telerik .NET MAUI Roadmap](https://www.telerik.com/support/whats-new/maui-ui/roadmap)
45+
46+
## See Also
47+
48+
- [Sorting Telerik UI for .NET MAUI TreeDataGrid Records]({%slug treedatagrid-sorting%})
49+
- [Filtering .NET MAUI TreeDataGrid Records]({%slug treedatagrid-filtering-overview%})
50+
- [Styling the Appearance of the TreeDataGrid]({%slug treedatagrid-styling%})

0 commit comments

Comments
 (0)