From 93e3da20623b265a66f2e3cf763409fcdfd5c155 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Wed, 12 Mar 2025 17:44:56 +0200 Subject: [PATCH 01/10] docs(Grid): Revamp Column Width article --- components/grid/columns/width.md | 136 ++++++++++++++++++++++++++++--- 1 file changed, 126 insertions(+), 10 deletions(-) diff --git a/components/grid/columns/width.md b/components/grid/columns/width.md index 0340762f14..df64100353 100644 --- a/components/grid/columns/width.md +++ b/components/grid/columns/width.md @@ -8,25 +8,141 @@ published: True position: 4 --- -# Grid Column Width Behavior +# Grid Column Width -This article explains how the grid column width behaves depending on the settings applied by the developer. +This article explains how the Grid behaves, depending on the set column widths. -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. +## Basics -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%`. +The Grid renders separate HTML `` 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. -* 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. +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. -* 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. +## Column Width Behavior -* 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`. +The Grid column width settings can vary and result in the following configurations and behavior: -* 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. +* All Grid columns have set widths: + * The sum of the column widths exceeds the Grid component width. The Grid renders a horizontal scrollbar. All column widths match their settings. + * The sum of the column widths is less than the Grid width. All columns expand evenly to take up the available space in the Grid. +* Only some Grid columns have set widths: + * The columns that have widths take up less than the Grid component width. The applied column widths match the component settings. The remaining width-less columns shrink or expand, depending on the remaining space. A horizontal scrollbar may appears only if the columns that have widths exceed the Grid width. In this case the remaining columns will disappear. + * The columns that have widths take up more than the Grid component width. The applied column widths match the component settings. A horizontal scrollbar appears. All columns without widths shrink to zero width and disappear. +* No column has a set width: all columns are equally wide. They shrink and expand, depending on the Grid width. -* When no column widths are set, the available width is distributed evenly between all Grid columns. +@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) -* 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). + + +
+ + + + +
Explicit Column Widths
\
Columns with Widths		Exceed the Grid WidthSubceed the Grid Width
AllThe Grid renders a horizontal scrollbar. All column widths match their settings.All columns expand evenly to take up the available space in the Grid.
SomeThe applied column widths match the component settings. A horizontal scrollbar appears. All columns without widths shrink to zero width and disappear.The applied column widths match the component settings. The remaining width-less columns shrink or expand, depending on the remaining space. A horizontal scrollbar may appears only if the columns that have widths exceed the Grid width. In this case the remaining columns will disappear.
NoneAll columns are equally wide. They shrink and expand, depending on the Grid width.All columns are equally wide. They shrink and expand, depending on the Grid width.
+ +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). + +> Single table rendering and automatic table layout are not supported. + +## Recommendations + +For predictable and user-friendly behavior, consider the following Grid configuration: + +* 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. +* 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. +* 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 exaple below. + +>caption Apply a minimum width to the Grid table in a responsive layout + +````RAZOR + + + +

Resize this pane to resize the Grid.

