Skip to content

Commit 4c87549

Browse files
didiyordanovadidiyordanova
committed
Add first part of TreeDataGrid docs
1 parent 8559413 commit 4c87549

17 files changed

+927
-0
lines changed

‎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 DataGrid]({%slug datagrid-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-features-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/descriptor.md‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
---
2+
title: Item Hierarchy
3+
page_title: .NET MAUI TreeDataGrid Documentation - Item Hierarchy
4+
description: Learn how to define the appearance of the items in the Telerik UI for .NET MAUI TreeDataGrid control.
5+
position: 2
6+
slug: treedatagrid-descriptor
7+
---
8+
9+
# .NET MAUI TreeDataGrid Item Hierarchy
10+
11+
The TreeDataGrid for MAUI exposes `ItemDescriptors` collection (`IList<TreeDataGridItemDescriptor>`). The collection defines the entities that describe an item.
12+
To specify the data items' hierarchy and how each item is visualized, use the `TreeDataGridItemDescriptor` class.
13+
14+
The `TreeDataGridItemDescriptor` class exposes the following properties:
15+
16+
| Property | Description |
17+
| -------- | ----------- |
18+
| `ChildrenBinding` (`BindingBase`) | Specifies the binding that provides the children of an item in the TreeDataGrid. |
19+
| `ShouldDisplayTreeArrowBinding` (`BindingBase`) | Specifies the binding that checks whether a tree arrow should be displayed for an item that has children. |
20+
21+
> You can define multiple descriptors in the TreeDataGrid.
22+
23+
Here is an example demonstrating how to define the data items' hierarchy by using the TreeDataGrid descriptor:
24+
25+
**1.** Set up the `RadTreeDataGrid` instance:
26+
27+
<snippet id='treedatagrid-getting-started' />
28+
29+
**2.** Add the `telerik` namespace:
30+
31+
```XAML
32+
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
33+
```
34+
35+
**3.** Create a sample `Data` class:
36+
37+
<snippet id='treedatagrid-data-model' />
38+
39+
**4.** Add the `ViewModel` class:
40+
41+
<snippet id='treedatagrid-viewmodel' />
42+
43+
**5.** Register the Telerik controls through the `Telerik.Maui.Controls.Compatibility.UseTelerik` extension method called inside the `CreateMauiApp` method of the `MauiProgram.cs` file of your project:
44+
45+
```C#
46+
using Telerik.Maui.Controls.Compatibility;
47+
48+
public static class MauiProgram
49+
{
50+
public static MauiApp CreateMauiApp()
51+
{
52+
var builder = MauiApp.CreateBuilder();
53+
builder
54+
.UseTelerik()
55+
.UseMauiApp<App>()
56+
.ConfigureFonts(fonts =>
57+
{
58+
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
59+
});
60+
61+
return builder.Build();
62+
}
63+
}
64+
```
65+
66+
> For a runnable example with the TreeDataGrid Descriptor scenario, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to **TreeDataGrid > Getting Started** category.
67+
68+
## See Also
69+
70+
- [.NET MAUI TreeDataGrid Product Page](https://www.telerik.com/maui-ui/treedatagrid)
71+
- [.NET MAUI TreeDataGrid Forum Page](https://www.telerik.com/forums/maui?tagId=2056)
72+
- [Telerik .NET MAUI Blogs](https://www.telerik.com/blogs/mobile-net-maui)
73+
- [Telerik .NET MAUI Roadmap](https://www.telerik.com/support/whats-new/maui-ui/roadmap)

‎controls/treedatagrid/editing.md‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
---
2+
title: Editing
3+
page_title: .NET MAUI TreeTreeDataGrid Documentation - Editing
4+
description: Learn how to use the built-in column and custom editors for modifying the data records in the Telerik UI for .NET MAUI TreeTreeDataGrid component.
5+
position: 9
6+
slug: treeTreeDataGrid-editing
7+
---
8+
9+
# .NET MAUI TreeTreeDataGrid Editing
10+
11+
The [Telerik UI for .NET MAUI TreeTreeDataGrid]({%slug TreeDataGrid-overview%}) provides built-in editing capabilities, which allow users to modify the data presented in the Grid.
12+
13+
Depending on the [TreeDataGrid column data type]({% slug TreeDataGrid-columns-boolean-column %}), the TreeDataGrid provides a relevant editor which allows users to edit the content upon double-clicking the desired cell.
14+
15+
## Editing Properties
16+
17+
To enable editing in the TreeDataGrid, define the `UserEditMode` property of the component. `UserEditMode` is of type `Telerik.Maui.Controls.DataGrid.DataGridUserEditMode` and accepts the following values:
18+
19+
* `None`&mdash;(default on Mobile) Editing is disabled.
20+
* `Cell`&mdash;(default on Desktop) Enables the editing option.
21+
22+
You can also independently disable editing for specific columns through the `CanUserEdit` property of the `TreeDataGridColumn` class. For more details, refer to the topic about [columns in the .NET MAUI TreeDataGrid]({%slug TreeDataGrid-columns-overview%}).
23+
24+
## Column Editors
25+
26+
Each TreeDataGrid column type provides different editor, so that the content can be edited in a convenient manner according to its value type.
27+
28+
The following table lists the integrated .NET MAUI control for editing the values inside the TreeDataGrid columns:
29+
30+
| Column Type | Editor |
31+
|-------------------|-------------------|
32+
| `TextColumn` | `RadEntry` |
33+
| `NumericalColumn` | `RadNumericInput` |
34+
| `BooleanColumn` | `RadCheckBox` |
35+
| `DateColumn` | `RadDatePicker` |
36+
| `TimeColumn` | `RadTimePicker` |
37+
| `PickerColumn` | `RadComboBox` |
38+
| `TemplateColumn` | A custom editor by defining `CellEditTemplate`. |
39+
40+
## Custom Editors
41+
42+
If the default editors do not suit the scenario you have, create a custom editor for each column by utilizing the `CellEditTemplate` property of the `TreeDataGridColumn`. For detailed information on how the `CellEditTemplate` can be applied, refer to the article about the [.NET MAUI TreeDataGrid column cell templates]({%slug TreeDataGrid-cell-templates%}).
43+
44+
## Editing Commands
45+
46+
The TreeDataGrid provides the following commands related to the editing functionality:
47+
48+
* `BeginEdit`&mdash;Provides an entry point just before the editing begins.
49+
* `CancelEdit`&mdash;Provides an entry point just before the editing is canceled.
50+
* `CommitEdit`&mdash;Provides an entry point just before the editing is committed.
51+
52+
For detailed information on how to use any of the listed commands, go to the topic about the [.NET MAUI TreeDataGrid editing commands]({%slug TreeDataGrid-commands-editing%}).
53+
54+
## Styling
55+
56+
You can change the visual appearance of each editor through the `CellEditorStyle` property of the `DataGridColumn`. To the `CellEditorStyle`, apply a `Microsoft.Maui.Controls.Style` with a `TargetType` set to the corresponding to each column editor control.
57+
58+
The following snippet shows a `CellEditorStyle` applied to the `TreeDataGridTextColumn`.
59+
60+
<snippet id='TreeDataGrid-columnstyle-celleditor'/>
61+
62+
## Additional Resources
63+
64+
- [.NET MAUI TreeDataGrid Product Page](https://www.telerik.com/maui-ui/TreeDataGrid)
65+
- [.NET MAUI TreeDataGrid Forum Page](https://www.telerik.com/forums/maui?tagId=1801)
66+
- [Telerik .NET MAUI Blogs](https://www.telerik.com/blogs/mobile-net-maui)
67+
- [Telerik .NET MAUI Roadmap](https://www.telerik.com/support/whats-new/maui-ui/roadmap)
68+
69+
## See Also
70+
71+
- [Editing Commands in the Telerik UI for .NET MAUI TreeDataGrid]({%slug treeDataGrid-commands-editing%})
72+
- [Column Cell Templates in the .NET MAUI TreeDataGrid]({%slug treeDataGrid-cell-templates%})
73+
- [Styling the Columns of the .NET MAUI TreeDataGrid]({%slug treeDataGrid-columns-styling%})
74+

‎controls/treedatagrid/empty-template.md‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
---
2+
title: Empty Template
3+
page_title: .NET MAUI TreeDataGrid Documentation - Empty Template
4+
description: Learn more about the Empty Template property of the TreeDataGrid control.
5+
position: 9
6+
slug: treedatagrid-empty-template
7+
---
8+
9+
# .NET MAUI TreeDataGrid Empty Template
10+
11+
The [.NET MAUI TreeDataGrid]({%slug treedatagrid-overview%}) control provides the ability to specify a template when the `ItemsSource` is null or collection is empty.
12+
13+
It exposes the following properties:
14+
15+
* `EmptyContentTemplate`(`DataTemplate`)&mdash;Defines the content of the view which is shown when in the view has no items.
16+
17+
* `EmptyContentDisplayMode`&mdash;Defines the modes for displaying empty content. The property have two modes:
18+
- `ItemsSourceNull`&mdash;Displays the empty content view only when the `ItemsSource` is null.
19+
- `ItemsSourceNullOrEmpty`&mdash;Displays the empty content view when `ItemsSource` is null or when the source is empty(has zero items).
20+
21+
> As the TreeDataGrid inhertis from the DataGrid, for a runnable example with empty template scenario, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to **DataGrid > Empty Template** category.
22+
23+
## See Also
24+
25+
- [Filtering]({%slug datagrid-filtering-overview%})
26+
- [Grouping]({%slug datagrid-grouping-overview%})
27+
- [Selection]({%slug datagrid-selection-overview%})

‎controls/treedatagrid/getting-started.md‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
---
2+
title: Getting Started
3+
page_title: .NET MAUI TreeDataGrid Documentation - Getting Started
4+
description: "Get started with the Telerik UI for .NET MAUI TreeDataGrid and add the control to your .NET MAUI project."
5+
position: 1
6+
slug: treedatagrid-getting-started
7+
---
8+
9+
# Getting Started with the .NET MAUI TreeDataGrid
10+
11+
This guide provides the information you need to start using the [Telerik UI for .NET MAUI TreeDataGrid]({% slug treedatagrid-overview %}) by adding the control to your project.
12+
13+
At the end, you will achieve the following result.
14+
15+
![.NET MAUI TreeDataGrid Getting Started](images/treedatagrid-getting-started.png)
16+
17+
## Prerequisites
18+
19+
Before adding the TreeDataGrid, you need to:
20+
21+
1. [Set up your .NET MAUI application]({%slug maui-getting-started %}#step-1-set-up-your-net-maui-application).
22+
23+
1. [Download Telerik UI for .NET MAUI]({% slug maui-getting-started %}#step-2-download-telerik-ui-for-net-maui).
24+
25+
1. [Install Telerik UI for .NET MAUI]({%slug maui-getting-started %}#step-3-install-telerik-ui-for-net-maui).
26+
27+
## Define the Control
28+
29+
The TreeDataGrid provides UI virtualization, so it requires its visual parent to provide vertical or horizontal space for the control to fit into. The following scenarios will measure the TreeDataGrid with infinite width and height constraints and the virtualization will not work:
30+
31+
* Positioning the TreeDataGrid inside a `StackLayout` which is wrapped in a `ScrollView`.
32+
* Positioning the TreeDataGrid inside a `ScrollView` or controls with internal scrolling.
33+
34+
By default, the TreeDataGrid auto-generates rows depending on the number of objects in the collection set as its `ItemsSource`.
35+
36+
**1.** When your .NET MAUI application is set up, you are ready to add a TreeDataGrid control to your page.
37+
38+
<snippet id='treedatagrid-getting-started' />
39+
40+
**2.** Add the `telerik` namespace:
41+
42+
```XAML
43+
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
44+
```
45+
46+
**3.** Create a sample `Data` class:
47+
48+
<snippet id='treedatagrid-data-model' />
49+
50+
**4.** Add the `ViewModel` class:
51+
52+
<snippet id='treedatagrid-viewmodel' />
53+
54+
**5.** Register the Telerik controls through the `Telerik.Maui.Controls.Compatibility.UseTelerik` extension method called inside the `CreateMauiApp` method of the `MauiProgram.cs` file of your project:
55+
56+
```C#
57+
using Telerik.Maui.Controls.Compatibility;
58+
59+
public static class MauiProgram
60+
{
61+
public static MauiApp CreateMauiApp()
62+
{
63+
var builder = MauiApp.CreateBuilder();
64+
builder
65+
.UseTelerik()
66+
.UseMauiApp<App>()
67+
.ConfigureFonts(fonts =>
68+
{
69+
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
70+
});
71+
72+
return builder.Build();
73+
}
74+
}
75+
```
76+
77+
> For a runnable example with the TreeDataGrid Getting Started scenario, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to **TreeDataGrid > Getting Started** category.
78+
79+
## Additional Resources
80+
81+
- [Setting the .NET MAUI TreeDataGrid Columns]({%slug datagrid-columns-overview%})
82+
- [Using the TreeDataGrid Commands]({%slug datagrid-aggregates%})
83+
- [Sorting .NET MAUI TreeDataGrid Records]({%slug datagrid-sorting%})
84+
- [Filtering .NET MAUI TreeDataGrid Records]({%slug datagrid-filtering-overview%})
85+
- [Styling the Appearance of the DataGrid]({%slug datagrid-styling%})
86+
87+
## See Also
88+
89+
- [.NET MAUI TreeDataGrid Product Page](https://www.telerik.com/maui-ui/treedatagrid)
90+
- [.NET MAUI TreeDataGrid Forum Page](https://www.telerik.com/forums/maui?tagId=1801)
91+
- [Telerik .NET MAUI Blogs](https://www.telerik.com/blogs/mobile-net-maui)
92+
- [Telerik .NET MAUI Roadmap](https://www.telerik.com/support/whats-new/maui-ui/roadmap)

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

16.1 KB
Loading

‎controls/treedatagrid/images/treedatagrid-getting-started.png‎

54.2 KB
Loading

‎controls/treedatagrid/load-on-demand.md‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
---
2+
title: Load On Demand
3+
page_title: .NET MAUI TreeDataGrid Documentation - Load on Demand
4+
description: Learn more about the available modes and approaches to load huge sets of data in the Telerik UI for .NET MAUI TreeDataGrid to improve the performance of the component and save computing resources.
5+
position: 13
6+
slug: treedatagrid-loadondemand
7+
---
8+
9+
# .NET MAUI DataGrid Load On Demand
10+
11+
The [Telerik UI for .NET MAUI TreeDataGrid]({%slug treedatagrid-overview%}) enables you to improve its performance and save computing resources, by loading data in the `RadTreeDataGrid` when the control is already displayed.
12+
13+
To load a large data set on mobile devices, you can use incremental data loading at the time when the user required the items to be visualized.
14+
15+
## Modes
16+
17+
The DataGrid provides the following data-loading modes, which are present in the `LoadOnDemandMode` enumeration:
18+
19+
* `Automatic`&mdash;The load-on-demand mechanism is activated when you scroll down near the last item present in the viewport.
20+
21+
>important To control when the items will start loading, set the `LoadOnDemandBufferItemsCount` property. It indicates at which point the additional items will start loading. For example, setting it to `20` will cause the new items to be loaded when you have scrolled the DataGrid, so that only 20 of the originally loaded items are left below.
22+
23+
* `Manual`&mdash;A **Load More** button is present at the bottom of the DataGrid. Clicking it will load additional items based on the approach you have chosen for loading the items (through the event, the command, or the collection).
24+
25+
>tip When the `LoadOnDemandMode` is `Automatic` and grouping applies to the control, the `LoadOnDemandMode` transforms to `Manual`.
26+
27+
## Approaches
28+
29+
The DataGrid supports the following options for using its load-on-demand feature, depending on your application requirements:
30+
31+
* [Using the `LoadOnDemand` collection](#loadondemand-collection)
32+
* [Using the `LoadOnDemand` event](#loadondemand-event)
33+
* [Using the `LoadMoreData` command](#loadmoredata-command)
34+
35+
### LoadOnDemand Collection
36+
37+
To use this approach, you have to feed the `RadDataGrid` with a collection of type `LoadOnDemandCollection`. `LoadOnDemandCollection` is a generic type, so you need to point the type of objects it will contain. The type extends the `ObservableCollection<T>` class and expects a `Func<CancellationToken, IEnumerable>` in the constructor.
38+
39+
### LoadOnDemand Event
40+
41+
You can load new items by utilizing the `LoadOnDemand` event. The event uses `LoadOnDemandEventArgs` arguments through which you need to indicate when the data is loaded by setting the `IsDataLoaded`(`bool`) property.
42+
43+
### LoadMoreData Command
44+
45+
The `LoadMoreData` command is another alternative which you can use and which is suitable for MVVM scenarios.
46+
47+
>important Invoking the `ShowLoadOnDemandLoadingIndicator` and `HideLoadOnDemandLoadingIndicators` is a notable part as without calling these methods, the `BusyIndicator` used for the functionality will not be visualized.
48+
49+
## Styling
50+
51+
Besides the different approaches for loading the data, the DataGrid exposes several mechanisms related to the styling of the functionality which you can use according to the approach you have chosen.
52+
53+
### Load-More-Button Row
54+
55+
The `LoadOnDemandRowStyle` property can be used to style the appearance of the row that contains the **Load More** button when the `LoadOnDemandMode` is `Manual`.
56+
57+
The custom style is of type `Style` with target type `DataGridLoadOnDemandRowAppearance`:
58+
59+
### Load-More-Button Row Template
60+
61+
The `LoadOnDemandRowTemplate` property can be used to set the template of the row that contains the **Load More** button when the `LoadOnDemandMode` is `Manual`.
62+
63+
## Examples
64+
65+
For runnable examples with the TreeDataGrid Load On Demand options, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to **DataGrid > Load On Demand** category. Replace the examples with `TreeDataGrid` and set a `ViewModel` and Data models with hierarchical data structrue.
66+
67+
## Additional Resources
68+
69+
- [.NET MAUI TreeDataGrid Product Page](https://www.telerik.com/maui-ui/treedatagrid)
70+
- [.NET MAUI TreeDataGrid Forum Page](https://www.telerik.com/forums/maui?tagId=1801)
71+
- [Telerik .NET MAUI Blogs](https://www.telerik.com/blogs/mobile-net-maui)
72+
- [Telerik .NET MAUI Roadmap](https://www.telerik.com/support/whats-new/maui-ui/roadmap)
73+
74+
## See Also
75+
76+
- [Sorting .NET MAUI TreeDataGrid Records]({%slug treedatagrid-sorting%})
77+
- [Filtering .NET MAUI TreeDataGrid Records]({%slug treedatagrid-filtering-overview%})

0 commit comments

Comments
 (0)