You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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
12
13
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
14
*`CellContentTemplateSelector` (`DataTemplateSelector`)—Defines a `DataTemplateSelector` instance that may be used to retrieve dynamic data templates on a per-cell basis.
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
13
14
-
By default, column footers are hidden, and, to make them visible, you have to set the `ShowColumnFooters` property to `True`.
14
+
By default, column footers are hidden. To make them visible, set the `ShowColumnFooters` property to `True`.
15
15
16
-
The following example shows how to define a footer in the DataGrid:
16
+
The following example shows how to define a footer in the TreeDataGrid:
17
17
18
18
```XAML
19
19
<telerik:RadTreeDataGridx:Name="dataGrid"
@@ -22,7 +22,7 @@ The following example shows how to define a footer in the DataGrid:
22
22
23
23
## Setting Text in the Footer
24
24
25
-
To define a text inside the footer you have to use the `FooterText` property. The property is per column:
25
+
To define a text inside the footer, use the `FooterText` property. The property is per column:
26
26
27
27
```XAML
28
28
<telerik:RadTreeDataGridx:Name="dataGrid"
@@ -37,11 +37,11 @@ To define a text inside the footer you have to use the `FooterText` property. Th
37
37
</telerik:RadTreeDataGrid>
38
38
```
39
39
40
-
> Note that the footer has to be defined per column otherwise the cell will appear empty.
40
+
> Define the footer per column; otherwise, the cell will appear empty.
41
41
42
42
## Styling
43
43
44
-
Use the `FooterStyle` property to style the `DataGridColumn`footer.
44
+
Use the `FooterStyle` property to style the footer of the columns in the TreeDataGrid.
description: Learn how to freeze columns in Telerik TreeDataGrid for .NET MAUI.
5
5
position: 4
6
-
slug: datagrid-frozen-columns
6
+
slug: treedatagrid-frozen-columns
7
7
---
8
8
9
9
# .NET MAUI TreeDataGrid Frozen Columns
@@ -12,9 +12,7 @@ This article describes the frozen columns feature that the [.NET MAUI TreeDataGr
12
12
13
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.
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
32
39
33
## Styling
40
34
41
-
When there is/are frozen column(s) a splitter UI is visualized. The splitter UI splits the frozen columns from the unfrozen.
35
+
When there is a frozen column, a splitter UI is visualized. The splitter UI splits the frozen columns from the unfrozen.
42
36
43
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.
44
38
45
-
Style the splitter UI's `Width`, `BackgroundColor`, `BorderColor` and `BorderThickness`.
46
-
47
-
**Example for `FrozenColumnsSplitterStyle`**
39
+
The next example shows how to style the splitter UI by using the `Width`, `BackgroundColor`, `BorderColor` and `BorderThickness` properties of the FrozenColumnsSplitterStyle class.
Copy file name to clipboardExpand all lines: controls/treedatagrid/columns/header.md
+6-6Lines changed: 6 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -13,7 +13,7 @@ This article will guide you through the usage of the column headers, their custo
13
13
14
14
## Changing the Text in the Header
15
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.
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
17
18
18
```XAML
19
19
<telerik:RadTreeDataGridx:Name="dataGrid"
@@ -29,15 +29,15 @@ To customize text inside the header you have to use the `HeaderText` property. T
29
29
30
30
## Sorting
31
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.
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
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.
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
35
36
36
## Filtering
37
37
38
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
39
40
-
To learn more about the filtering functionality take a look at the [Filtering]({%slug treedatagrid-filtering-overview%}) article.
40
+
To learn more about the filtering functionality, take a look at the [Filtering]({%slug treedatagrid-filtering-overview%}) article.
41
41
42
42
## Styling
43
43
@@ -47,7 +47,7 @@ Use the `HeaderStyle` property to style the `DataGridColumn` header.
47
47
48
48
You can customize the content of the Header using the `HeaderContentTemplate`(`DataTemplate`) property.
@@ -77,7 +77,7 @@ The following example demonstrates how to apply the `BackgroundColor` property t
77
77
</DataTemplate>
78
78
```
79
79
80
-
## Customize the Column
80
+
## Customizing the Column
81
81
82
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.
Copy file name to clipboardExpand all lines: controls/treedatagrid/columns/overview.md
+12-8Lines changed: 12 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,13 +6,17 @@ position: 0
6
6
slug: treedatagrid-columns-overview
7
7
---
8
8
9
-
# .NET MAUI TreeDataGrid Defining Columns
9
+
{% if site.has_cta_panels == true %}
10
+
{% include cta-panel-small.html %}
11
+
{% endif %}
10
12
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:
13
+
# .NET MAUI TreeDataGrid: Defining Columns
12
14
13
-
***Automatically**—by setting `AutoGenerateColumns` property to `True` (default value).
14
-
***Manually**—by adding columns to the DataGrid's `Columns` collection and setting the `AutoGenerateColumns` property to `False`.
15
-
***Mixed**—by adding columns to the `Columns` collection and also setting the `AutoGenerateColumns`to `True` (default value).
15
+
The [Telerik UI for .NET MAUI TreeDataGrid]({%slug treedatagrid-overview%}) supports three methods for defining columns, inherited from the [DataGrid]({%slug datagrid-overview%}):
16
+
17
+
* Automatically—by setting `AutoGenerateColumns` property to `True` (default value).
18
+
* Manually—by adding columns to the DataGrid's `Columns` collection and setting the `AutoGenerateColumns` property to `False`.
19
+
* Mixed—by adding columns to the `Columns` collection and also setting the `AutoGenerateColumns`to `True` (default value).
16
20
17
21
## Automatic Columns Generation
18
22
@@ -41,12 +45,12 @@ With the automatic columns generation TreeDataGrid will create the following col
41
45
42
46
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
47
44
-
*[Text Column]({%slug datagrid-columns-text-column%})—Represents a column that converts the content of each associated cell to a System.String object.
48
+
*[Text Column]({%slug datagrid-columns-text-column%})—Represents a column that converts the content of each associated cell to a `System.String` object.
45
49
*[Numerical Column]({%slug datagrid-columns-numerical-column%})—Represents an extended `DataGridTextColumn` that presents numerical data (`int` and `double` types).
46
50
*[Boolean Column]({%slug datagrid-columns-boolean-column%})—An extended `DataGridTextColumn` implementation that presents Boolean data.
47
51
*[Date Column]({%slug datagrid-columns-date-column%})—An extended `DataGridTextColumn` that presents data of type `DateTime`.
48
52
*[Time Column]({%slug datagrid-columns-time-column%})—Represents an extended `DataGridTextColumn` that presents the `TimeOfDay` of a `DateTime` type.
49
-
*[ComboBox Column]({%slug datagrid-columns-picker-column%})—Represents an extended `DataGridTextColumn` which cell value editor is a Telerik.Maui.Controls.RadComboBox control.
53
+
*[ComboBox Column]({%slug datagrid-columns-picker-column%})—Represents an extended `DataGridTextColumn`, whose cell value editor is a `Telerik.Maui.Controls.RadComboBox` control.
50
54
*[Template Column]({%slug datagrid-columns-template-column%})—Represents a column that uses a `DataTemplate` to describe the content of each associated grid cell.
51
55
*[ToggleRowDetails Column]({%slug datagrid-columns-toggle-column%})—Represents a column that allows the user to show and hide the row details for an item.
52
56
@@ -57,7 +61,7 @@ For the typed columns (Text, Numerical, Boolean, Date, Time and ComboBox) you ca
57
61
58
62
> 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
63
60
-
## Columns Features
64
+
## Column Features
61
65
62
66
Find below a quick overview of the TreeDataGrid's Columns features.
The [.NET MAUI TreeDataGrid]({%slug treedatagrid-overview%}) exposes a reordering feature allowing the user to drag and drop columns and change their order.
12
12
13
-
The following properties are relted to the reordering feature:
13
+
The following properties control the reordering feature:
14
14
15
15
*`CanUserReorderColumns`(`bool`)—Defines whether the user can reorder the `DataGridColumns`. The default value is `true`.
16
16
*`ColumnReorderIndicatorTemplate`(`DataTemplate`)—Defines the template that presents the indicator that is displayed between two columns during reordering.
Columns inside the [Telerik UI for .NET MAUI TreeDataGrid]({%slug treedatagrid-overview%}) are resizable by default. The feature is available only on Desktop - `WinUI` and `MacCatalyst`.
11
+
Columns inside the [Telerik UI for .NET MAUI TreeDataGrid]({%slug treedatagrid-overview%}) are resizable by default. The feature is available only on Desktop—WinUI and MacCatalyst.
12
12
13
-
On `WinUI` and `MacOS`, you can change the column width by positioning the mouse over the column's vertical grid line (in the column header) and dragging it until the desired size is achieved.
13
+
On WinUI and MacOS, you can change the column width by positioning the mouse over the column's vertical grid line (in the column header) and dragging it until the desired size is achieved.
14
14
15
-
To resize a column programmatically, you can use the columns`Width` property. For more details review the [Columns Width]({%slug treedatagrid-columns-width%}) article.
15
+
To resize a column programmatically, use the column's`Width` property. For more details, review the [Columns Width]({%slug treedatagrid-columns-width%}) article.
16
16
17
17
In addition, you can set a `MinimumWidth`(`double`) to the column. This property is applicable when setting `SizeMode` column property to `Fixed`. When `MinimumWidth` is set, you can not reduce the width of the column to a value lower than the `MinimumWidth`.
18
18
19
19
## Disabling Resizing
20
20
21
-
Two ways to disable the resizing.
21
+
You can disable resizing in two ways.
22
22
23
-
**1.** Disable the resizing on a TreeDataGrid level.
23
+
* Disable the resizing on a TreeDataGrid level—You can disable the resizing by setting the `CanUserResizeColumns` property to `False`. The default value is `True`.
24
24
25
-
You can disable the resizing by setting the `CanUserResizeColumns` property to `False`. The default value is `True`.
25
+
```XAML
26
+
<telerik:RadTreeDataGridx:Name="grid"
27
+
CanUserResizeColumns="False"/>
28
+
```
26
29
27
-
```XAML
28
-
<telerik:RadTreeDataGridx:Name="grid"
29
-
CanUserResizeColumns="False"/>
30
-
```
30
+
>note When disabling the resizing on a DataGrid level, none of the grid columns will be resizable.
31
31
32
-
>note When disabling the resizing on a DataGrid level, all the columns won't be resizable.
33
32
34
-
**2.** Disable the resizing on a column level.
33
+
* Disable the resizing on a column level—To disable the resizing on a specific column, set the `IsResizable` property. The default value is `True`.
35
34
36
-
To disable the resizing on a specific column, set the `IsResizable` property. The default value is `True`.
This article describes how to set a width to the [.NET MAUI TreeDataGrid]({%slug treedatagrid-overview%}) column using the `SizeMode` and `Width` properties.
12
12
13
13
*`SizeMode`(`DataGridColumnSizeMode`)—Defines the `DataGridColumnSizeMode` value that controls how the column and its associated cells are sized horizontally.
14
-
*`Fixed`—The column has a fixed width as defined by its Width property.
14
+
*`Fixed`—The column has a fixed width as defined by its `Width` property.
15
15
*`Stretch`—The column is stretched to the available width proportionally to its desired width.
16
16
*`Auto`—The columns is sized to its desired width. That is the maximum desired width of all associated cells.
17
-
*`Width`(`double`)—Specifies the fixed width for the column. Applicable when the `SizeMode` property is set to `DataGridColumnSizeMode`.Fixed.
17
+
*`Width`(`double`)—Specifies the fixed width for the column. Applicable when the `SizeMode` property is set to `DataGridColumnSizeMode.Fixed`.
18
18
*`MinimumWidth`(`double`)—Specifies the minimum width of a column. This property is applicable when setting `SizeMode` column property to `Fixed`. When `MinimumWidth` is set, you can not reduce the width of the column to a value lower than the `MinimumWidth`.
19
19
*`ActualWidth` (double): Gets the actual width of the column.
Copy file name to clipboardExpand all lines: controls/treedatagrid/filtering/filter-control-template.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -12,7 +12,7 @@ The [Telerik UI for .NET MAUI TreeDataGrid]({%slug datagrid-overview%}) inherits
12
12
13
13
To customize the built-in Filtering UI for a concrete column, use the `FilterControlTemplate` property of the typed columns (text, boolean, numeric, date, time, and picker columns).
14
14
15
-
In addition, as the [template column]({%slug treedatagrid-columns-template-column%}) does not provide a default Filtering UI, with the `FilterControlTemplate` property you can allow users to filter data in template columns as well.
15
+
As the [template column]({%slug treedatagrid-columns-template-column%}) does not provide a default Filtering UI, to allow users to filter data in template columns, use the `FilterControlTemplate` property.
16
16
17
17
*`FilterControlTemplate`(`DataTemplate`)—Specifies the user defined template used for Filtering UI. The template must contain an instance of the `Telerik.Maui.Controls.DataGrid.DataGridFilterControlBase` class.
0 commit comments