+ + + + + + + + + + + + + Count: @context.Count + + + + + Average: @context.Average + + + + + Sum: @context.Sum + + + + + + + + + + + + +@code { + private List GridData { get; set; } = new(); + + protected override void OnInitialized() + { + for (int i = 1; i <= 5; i++) + { + GridData.Add(new Product() + { + Id = i, + Name = $"Name {i}", + Price = Random.Shared.Next(1, 100) * 1.23m, + Quantity = Random.Shared.Next(0, 1000), + ReleaseDate = DateTime.Today.AddDays(-Random.Shared.Next(60, 1000)), + IsActive = i % 4 > 0 + }); + } + } + + public class Product + { + public int Id { get; set; } + public string Name { get; set; } = string.Empty; + public decimal Price { get; set; } + public int Quantity { get; set; } + public DateTime ReleaseDate { get; set; } + public bool IsActive { get; set; } + } +} +```` # See Also From bf20c7febe5220fe564ebe22fc6b270edcc5e311 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Wed, 12 Mar 2025 22:01:51 +0200 Subject: [PATCH 02/10] Update components/grid/columns/width.md --- components/grid/columns/width.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/grid/columns/width.md b/components/grid/columns/width.md index df64100353..f86dbeaf67 100644 --- a/components/grid/columns/width.md +++ b/components/grid/columns/width.md @@ -33,7 +33,7 @@ The Grid column width settings can vary and result in the following configuratio @[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) - +
From ec505b0253b8c7093411b4e6a76a96d5c34e2155 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Thu, 13 Mar 2025 17:03:30 +0200 Subject: [PATCH 03/10] Update components/grid/columns/width.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --- components/grid/columns/width.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/grid/columns/width.md b/components/grid/columns/width.md index f86dbeaf67..1786ef1f7f 100644 --- a/components/grid/columns/width.md +++ b/components/grid/columns/width.md @@ -24,7 +24,7 @@ The Grid column width settings can vary and result in the following configuratio * All Grid columns have set widths: * The sum of the column widths exceeds the Grid component width. The Grid renders a horizontal scrollbar. All column widths match their settings. - * The sum of the column widths is less than the Grid width. All columns expand evenly to take up the available space in the Grid. + * If the sum of the column widths is less than the Grid's width, all columns expand evenly to take up the available space in the Grid. * Only some Grid columns have set widths: * The columns that have widths take up less than the Grid component width. The applied column widths match the component settings. The remaining width-less columns shrink or expand, depending on the remaining space. A horizontal scrollbar may appears only if the columns that have widths exceed the Grid width. In this case the remaining columns will disappear. * The columns that have widths take up more than the Grid component width. The applied column widths match the component settings. A horizontal scrollbar appears. All columns without widths shrink to zero width and disappear. From 629e3bd2a90e170661998d8cba9e55a34bf90e6f Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Thu, 13 Mar 2025 17:03:40 +0200 Subject: [PATCH 04/10] Update components/grid/columns/width.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --- components/grid/columns/width.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/grid/columns/width.md b/components/grid/columns/width.md index 1786ef1f7f..cae5f86ea4 100644 --- a/components/grid/columns/width.md +++ b/components/grid/columns/width.md @@ -23,7 +23,7 @@ You can set the Grid column `Width` parameter in any CSS unit, such as `px`, `%` The Grid column width settings can vary and result in the following configurations and behavior: * All Grid columns have set widths: - * The sum of the column widths exceeds the Grid component width. The Grid renders a horizontal scrollbar. All column widths match their settings. + * If the sum of the column widths exceeds the Grid component's width, a horizontal scrollbar appears. All columns retain their specified widths. * If the sum of the column widths is less than the Grid's width, all columns expand evenly to take up the available space in the Grid. * Only some Grid columns have set widths: * The columns that have widths take up less than the Grid component width. The applied column widths match the component settings. The remaining width-less columns shrink or expand, depending on the remaining space. A horizontal scrollbar may appears only if the columns that have widths exceed the Grid width. In this case the remaining columns will disappear. From 8033c54acec4bf497d9a6c103484d6f3544a0deb Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Thu, 13 Mar 2025 17:04:15 +0200 Subject: [PATCH 05/10] Update components/grid/columns/width.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --- components/grid/columns/width.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/grid/columns/width.md b/components/grid/columns/width.md index cae5f86ea4..2d1e38177f 100644 --- a/components/grid/columns/width.md +++ b/components/grid/columns/width.md @@ -28,7 +28,7 @@ The Grid column width settings can vary and result in the following configuratio * Only some Grid columns have set widths: * The columns that have widths take up less than the Grid component width. The applied column widths match the component settings. The remaining width-less columns shrink or expand, depending on the remaining space. A horizontal scrollbar may appears only if the columns that have widths exceed the Grid width. In this case the remaining columns will disappear. * The columns that have widths take up more than the Grid component width. The applied column widths match the component settings. A horizontal scrollbar appears. All columns without widths shrink to zero width and disappear. -* No column has a set width: all columns are equally wide. They shrink and expand, depending on the Grid width. +* No column has a set width—In this scenario, all columns are equally wide. They shrink and expand depending on the Grid's width. @[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) From f7a291a87aed82fcea0efc611b48ea1c0c1e099c Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Thu, 13 Mar 2025 17:04:24 +0200 Subject: [PATCH 06/10] Update components/grid/columns/width.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --- components/grid/columns/width.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/components/grid/columns/width.md b/components/grid/columns/width.md index 2d1e38177f..69d1e5a62f 100644 --- a/components/grid/columns/width.md +++ b/components/grid/columns/width.md @@ -26,7 +26,11 @@ The Grid column width settings can vary and result in the following configuratio * If the sum of the column widths exceeds the Grid component's width, a horizontal scrollbar appears. All columns retain their specified widths. * If the sum of the column widths is less than the Grid's width, all columns expand evenly to take up the available space in the Grid. * Only some Grid columns have set widths: - * The columns that have widths take up less than the Grid component width. The applied column widths match the component settings. The remaining width-less columns shrink or expand, depending on the remaining space. A horizontal scrollbar may appears only if the columns that have widths exceed the Grid width. In this case the remaining columns will disappear. + * If the total width of these columns is less than the Grid component's width: + + * The applied column widths match the component settings. + * The remaining columns without set widths shrink or expand, depending on the remaining space. + * A horizontal scrollbar may appear if the columns that have widths exceed the Grid width. In this case, the remaining columns will disappear. * The columns that have widths take up more than the Grid component width. The applied column widths match the component settings. A horizontal scrollbar appears. All columns without widths shrink to zero width and disappear. * No column has a set width—In this scenario, all columns are equally wide. They shrink and expand depending on the Grid's width. From 24bf46040b125bdb715efd9c85a0263683f7cdc3 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Thu, 13 Mar 2025 17:04:31 +0200 Subject: [PATCH 07/10] Update components/grid/columns/width.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --- components/grid/columns/width.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/components/grid/columns/width.md b/components/grid/columns/width.md index 69d1e5a62f..579d36e520 100644 --- a/components/grid/columns/width.md +++ b/components/grid/columns/width.md @@ -31,7 +31,10 @@ The Grid column width settings can vary and result in the following configuratio * The applied column widths match the component settings. * The remaining columns without set widths shrink or expand, depending on the remaining space. * A horizontal scrollbar may appear if the columns that have widths exceed the Grid width. In this case, the remaining columns will disappear. - * The columns that have widths take up more than the Grid component width. The applied column widths match the component settings. A horizontal scrollbar appears. All columns without widths shrink to zero width and disappear. + * If the columns with set widths exceed the Grid component's width: + * The applied column widths match the component settings. + * A horizontal scrollbar appears. + * All columns without widths shrink to zero width and disappear. * No column has a set width—In this scenario, all columns are equally wide. They shrink and expand depending on the Grid's width. @[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) From 6bf88f18c083343dbaba2d0dba94ac2a29b228d6 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Thu, 13 Mar 2025 17:04:43 +0200 Subject: [PATCH 08/10] Update components/grid/columns/width.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --- components/grid/columns/width.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/components/grid/columns/width.md b/components/grid/columns/width.md index 579d36e520..7b0b8cc5fb 100644 --- a/components/grid/columns/width.md +++ b/components/grid/columns/width.md @@ -50,6 +50,8 @@ The Grid column width settings can vary and result in the following configuratio } +The table below summarizes the possible behaviors of a Grid with various column widths. +
Explicit Column Widths
\
Columns with Widths		Exceed the Grid WidthSubceed the Grid Width
AllThe Grid renders a horizontal scrollbar. All column widths match their settings.All columns expand evenly to take up the available space in the Grid.
SomeThe applied column widths match the component settings. A horizontal scrollbar appears. All columns without widths shrink to zero width and disappear.The applied column widths match the component settings. The remaining width-less columns shrink or expand, depending on the remaining space. A horizontal scrollbar may appears only if the columns that have widths exceed the Grid width. In this case the remaining columns will disappear.
From 81010558d08080961f655289455e20904e452744 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Thu, 13 Mar 2025 18:10:22 +0200 Subject: [PATCH 09/10] Improve table design and port to TreeList --- .../common/parameters-table-styles.md | 33 ++++ components/grid/columns/width.md | 67 ++++--- components/treelist/columns/width.md | 175 +++++++++++++++++- 3 files changed, 230 insertions(+), 45 deletions(-) diff --git a/_contentTemplates/common/parameters-table-styles.md b/_contentTemplates/common/parameters-table-styles.md index 140d7c5a1d..807bf65038 100644 --- a/_contentTemplates/common/parameters-table-styles.md +++ b/_contentTemplates/common/parameters-table-styles.md @@ -6,3 +6,36 @@ } #end + +#multidimensional-table + +#end diff --git a/components/grid/columns/width.md b/components/grid/columns/width.md index 7b0b8cc5fb..c5c151a335 100644 --- a/components/grid/columns/width.md +++ b/components/grid/columns/width.md @@ -10,7 +10,7 @@ position: 4 # Grid Column Width -This article explains how the Grid behaves, depending on the set column widths. +This article explains how to set Grid column widths and how the component behaves, depending on its column width configuration. ## Basics @@ -20,43 +20,38 @@ You can set the Grid column `Width` parameter in any CSS unit, such as `px`, `%` ## Column Width Behavior -The Grid column width settings can vary and result in the following configurations and behavior: +The Grid column width settings can vary and result in the following behaviors: -* All Grid columns have set widths: - * If the sum of the column widths exceeds the Grid component's width, a horizontal scrollbar appears. All columns retain their specified widths. - * If the sum of the column widths is less than the Grid's width, all columns expand evenly to take up the available space in the Grid. -* Only some Grid columns have set widths: - * If the total width of these columns is less than the Grid component's width: - - * The applied column widths match the component settings. - * The remaining columns without set widths shrink or expand, depending on the remaining space. - * A horizontal scrollbar may appear if the columns that have widths exceed the Grid width. In this case, the remaining columns will disappear. - * If the columns with set widths exceed the Grid component's width: - * The applied column widths match the component settings. - * A horizontal scrollbar appears. - * All columns without widths shrink to zero width and disappear. -* No column has a set width—In this scenario, all columns are equally wide. They shrink and expand depending on the Grid's width. - -@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) - - - -The table below summarizes the possible behaviors of a Grid with various column widths. +@[template](/_contentTemplates/common/parameters-table-styles.md#multidimensional-table)
Explicit Column Widths
\
Columns with Widths		Exceed the Grid WidthSubceed the Grid Width
AllThe Grid renders a horizontal scrollbar. All column widths match their settings.All columns expand evenly to take up the available space in the Grid.
- - - - + + + + + + + + + + + + + + + + + + + + + + + + + + +
Explicit Column Widths
\
Columns with Widths		Exceed the Grid WidthSubceed the Grid Width
AllThe Grid renders a horizontal scrollbar. All column widths match their settings.All columns expand evenly to take up the available space in the Grid.
SomeThe applied column widths match the component settings. A horizontal scrollbar appears. All columns without widths shrink to zero width and disappear.The applied column widths match the component settings. The remaining width-less columns shrink or expand, depending on the remaining space. A horizontal scrollbar may appears only if the columns that have widths exceed the Grid width. In this case the remaining columns will disappear.
NoneAll columns are equally wide. They shrink and expand, depending on the Grid width.All columns are equally wide. They shrink and expand, depending on the Grid width.
  The Sum of All Set Column Widths Is:
  Greater Than the Grid WidthLess Than the Grid Width
