Skip to content

Commit 730e4b8

Browse files
didiyordanovadidiyordanova
committed
add columns features
1 parent a4b46b8 commit 730e4b8

File tree

10 files changed

+536
-0
lines changed

10 files changed

+536
-0
lines changed

‎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 TelerikDataGrid Documentation - Columns Cell Templates
4+
description: Learn how to define cell templates in TelerikDataGrid for .NET MAUI columns.
5+
position: 2
6+
slug: datagrid-cell-templates
7+
---
8+
9+
# .NET MAUI TelerikDataGrid Columns Cell Templates
10+
11+
This article describes how to extend the functionality of the columns in the [.NET MAUI TelerikDataGrid]({%slug datagrid-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, and, to make them visible, you have to set the `ShowColumnFooters` property to `True`.
15+
16+
The following example shows how to define a footer in the DataGrid:
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 you have to 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+
> Note that the footer has to be defined per column otherwise the cell will appear empty.
41+
42+
## Styling
43+
44+
Use the `FooterStyle` property to style the `DataGridColumn` footer.
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: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
---
2+
title: Frozen Columns
3+
page_title: .NET MAUI DataGrid Documentation - Frozen Columns
4+
description: Learn how to freeze columns in Telerik TreeDataGrid for .NET MAUI.
5+
position: 4
6+
slug: datagrid-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+
![.NET MAUI DataGrid Frozen Column](../images/frozen-column.gif)
16+
17+
Set the column freeze in XAML
18+
19+
```XAML
20+
<telerik:RadTreeDataGrid x:Name="grid"
21+
ItemsSource="{Binding Clubs}"
22+
AutoGenerateColumns="False">
23+
<telerik:RadDataGrid.Columns>
24+
<telerik:DataGridTextColumn PropertyName="Name"
25+
IsFrozen="True"
26+
HeaderText="Name"/>
27+
</telerik:RadDataGrid.Columns>
28+
</telerik:RadTreeDataGrid>
29+
```
30+
31+
Set the column freeze programmatically.
32+
33+
<snippet id='data-grid-frozen-columns-programmatically' />
34+
35+
## Collection of Frozen Columns
36+
37+
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.
38+
39+
## Styling
40+
41+
When there is/are frozen column(s) a splitter UI is visualized. The splitter UI splits the frozen columns from the unfrozen.
42+
43+
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.
44+
45+
Style the splitter UI's `Width`, `BackgroundColor`, `BorderColor` and `BorderThickness`.
46+
47+
**Example for `FrozenColumnsSplitterStyle`**
48+
49+
```XAML
50+
<telerik:RadDataGrid.FrozenColumnsSplitterStyle>
51+
<telerik:DataGridFrozenColumnsSplitterStyle Width="8"
52+
BorderColor="Gray"
53+
BorderThickness="2"
54+
BackgroundColor="LightBlue"/>
55+
</telerik:RadDataGrid.FrozenColumnsSplitterStyle>
56+
```
57+
58+
## See Also
59+
60+
- [Columns Cells Templates]({%slug treedatagrid-cell-templates%})
61+
- [Column Resizing]({%slug treedatagrid-column-resizing%})
62+
- [Columns Width]({%slug treedatagrid-columns-width%})
63+
- [Frozen Columns]({%slug treedatagrid-frozen-columns%})
64+
- [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 have to 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 when 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+
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+
## Customize 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%})

‎controls/treedatagrid/columns/overview.md‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
---
2+
title: Defining Columns
3+
page_title: .NET MAUI TreeDataGrid Documentation - Defining Columns
4+
description: Lear what are the configuration options you can apply to the columns in the TreeDataGrid for .NET MAUI.
5+
position: 0
6+
slug: treedatagrid-columns-overview
7+
---
8+
9+
# .NET MAUI TreeDataGrid Defining Columns
10+
11+
The [Telerik UI for .NET MAUI TreeDataGrid]({%slug treedatagrid-overview%}) inherits three approaches from the [DataGrid]({%slug datagrid-overview%}) that you can take to define different columns:
12+
13+
* **Automatically**&mdash;by setting `AutoGenerateColumns` property to `True` (default value).
14+
* **Manually**&mdash;by adding columns to the DataGrid's `Columns` collection and setting the `AutoGenerateColumns` property to `False`.
15+
* **Mixed**&mdash;by adding columns to the `Columns` collection and also setting the `AutoGenerateColumns`to `True` (default value).
16+
17+
## Automatic Columns Generation
18+
19+
By default, the TreeDataGrid generates typed columns automatically based on the underlying data type. When, for example, you set the `ItemsSource` of the `RadDataGrid` to a collection of clubs (see the sample code below), the control will create a separate column for each public property of the `Club` object.
20+
21+
For example, let's have a sample `Club` object:
22+
23+
```XAML
24+
public class Club
25+
{
26+
public string Name { get; set; }
27+
public DateTime Established { get; set; }
28+
public bool IsChampion { get; set; }
29+
public ObservableCollection<Club> Children { get; set; }
30+
}
31+
```
32+
33+
With the automatic columns generation TreeDataGrid will create the following columns:
34+
35+
* `DataGridTextColumn` for the `Name` property.
36+
* `DataGridDateColumn` for the `Established` property.
37+
* `DataGridBooleanColumn` for the `IsChampion` property.
38+
* `DataGridTypedColumn` for the `IsChampion` property.
39+
40+
## Manual Columns Definition
41+
42+
Using the built-in auto generation of columns does not fit all scenarios. In such cases you can manually define the needed columns. When defining a column you can choose between several column types:
43+
44+
* [Text Column]({%slug datagrid-columns-text-column%})&mdash;Represents a column that converts the content of each associated cell to a System.String object.
45+
* [Numerical Column]({%slug datagrid-columns-numerical-column%})&mdash;Represents an extended `DataGridTextColumn` that presents numerical data (`int` and `double` types).
46+
* [Boolean Column]({%slug datagrid-columns-boolean-column%})&mdash;An extended `DataGridTextColumn` implementation that presents Boolean data.
47+
* [Date Column]({%slug datagrid-columns-date-column%})&mdash;An extended `DataGridTextColumn` that presents data of type `DateTime`.
48+
* [Time Column]({%slug datagrid-columns-time-column%})&mdash;Represents an extended `DataGridTextColumn` that presents the `TimeOfDay` of a `DateTime` type.
49+
* [ComboBox Column]({%slug datagrid-columns-picker-column%})&mdash;Represents an extended `DataGridTextColumn` which cell value editor is a Telerik.Maui.Controls.RadComboBox control.
50+
* [Template Column]({%slug datagrid-columns-template-column%})&mdash;Represents a column that uses a `DataTemplate` to describe the content of each associated grid cell.
51+
* [ToggleRowDetails Column]({%slug datagrid-columns-toggle-column%})&mdash;Represents a column that allows the user to show and hide the row details for an item.
52+
53+
For the typed columns (Text, Numerical, Boolean, Date, Time and ComboBox) you can define which property of the underlying data object the column represents in the following ways:
54+
55+
* `PropertyName`&mdash;Specifies the name of the property of the data object being displayed in the column's cells.
56+
* `DataMemberBinding`&mdash;Defines the binding which points to the data member of the underlying object being displayed in the column's cell. With `DataMemberBinding`, you have control over the way data is formatted and displayed in the DataGrid cells, for example you can add a string formatter or a value converter.
57+
58+
> For a runnable example with the TreeDataGrid columns, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to the **TreeDataGrid > Getting Started** category.
59+
60+
## Columns Features
61+
62+
Find below a quick overview of the TreeDataGrid's Columns features.
63+
64+
### Column Headers
65+
66+
The top cell of a column is called Header. Its purpose is to set a caption for the column, which describes the data displayed in it. The .NET MAUI TreeDataGrid provides fully customizable column headers, check [Column Headers]({%slug treedatagrid-column-header%}) for detailed information.
67+
68+
### Columns Cell Templates
69+
70+
The TreeDataGrid provides a set of predefined column types such as Text Column, Numerical Column, etc. In case you need to extend the functionality of a column, for example customize the default appearance or add more UI elements, use the exposed templates - `CellContentTemplate` and `CellEditTemplate`. For detailed information, see the [Columns Cells Templates]({%slug treedatagrid-cell-templates%}) topic.
71+
72+
### Column Footers
73+
74+
The TreeDataGrid 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. Take a look at the [Column Footers]({%slug treedatagrid-column-footer%}) for detailed information.
75+
76+
### Column Resizing
77+
78+
Columns inside the Telerik .NET MAUI TreeDataGrid are resizable by default. The feature is available only on Desktop - WinUI and MacCatalyst. For more details see the [Column Resizing]({%slug datagrid-column-resizing%}) topic.
79+
80+
### Columns Width
81+
82+
The TreeDataGrid provides a flexible mechanism for setting columns' width through columns' `SizeMode` and `Width` properties. For more details see the [Columns Width]({%slug datagrid-columns-width%}) topic.
83+
84+
### Frozen Columns
85+
86+
You can pin a column on the left side of the TreeDataGrid by setting the `IsFrozen` property to the column. By default the value is `False`. When setting it to `True` to a concrete column, it makes the column frozen. For detailed information, see the [Frozen Columns]({%slug treedatagrid-frozen-columns%}) topic.
87+
88+
### Columns Reordering
89+
90+
The TreeDataGrid exposes a reordering feature allowing the user to drag and drop columns and change their order. For more details, see the [Columns Reordering]({%slug datagrid-columns-reordering%}) topic.
91+
92+
>tip For an outline of all TreeDataGrid features review the [.NET MAUI TreeDataGrid Overview]({%slug treedatagrid-overview%}) article.
93+
94+
## See Also
95+
96+
- [Column Headers]({%slug treedatagrid-column-header%})
97+
- [Columns Cells Templates]({%slug treedatagrid-cell-templates%})
98+
- [Column Footers]({%slug treedatagrid-column-footer%})
99+
- [Column Resizing]({%slug treedatagrid-column-resizing%})
100+
- [Columns Width]({%slug treedatagrid-columns-width%})
101+
- [Frozen Columns]({%slug treedatagrid-frozen-columns%})
102+
- [Columns Reordering]({%slug treedatagrid-columns-reordering%})

0 commit comments

Comments
 (0)