Skip to content

Commit 955ffc3

Browse files
didiyordanovadidiyordanova
committed
add databinding and rows folders
1 parent 4b5819b commit 955ffc3

File tree

4 files changed

+222
-0
lines changed

4 files changed

+222
-0
lines changed

‎controls/treedatagrid/populating-with-data/data-binding.md‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
---
2+
title: Binding to Collection
3+
page_title: .NET MAUI TreeDataGrid Documentation - Data Binding
4+
description: Learn how to bind the Telerik .NET MAUI TreeDataGrid to a collection of items and configure the data bindings for its columns.
5+
position: 1
6+
slug: treedatagrid-data-binding
7+
tags: binding, collection, data, dotnet maui, maui, datagrid, enumerable
8+
---
9+
10+
# .NET MAUI TreeDataGrid Data Binding: Binding to a Collection
11+
12+
This article lists the source types supported by the [Telerik UI for .NET MAUI TreeDataGrid]({%slug treedatagrid-overview%}). It guides you through the process of binding the DataGrid control to a collection of items and configuring the data binding for its columns.
13+
14+
## Supported Collection Sources
15+
16+
To populate the DataGrid with data, use the `ItemsSource` property of the control. For compatibility reasons, the `ItemsSource` property of the .NET MAUI DataGrid is declared as a `System.Object` type. However, using collections that implement the `IEnumerable` interface is recommended as it gives you more flexibility.
17+
18+
## Binding to an ObservableCollection
19+
20+
When you bind the `RadTreeDataGrid` to a collection that implements the `INotifyCollectionChanged` interface, the TreeDataGrid reflects and displays all changes to that collection, for example, any adding or removing of data items. The .NET MAUI framework implements the `INotifyCollectionChanged` interface in the `ObservableCollection<T>` class.
21+
22+
Implementations of the `System.ComponentModel.ICollection` interface are also fully supported. When using such collection sources, the `RadTreeDataGrid` automatically picks up any sort, or filter descriptions defined in the collection and uses them to display the data. This makes the `System.ComponentModel.ICollection` interface implementations the recommended collection source for the TreeDataGrid. To display the hierarchy of the items define the [`TreeDataGridItemDescriptor`]({%slug treedatagrid-descriptor%}).
23+
24+
The next example demonstrates how to bind the TreeDataGrid to an `ObservableCollection`.
25+
26+
For this example, the TreeDataGrid control is bound to a collection of `Data` objects.
27+
28+
**1.** Add a TreeDataGrid control to your page.
29+
30+
```XAML
31+
<telerik:RadTreeDataGrid ItemsSource="{Binding Items}" x:Name="tree"
32+
AutoGenerateColumns="False">
33+
<telerik:RadTreeDataGrid.ItemDescriptors>
34+
<telerik:TreeDataGridItemDescriptor ChildrenBinding="{Binding Children}" />
35+
</telerik:RadTreeDataGrid.ItemDescriptors>
36+
<telerik:RadTreeDataGrid.BindingContext>
37+
<local:ViewModel />
38+
</telerik:RadTreeDataGrid.BindingContext>
39+
</telerik:RadTreeDataGrid>
40+
```
41+
42+
**2.** Add the `telerik` namespace:
43+
44+
```XAML
45+
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
46+
```
47+
48+
**3.** Create a sample `Data` class:
49+
50+
<snippet id='treedatagrid-data-model' />
51+
52+
**4.** Add the `ViewModel` class:
53+
54+
<snippet id='treedatagrid-viewmodel' />
55+
56+
## Binding the Columns
57+
58+
By default, TreeDataGrid generates typed columns automatically based on the public properties of the underlying data objects. When, for example, you set the `ItemsSource` of the `RadTreeDataGrid` to a collection of data (see the sample above), the control will create a separate column for each public property of the `Data` object.
59+
60+
To disable the automatic generation of TreeDataGrid columns and manually define them, set the control's `AutoGenerateColumns` property to `False` and manually populate the `Columns` collection.
61+
62+
**1.** Add a TreeDataGrid control to your page.
63+
64+
<snippet id='treedatagrid-getting-started' />
65+
66+
**2.** Add the `telerik` namespace:
67+
68+
```XAML
69+
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
70+
```
71+
72+
**3.** Create a sample `Data` class:
73+
74+
<snippet id='treedatagrid-data-model' />
75+
76+
**4.** Add the `ViewModel` class:
77+
78+
<snippet id='treedatagrid-viewmodel' />
79+
80+
> To learn more about defining columns and the different types of columns, you can take a look at the [Columns Section]({%slug treedatagrid-columns-overview%}).
81+
82+
## Additional Resources
83+
84+
- [.NET MAUI TreeDataGrid Product Page](https://www.telerik.com/maui-ui/treedatagrid)
85+
- [.NET MAUI TreeDataGrid Forum Page](https://www.telerik.com/forums/maui?tagId=1801)
86+
- [Telerik .NET MAUI Blogs](https://www.telerik.com/blogs/mobile-net-maui)
87+
- [Telerik .NET MAUI Roadmap](https://www.telerik.com/support/whats-new/maui-ui/roadmap)
88+
89+
## See Also
90+
91+
- [Filtering UI in the Telerik UI for .NET MAUI TreeDataGrid]({%slug treedatagrid-filtering-ui%})
92+
- [Programmatic Filtering in the TreeDataGrid]({%slug treedatagrid-programmatic-filtering%})
93+
- [Styling the Appearance of the TreeDataGrid]({%slug treedatagrid-styling%})

‎controls/treedatagrid/populating-with-data/datatable-support.md‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
---
2+
title: Binding to DataTable
3+
page_title: .NET MAUI TreeDataGrid Documentation - DataTable Support
4+
description: Learn how to bind the Telerik UI for .NET MAUI TreeDataGrid to a DataTable and enable all available features such as filtering, sorting, grouping, CRUD operations, and commands.
5+
position: 3
6+
tags: binding, datatable, data, dotnet maui, maui, datagrid
7+
slug: treedatagrid-datatable-support
8+
---
9+
10+
# .NET MAUI TreeDataGrid Data Binding: Binding to DataTable
11+
12+
The [.NET MAUI TreeDataGrid]({%slug datagrid-overview%}) provides full and seamless support for all its features in the DataTable.
13+
14+
The component enables you to bind it to the DataTable and you can also add, remove, select, and edit DataGrid items, and update the TreeDataGrid `ItemsSource`. All available TreeDataGrid commands and operations, like filtering, sorting, and selection, are fully functioning when the DataGrid is bound to a DataTable.
15+
16+
## Binding
17+
18+
The following example shows a sample TreeDataGrid `ItemsSource` binding to a DataTable:
19+
20+
**1.** Define the TreeDataGrid.
21+
22+
<snippet id='datagrid-datatable-binding'/>
23+
24+
**2.** Add the namespace.
25+
26+
```XAML
27+
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
28+
```
29+
30+
**3.** Set the `ViewModel`.
31+
32+
<snippet id='datagrid-datatable-viewmodel'/>
33+
34+
> For a full data-binding implementation of a DataGrid to a DataTable, see the `DataGrid/DataTable` folder of the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}).
35+
36+
## Filtering and Sorting
37+
38+
When using a DataTable, you can filter and sort the data inside the TreeDataGrid through the UI or programmatically.
39+
40+
## CRUD Operations
41+
42+
All CRUD operations, such as adding, removing, and updating the data inside the TreeDataGrid, are supported when the DataGrid is bound to a DataTable.
43+
44+
## Commands
45+
46+
All commands supported by the DataGrid are fully applicable when the component is bound to a DataTable. For the full list, see the article with the [available commands in the TreeDataGrid]({%slug treedatagrid-commands-overview%}).
47+
48+
## Binding When Using a Cell Content Template
49+
50+
When you use a `CellContentTemplate` in the built-in columns and you need to bind a property from the business model to a UI element inside the template, you must use indexer syntax. Review the [Specifying the Binding for a `CellContentTemplate` in Telerik .NET MAUI DataGrid with DataTable]({%slug specifying-binding-cellcontenttemplate-datatable%}) article for more details on how to achieve this.
51+
52+
## Additional Resources
53+
54+
- [.NET MAUI TreeDataGrid Product Page](https://www.telerik.com/maui-ui/treedatagrid)
55+
- [.NET MAUI TreeDataGrid Forum Page](https://www.telerik.com/forums/maui?tagId=1801)
56+
- [Telerik .NET MAUI Blogs](https://www.telerik.com/blogs/mobile-net-maui)
57+
- [Telerik .NET MAUI Roadmap](https://www.telerik.com/support/whats-new/maui-ui/roadmap)
58+
59+
## See Also
60+
61+
- [Filtering UI in the Telerik UI for .NET MAUI TreeDataGrid]({%slug treedatagrid-filtering-ui%})
62+
- [Programmatic Filtering in the TreeDataGrid]({%slug treedatagrid-programmatic-filtering%})
63+
- [Styling the Appearance of the TreeDataGrid]({%slug treedatagrid-styling%})

‎controls/treedatagrid/rows/row-details.md‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
---
2+
title: Row Details
3+
page_title: .NET MAUI TreeDataGrid Documentation - Row Details
4+
description: Learn how to present additional information about DataGrid rows by using the row details functionality.
5+
position: 0
6+
slug: treedatagrid-row-details
7+
---
8+
9+
# .NET MAUI TreeDataGrid Row Details
10+
11+
The [Telerik UI for .NET MAUI TreeDataGrid]({%slug datagrid-overview%}) control is capable of presenting additional information through the Row Details functionality. The Row Details is a Data Template defined on the grid or row level and is used for displaying data without affecting the dimensions of the row and the cells within it.
12+
13+
To show the Row Details, you can use the following exposed options:
14+
15+
- The default `DataGridToggleRowDetailsColumn` column &mdash;Allows showing and hiding the row details for an item. For additional information, refer to the DataGrid [Toggle Row Details Column]({%slug treedatagrid-columns-toggle-column %})
16+
- Using an additional element inside the TreeDataGrid Column `CellContentTemplate` and on its click, tap event, to show or hide the row details.
17+
18+
The DataGrid exposes the following properties that control the row details functionality:
19+
20+
* `AreRowDetailsFrozen` (type `bool`)&mdash;The property indicates whether the row details keep their position during horizontal scroll.
21+
22+
* `ExpandedRowDetails` (type `IList`)&mdash;Defines the collection of items that have expanded row details.
23+
24+
* `CanUserExpandMultipleRowDetails` (type `bool`)&mdash;The property indicates whether multiple row details can be expanded.
25+
26+
## Row Details Template
27+
28+
The [.NET MAUI TreeDataGrid]({%slug treedatagrid-overview%}) control inherits the `RowDetailsTemplate` property (type `DataTemplate`). The property is used for displaying row details.
29+
30+
## See Also
31+
32+
- [.NET MAUI TreeDataGrid Product Page](https://www.telerik.com/maui-ui/treedatagrid)
33+
- [.NET MAUI TreeDataGrid Forum Page](https://www.telerik.com/forums/maui?tagId=1801)
34+
- [Telerik .NET MAUI Blogs](https://www.telerik.com/blogs/mobile-net-maui)
35+
- [Telerik .NET MAUI Roadmap](https://www.telerik.com/support/whats-new/maui-ui/roadmap)

‎controls/treedatagrid/rows/row-height.md‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
---
2+
title: Row Height
3+
page_title: .NET MAUI TreeDataGrid Documentation - Row Height
4+
description: Learn more how to set the row height and apply custom settings for positioning the text, setting the text margins, and defining the text alignment when working with the Telerik UI for .NET MAUI TreeDataGrid.
5+
position: 3
6+
slug: treedatagrid-row-height
7+
---
8+
9+
# .NET MAUI TreeDataGrid Row Height
10+
11+
The [Telerik UI for .NET MAUI TreeDataGrid]({%slug treedatagrid-overview%}) provides full control over the way the content is accommodated inside the DataGrid by enabling you to manually set the height of its rows.
12+
13+
By default, the row height is calculated according to the cell content.
14+
15+
For more information on customizing the row style, positioning the text inside the cells, setting the text margins, and defining the text alignment, see the topic about [customizing the content style of the .NET MAUI TreeDataGrid cell]({%slug treedatagrid-columns-styling%}#cellcontentstyle).
16+
17+
To set the row height, apply the `RowHeight` property of type `double` to the TreeDataGrid instance.
18+
19+
```XAML
20+
<telerik:RadTreeDataGrid x:Name="treeDataGrid"
21+
RowHeight="50"
22+
ItemsSource="{Binding Source}" />
23+
```
24+
25+
## See Also
26+
27+
- [Setting the Telerik UI for .NET MAUI TreeDataGrid Columns]({%slug treedatagrid-columns-overview%})
28+
- [Sorting .NET MAUI TreeDataGrid Records]({%slug treedatagrid-sorting%})
29+
- [Filtering .NET MAUI TreeDataGrid Records]({%slug treedatagrid-filtering-overview%})
30+
31+

0 commit comments

Comments
 (0)