How Many Columns Have Width:All
  • All columns respect their Width setting.
  • A horizontal scrollbar appears.
  • All columns expand beyond their Width setting to fill the available space in the Grid.
  • There is no horizontal scrollbar.
Some
  • All columns respect their Width setting, if exists.
  • All columns without a Width shrink and disappear.
  • A horizontal scrollbar appears.
  • All columns respect their Width setting, if exists.
  • All columns without a Width shrink or expand, depending on the remaining space in the Grid.
  • There is no horizontal scrollbar.
None
  • All columns have the same width, which depends on the Grid width.
  • There is no horizontal scrollbar.
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). @@ -69,7 +64,7 @@ For predictable and user-friendly behavior, consider the following Grid configur * 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. * 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. -* 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 exaple below. +* 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. >caption Apply a minimum width to the Grid table in a responsive layout diff --git a/components/treelist/columns/width.md b/components/treelist/columns/width.md index 78ac29068f..9fa082e90f 100644 --- a/components/treelist/columns/width.md +++ b/components/treelist/columns/width.md @@ -8,24 +8,181 @@ published: True position: 4 --- -# TreeList Column Width Behavior +# TreeList Column Width -This article explains how the treelist column width behaves depending on the settings applied by the developer. +This article explains how to set TreeList column widths and how the component behaves, depending on its column width configuration. -With regard to the widths of its columns, the scrollable (default) treelist typically behaves as any regular HTML table with a `table-layout: fixed`. +## Basics -* 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. +The TreeList renders separate HTML `` 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 TreeList tables apply `table-layout: fixed` and `width: 100%` CSS styles to ensure column alignment between the three areas. -* 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. +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. -* 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`. +## Column Width Behavior -* 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. +The TreeList column width settings can vary and result in the following behaviors: -* When no column widths are set, the available width is distributed evenly between all treelist columns. +@[template](/_contentTemplates/common/parameters-table-styles.md#multidimensional-table) -* 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). +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
  The Sum of All Set Column Widths Is:
  Greater Than the TreeList WidthLess Than the TreeList Width
