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 explains how the grid column width behaves depending on the settings applied by the developer.
13
+
This article explains how to set Grid column widths and how the component behaves, depending on its column width configuration.
14
14
15
-
You can set the grid column `Width` parameter in any CSS unit, such as `px`, `%`, `vw`, `em`, `rem`. You can read more on how to set sizes in Telerik components in the [Dimensions](slug:common-features/dimensions) article. You must, however, provide the unit so that the browser can understand it.
15
+
## Basics
16
16
17
-
With regard to the widths of its columns, the scrollable (default) Grid typically behaves as any regular HTML table with a `table-layout: fixed` and `width: 100%`.
17
+
The Grid renders separate HTML `<table>` elements for its header, data, and footer areas. This allows users to scroll the data area vertically, while the header and footer areas remain visible at all times. The Grid tables apply `table-layout: fixed` and `width: 100%` CSS styles to ensure column alignment between the three areas.
18
18
19
-
* When all column widths are explicitly set and the cumulative column width is greater than the available Grid width, a horizontal scrollbar appears and all set column widths are respected.
19
+
You can set the Grid column `Width` parameter in any CSS unit, such as `px`, `%`, `vw`, `em`, `rem`. Unit-less `Width` values are not supported. You can read more on how to set sizes in Telerik components in the [Dimensions](slug:common-features/dimensions) article.
20
20
21
-
* When all column widths are explicitly set and the cumulative column width is less than the available Grid width, the remaining width is distributed evenly between all columns.
21
+
## Column Width Behavior
22
22
23
-
* When only some column widths are set and the cumulative width of the columns with set widths is greater than the available Grid width, a horizontal scrollbar appears and all set column widths are respected. Columns with no set width are invisible as their width is `0`.
23
+
The Grid column width settings can vary and result in the following behaviors:
24
24
25
-
* When only some column widths are set and the cumulative width of columns with set widths is less than the available Grid width, the widths of the columns with a set width are respected and the remaining width is distributed evenly between the other columns.
<th colspan="2">The Sum of All Set Column Widths Is:</th>
33
+
</tr>
34
+
<tr>
35
+
<th> </th>
36
+
<th> </th>
37
+
<th>Greater Than the Grid Width</th>
38
+
<th>Less Than the Grid Width</th>
39
+
</tr>
40
+
<tr>
41
+
<th style="writing-mode: vertical-lr;" rowspan="3">How Many Columns Have Width:</th>
42
+
<th>All</th>
43
+
<td><ul><li>All columns respect their <code>Width</code> setting.</li><li>A horizontal scrollbar appears.</li></ul></td>
44
+
<td><ul><li>All columns expand beyond their <code>Width</code> setting to fill the available space in the Grid.</li><li>There is no horizontal scrollbar.</li></ul></td>
45
+
</tr>
46
+
<tr>
47
+
<th>Some</th>
48
+
<td><ul><li>All columns respect their <code>Width</code> setting, if exists.</li><li>All columns without a <code>Width</code> shrink and disappear.</li><li>A horizontal scrollbar appears.</li></ul></td>
49
+
<td><ul><li>All columns respect their <code>Width</code> setting, if exists.</li><li>All columns without a <code>Width</code> shrink or expand, depending on the remaining space in the Grid.</li><li>There is no horizontal scrollbar.</li></ul></td>
50
+
</tr>
51
+
<tr>
52
+
<th>None</th>
53
+
<td colspan="2"><ul style="margin: .5em auto; width: max-content;"><li>All columns have the same width, which depends on the Grid width.</li><li>There is no horizontal scrollbar.</li></ul></td>
54
+
</tr>
55
+
</table>
28
56
29
-
* To allow the users to auto-fit the column widths to the content, enable [column resizing](slug:components/grid/columns/resize) - a double click on the border between the headers will have the grid adjust the column width according to the size of the data, headers and footers content. It is also possible to [auto-fit columns programmatically](slug:components/grid/columns/resize#autofit-columns).
57
+
To allow the users to adjust or auto-fit the column widths to the content, enable [Grid column resizing](slug:components/grid/columns/resize). You can also [resize columns through the Grid state](slug:grid-state#setstateasync) or [auto-fit columns programmatically](slug:components/grid/columns/resize#autofit-columns).
58
+
59
+
> Single table rendering and automatic table layout are not supported.
60
+
61
+
## Recommendations
62
+
63
+
For predictable and user-friendly behavior, consider the following Grid configuration:
64
+
65
+
* If the Grid has a fixed width and you need horizontal scrolling, set widths to all columns. Use absolute units that do not depend on the browser viewport size.
66
+
* If the Grid does not need horizontal scrolling and is not likely to shrink too much, then leave at least one column without a width. This ensures that all set column widths are respected and the width-less columns take up the remaining space.
67
+
* If the Grid width is unpredictable and the width-less columns may shrink too much, then apply a `min-width` style to the Grid tables, according to the example below.
68
+
69
+
>caption Apply a minimum width to the Grid table in a responsive layout
Copy file name to clipboardExpand all lines: components/treelist/columns/width.md
+166-9Lines changed: 166 additions & 9 deletions
Original file line number
Diff line number
Diff line change
@@ -8,24 +8,181 @@ published: True
8
8
position: 4
9
9
---
10
10
11
-
# TreeList Column Width Behavior
11
+
# TreeList Column Width
12
12
13
-
This article explains how the treelist column width behaves depending on the settings applied by the developer.
13
+
This article explains how to set TreeList column widths and how the component behaves, depending on its column width configuration.
14
14
15
-
With regard to the widths of its columns, the scrollable (default) treelist typically behaves as any regular HTML table with a `table-layout: fixed`.
15
+
## Basics
16
16
17
-
* When all column widths are explicitly set and the cumulative column width is greater than the available treelist width, a horizontal scrollbar appears and all set column widths are respected.
17
+
The TreeList renders separate HTML `<table>` elements for its header and data areas. This allows users to scroll the data area vertically, while the header area remains visible at all times. The TreeList tables apply `table-layout: fixed` and `width: 100%` CSS styles to ensure column alignment between the three areas.
18
18
19
-
* When all column widths are explicitly set and the cumulative column width is less than the available treelist width, the remaining width is distributed evenly between all columns.
19
+
You can set the TreeList column `Width` parameter in any CSS unit, such as `px`, `%`, `vw`, `em`, `rem`. Unit-less `Width` values are not supported. You can read more on how to set sizes in Telerik components in the [Dimensions](slug:common-features/dimensions) article.
20
20
21
-
* When only some column widths are set and the cumulative width of the columns with set widths is greater than the available treelist width, a horizontal scrollbar appears and all set column widths are respected. Columns with no set width are invisible as their width is `0`.
21
+
## Column Width Behavior
22
22
23
-
* When only some column widths are set and the cumulative width of columns with set widths is less than the available treelist width, the widths of the columns with a set width are respected and the remaining width is distributed evenly between the other columns.
23
+
The TreeList column width settings can vary and result in the following behaviors:
24
24
25
-
* When no column widths are set, the available width is distributed evenly between all treelist columns.
* To allow the users to auto-fit the column widths to the content, enable [column resizing](slug:treelist-columns-resize) - a double click on the border between the headers will have the treelist adjust the column width according to the size of the data, and header content. It is also possible to [auto-fit columns programmatically](slug:treelist-columns-resize#autofit-columns).
<th colspan="2">The Sum of All Set Column Widths Is:</th>
33
+
</tr>
34
+
<tr>
35
+
<th> </th>
36
+
<th> </th>
37
+
<th>Greater Than the TreeList Width</th>
38
+
<th>Less Than the TreeList Width</th>
39
+
</tr>
40
+
<tr>
41
+
<th style="writing-mode: vertical-lr;" rowspan="3">How Many Columns Have Width:</th>
42
+
<th>All</th>
43
+
<td><ul><li>All columns respect their <code>Width</code> setting.</li><li>A horizontal scrollbar appears.</li></ul></td>
44
+
<td><ul><li>All columns expand beyond their <code>Width</code> setting to fill the available space in the TreeList.</li><li>There is no horizontal scrollbar.</li></ul></td>
45
+
</tr>
46
+
<tr>
47
+
<th>Some</th>
48
+
<td><ul><li>All columns respect their <code>Width</code> setting, if exists.</li><li>All columns without a <code>Width</code> shrink and disappear.</li><li>A horizontal scrollbar appears.</li></ul></td>
49
+
<td><ul><li>All columns respect their <code>Width</code> setting, if exists.</li><li>All columns without a <code>Width</code> shrink or expand, depending on the remaining space in the TreeList.</li><li>There is no horizontal scrollbar.</li></ul></td>
50
+
</tr>
51
+
<tr>
52
+
<th>None</th>
53
+
<td colspan="2"><ul style="margin: .5em auto; width: max-content;"><li>All columns have the same width, which depends on the TreeList width.</li><li>There is no horizontal scrollbar.</li></ul></td>
54
+
</tr>
55
+
</table>
28
56
57
+
To allow the users to adjust or auto-fit the column widths to the content, enable [TreeList column resizing](slug:treelist-columns-resize). You can also [resize columns through the TreeList state](slug:treelist-state#methods) or [auto-fit columns programmatically](slug:treelist-columns-resize#autofit-columns).
58
+
59
+
> Single table rendering and automatic table layout are not supported.
60
+
61
+
## Recommendations
62
+
63
+
For predictable and user-friendly behavior, consider the following TreeList configuration:
64
+
65
+
* If the TreeList has a fixed width and you need horizontal scrolling, set widths to all columns. Use absolute units that do not depend on the browser viewport size.
66
+
* If the TreeList does not need horizontal scrolling and is not likely to shrink too much, then leave at least one column without a width. This ensures that all set column widths are respected and the width-less columns take up the remaining space.
67
+
* If the TreeList width is unpredictable and the width-less columns may shrink too much, then apply a `min-width` style to the TreeList tables, according to the example below.
68
+
69
+
>caption Apply a minimum width to the TreeList table in a responsive layout
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4&size=40){kind=avatar}
0 commit comments