Skip to content

Commit bc90991

Browse files
didiyordanovadidiyordanova
authored
Merge pull request #1148 from telerik/didi/treegrid-third-part
add filtering
2 parents db3c92b + d1c65aa commit bc90991

16 files changed

+891
-1
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/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`)—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`)—Defines a `DataTemplateSelector` instance that may be used to retrieve dynamic data templates on a per-cell basis.
15+
* `CellEditTemplate` (`DataTemplate`)—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%})

‎controls/treedatagrid/columns/header.md‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
---
2+
title: Column Headers
3+
page_title: .NET MAUI DataGrid Documentation - Columns Header
4+
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.
5+
position: 2
6+
slug: datagrid-column-header
7+
---
8+
9+
10+
# .NET MAUI TreeDataGrid Column Headers
11+
12+
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.
13+
14+
## Changing the Text in the Header
15+
16+
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.
17+
18+
```XAML
19+
<telerik:RadTreeDataGrid x:Name="dataGrid"
20+
AutoGenerateColumns="False">
21+
<telerik:RadDataGrid.Columns>
22+
<telerik:DataGridTextColumn PropertyName="Capital"
23+
HeaderText="Capital Header"/>
24+
<telerik:DataGridTextColumn PropertyName="Country"
25+
HeaderText="Country Header"/>
26+
</telerik:RadDataGrid.Columns>
27+
</telerik:RadTreeDataGrid>
28+
```
29+
30+
## Sorting
31+
32+
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.
33+
34+
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.
35+
36+
## Filtering
37+
38+
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.
39+
40+
To learn more about the filtering functionality, take a look at the [Filtering]({%slug treedatagrid-filtering-overview%}) article.
41+
42+
## Styling
43+
44+
Use the `HeaderStyle` property to style the `DataGridColumn` header.
45+
46+
## Header Content Customization
47+
48+
You can customize the content of the Header using the `HeaderContentTemplate`(`DataTemplate`) property.
49+
50+
To define the `DataTemplate` for the header:
51+
52+
<snippet id='datagrid-headercontenttemplate-datatemplate' />
53+
54+
## Color on Hover
55+
56+
You can change the hover state background color of the column header by setting the `BackgroundColor` property.
57+
58+
The following example demonstrates how to apply the `BackgroundColor` property to the DataGrid `HeaderContentTemplate` for its hover visual state:
59+
60+
```XAML
61+
<DataTemplate x:Key="CustomHeaderTemplate">
62+
<telerik:RadBorder BackgroundColor="#F8F8F8"
63+
BorderThickness="1">
64+
<VisualStateManager.VisualStateGroups>
65+
<VisualStateGroup x:Name="CommonStates">
66+
<VisualState x:Name="Normal" />
67+
<VisualState x:Name="Focused" />
68+
<VisualState x:Name="Disabled" />
69+
<VisualState x:Name="PointerOver">
70+
<VisualState.Setters>
71+
<Setter Property="BackgroundColor" Value="#33000000" />
72+
</VisualState.Setters>
73+
</VisualState>
74+
</VisualStateGroup>
75+
</VisualStateManager.VisualStateGroups>
76+
</telerik:RadBorder>
77+
</DataTemplate>
78+
```
79+
80+
## Customizing the Column
81+
82+
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.
83+
84+
## See Also
85+
86+
- [Columns Cells Templates]({%slug treedatagrid-cell-templates%})
87+
- [Column Footers]({%slug treedatagrid-column-footer%})
88+
- [Column Resizing]({%slug treedatagrid-column-resizing%})
89+
- [Columns Width]({%slug treedatagrid-columns-width%})
90+
- [Frozen Columns]({%slug treedatagrid-frozen-columns%})
91+
- [Columns Reordering]({%slug treedatagrid-columns-reordering%})

‎controls/treedatagrid/columns/nested-properties.md‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
---
2+
title: Nested Properties
3+
page_title: .NET MAUI TreeDataGrid Documentation - Nested Properties Support
4+
description: Check our &quot;Nested Properties&quot; documentation article for Telerik TreeDataGrid for .NET MAUI.
5+
position: 5
6+
slug: datagrid-nested-properties
7+
---
8+
9+
# .NET MAUI TreeDataGrid Nested Properties Support
10+
11+
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.
12+
13+
In addition, the `ListenForNestedPropertyChange` (`bool`) property gives the ability to listen for changes in the nested properties' values. The default value is `false`.
14+
15+
>tip `ListenForNestedPropertyChange` is `false` due to optimization purposes. You can enable it in case you'd need to update the nested properties' values.
16+
17+
## See Also
18+
19+
- [Column Headers]({%slug treedatagrid-column-header%})
20+
- [Columns Cells Templates]({%slug treedatagrid-cell-templates%})
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%})

0 commit comments

Comments
 (0)