How Many Columns Have Width:All
  • All columns respect their Width setting.
  • A horizontal scrollbar appears.
  • All columns expand beyond their Width setting to fill the available space in the TreeList.
  • There is no horizontal scrollbar.
Some
  • All columns respect their Width setting, if exists.
  • All columns without a Width shrink and disappear.
  • A horizontal scrollbar appears.
  • All columns respect their Width setting, if exists.
  • All columns without a Width shrink or expand, depending on the remaining space in the TreeList.
  • There is no horizontal scrollbar.
None
  • All columns have the same width, which depends on the TreeList width.
  • There is no horizontal scrollbar.
+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). + +> Single table rendering and automatic table layout are not supported. + +## Recommendations + +For predictable and user-friendly behavior, consider the following TreeList configuration: + +* 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. +* 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. +* 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. + +>caption Apply a minimum width to the TreeList table in a responsive layout + +````RAZOR + + + +

Resize this pane to resize the TreeList.

+ + + + + + + + + + + + + + + + + +@code { + private List? TreeListData { get; set; } + + private EmployeeService TreeListEmployeeService { get; set; } = new(); + + protected override async Task OnInitializedAsync() + { + TreeListData = await TreeListEmployeeService.Read(); + } + + public class Employee + { + public int Id { get; set; } + public int? ParentId { get; set; } + public bool HasChildren { get; set; } + public string Name { get; set; } = string.Empty; + public decimal? Salary { get; set; } + public DateTime? HireDate { get; set; } + public bool IsDriver { get; set; } + } + + #region Data Service + + public class EmployeeService + { + private List Items { get; set; } = new(); + + private readonly int TreeLevelCount; + private readonly int RootItemCount; + private readonly int ChildItemCount; + + private int LastId { get; set; } + private Random Rnd { get; set; } = Random.Shared; + + public async Task> Read() + { + await SimulateAsyncOperation(); + return Items; + } + + private async Task SimulateAsyncOperation() + { + await Task.Delay(100); + } + + private void PopulateChildren(List items, int? parentId, int level) + { + int itemCount = level == 1 ? RootItemCount : ChildItemCount; + for (int i = 1; i <= itemCount; i++) + { + int itemId = ++LastId; + items.Add(new Employee() + { + Id = itemId, + ParentId = parentId, + HasChildren = level < TreeLevelCount, + Name = $"Employee Name {itemId}", // {level}-{i} + Salary = Rnd.Next(1_000, 10_000) * 1.23m, + HireDate = DateTime.Today.AddDays(-Rnd.Next(365, 3650)), + IsDriver = itemId % 2 == 0 + }); + if (level < TreeLevelCount) + { + PopulateChildren(items, itemId, level + 1); + } + } + } + + public EmployeeService(int treeLevelCount = 3, int rootItemCount = 3, int childItemCount = 2) + { + TreeLevelCount = treeLevelCount; + RootItemCount = rootItemCount; + ChildItemCount = childItemCount; + List items = new(); + PopulateChildren(items, null, 1); + Items = items; + } + } + + #endregion Data Service +} +```` # See Also From 23ac635fa9c1fdf9ea0c3100ba314bbbc17efef9 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Thu, 13 Mar 2025 18:15:07 +0200 Subject: [PATCH 10/10] Update components/treelist/columns/width.md --- components/treelist/columns/width.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/treelist/columns/width.md b/components/treelist/columns/width.md index 9fa082e90f..a3f2e67a98 100644 --- a/components/treelist/columns/width.md +++ b/components/treelist/columns/width.md @@ -14,7 +14,7 @@ This article explains how to set TreeList column widths and how the component be ## Basics -The TreeList renders separate HTML `` 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 TreeList tables apply `table-layout: fixed` and `width: 100%` CSS styles to ensure column alignment between the three areas. +The TreeList renders separate HTML `
` 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. 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.