Skip to content

Commit 1002c68

Browse files
github-actions[bot]dimodiyordan-mitev
authored
Merge grid-autofit-3189 into production (#3191)
* docs(Grid,TreeList): Improve auto-fitting docs * Update components/treelist/columns/resize.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> * Update components/grid/columns/resize.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --------- Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com>
1 parent cd91e8e commit 1002c68

File tree

3 files changed

+55
-49
lines changed

3 files changed

+55
-49
lines changed

‎components/grid/columns/resize.md

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -33,18 +33,21 @@ Here a few notes on the resizing behavior:
3333

3434
## Autofit Columns
3535

36-
When column resizing is enabled, a double click on the resize handle between the header cells will automatically fit the column width to the content of the header, data and footers. This will remove text wrapping in the component.
36+
When column resizing is enabled, a double click on the resize handle between two header cells automatically adjusts the column width to the content of the header, data and footers. Autofitting also removes text wrapping in the column cells.
3737

38-
The Grid also exposes methods to programmatically resize columns to fit their contents:
38+
Similar to regular [column resizing](#resize-by-dragging), autofitting specific columns preserves the current widths of all the other columns. Column autofitting can trigger a horizontal Grid scrollbar or leave empty space after the last column.
3939

40-
* `AutoFitColumnAsync(string id)`—Autofits the column with the specified [`Id` attribute](slug:components/grid/columns/bound#identification).
40+
The Grid takes into account the `MinResizableWidth` and `MaxResizableWidth` for each auto-fitted column.
41+
42+
The component also exposes methods to programmatically resize columns to fit their contents:
43+
44+
* `AutoFitColumnAsync(string id)`—Autofits the column with the specified [`Id` attribute](slug:components/treelist/columns/bound#identification).
4145
* `AutoFitColumnsAsync(IEnumerable<string> ids)`—Autofits multiple columns at once.
4246
* `AutoFitAllColumnsAsync()`—Autofits all applicable columns. For example, this method does not affect the hierarchy expand/collapse columns.
4347

44-
Autofitting specific columns preserves the current widths of all the other columns. Similar to [column resizing](#resize-by-dragging), column autofitting can trigger a horizontal Grid scrollbar, or leave empty space after the last column.
45-
4648
Programmatic autofitting works even if column resizing is disabled.
4749

50+
> Autofitting a large number of columns with a large `PageSize` can be a resource-intensive operation. For better client-side performance, set fixed optimal widths to all columns with predictable content like numbers and dates, and only autofit the others.
4851
4952
### Limitations
5053

@@ -56,7 +59,6 @@ The known limitations of the Autofit Columns feature include:
5659

5760
>important Trying to autofit the columns on initial load will throw a `NullReferenceException`. Check the [AutoFit all Grid columns on initial load knowledge-based article](slug:grid-autofit-columns-on-initial-load) to see a possible solution to achieve this behavior.
5861
59-
6062
## Example
6163

6264
>caption How Column Resizing Works in the Telerik Grid

‎components/treelist/columns/bound.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,11 @@ You can use the following properties on bound columns:
140140
* `ShowColumnMenu` - (defaults to `true`) - if set to `false`, disables the [column menu](slug:treelist-column-menu) for that particular column.
141141
* `VisibleInColumnChooser` - (defaults to `true`) - if set to `false`, removes the column from the Column chooser of the [column menu](slug:treelist-column-menu).
142142

143+
### Identification
144+
145+
* `Id` - a unique identifier of the TreeList Column. Use to associate the column to the respective item in the column chooser when the columns are organized in [sections](slug:treelist-column-menu#column-sections).
146+
* `ref` - the standard Blazor reference name.
147+
143148
### Data Operations
144149

145150
* `Editable` - (defaults to `true`) - you can set this property to `true` or `false` to allow or prevent [editing](slug:treelist-overview#editing) of this field. Defaults to `true`. To edit data, you also need a [CommandColumn](slug:treelist-columns-command).

‎components/treelist/columns/resize.md

Lines changed: 42 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -33,37 +33,47 @@ Here a few notes on the resizing behavior:
3333

3434
## Autofit Columns
3535

36-
When column resizing is enabled, a double click on the resize handle between the header cells will automatically fit the column width to the content of the header, data and footers. This will remove text wrapping in the component.
36+
When column resizing is enabled, a double click on the resize handle between two header cells automatically adjusts the column width to the content of the header, data and footers. Autofitting also removes text wrapping in the column cells.
3737

38-
The TreeList also exposes methods to programmatically resize columns to fit their contents:
38+
Similar to regular [column resizing](#resize-by-dragging), autofitting specific columns preserves the current widths of all the other columns. Column autofitting can trigger a horizontal TreeList scrollbar, or leave empty space after the last column.
3939

40-
* `AutoFitColumn(string id)` - autofits the column with the specified `Id` attribute;
41-
* `AutoFitColumns(IEnumerable<string> ids)` - autofits multiple columns at once;
42-
* `AutoFitAllColumns()` - autofits all applicable columns (for example, this method does not affect the hierarchy expand/collapse column);
40+
The TreeList takes into account the `MinResizableWidth` and `MaxResizableWidth` of each auto-fitted column.
4341

44-
Autofitting specific columns preserves the current widths of all the other columns. Similar to [column resizing](#resize-by-dragging), column autofitting can trigger a horizontal Grid scrollbar, or leave empty space after the last column.
42+
The component also exposes methods to programmatically resize columns to fit their contents:
43+
44+
* `AutoFitColumnAsync(string id)`—Autofits the column with the specified [`Id` attribute](slug:components/grid/columns/bound#identification).
45+
* `AutoFitColumnsAsync(IEnumerable<string> ids)`—Autofits multiple columns at once.
46+
* `AutoFitAllColumnsAsync()`—Autofits all applicable columns. For example, this method does not affect the hierarchy expand/collapse columns.
4547

4648
Programmatic autofitting works even if column resizing is disabled.
4749

50+
> Autofitting a large number of columns with a large `PageSize` can be a resource-intensive operation. For better client-side performance, set fixed optimal widths to all columns with predictable content like numbers and dates, and only autofit the others.
51+
52+
### Limitations
53+
54+
The known limitations of the Autofit Columns feature include:
55+
56+
* Autofitting the columns is not supported with [Virtual Columns](slug:treelist-columns-virtual).
57+
58+
* Autofitting the columns on initial load of the TreeList is not supported.
59+
60+
>important Trying to autofit the columns on initial load will throw a `NullReferenceException`. Check the [AutoFit all Grid columns on initial load knowledge-base article](slug:grid-autofit-columns-on-initial-load) to see a possible solution to achieve this behavior.
61+
4862
## Example
4963

5064
>caption How column resizing works in the Telerik TreeList
5165
5266
![Blazor TreeList Column Resize Preview](images/column-resize-preview.gif)
5367

54-
5568
>caption TreeList Column Resizing and Autofitting
5669
5770
````RAZOR
58-
@* TreeList column resizing and autofitting *@
59-
@* Drag the border between column headers to change the column width. You cannot resize the ID column itself. *@
60-
6171
<TelerikButton OnClick="@AutoFitSingleColumn">AutoFit Name Column</TelerikButton>
6272
<TelerikButton OnClick="@AutoFitMultipleColumns">AutoFit Id and ParentId Columns</TelerikButton>
6373
<TelerikButton OnClick="@AutoFitAllColumns">AutoFit All Columns</TelerikButton>
6474
65-
<TelerikTreeList @ref="@TreeList" Data="@Data" Resizable="true"
66-
Pageable="true" IdField="Id" ParentIdField="ParentId" Width="650px" Height="400px">
75+
<TelerikTreeList @ref="@TreeList" Data="@TreeListData" Resizable="true"
76+
Pageable="true" IdField="Id" ParentIdField="ParentId" Height="400px">
6777
<TreeListColumns>
6878
<TreeListColumn Field="Name" Expandable="true" Width="320px" Id="NameColumn" />
6979
<TreeListColumn Field="Id" Resizable="false" Id="IdColumn" />
@@ -73,47 +83,30 @@ Programmatic autofitting works even if column resizing is disabled.
7383
</TelerikTreeList>
7484
7585
@code {
76-
public TelerikTreeList<Employee> TreeList { get; set; }
77-
public List<Employee> Data { get; set; }
86+
private TelerikTreeList<Employee>? TreeList { get; set; }
87+
private List<Employee> TreeListData { get; set; } = new();
7888
79-
private void AutoFitSingleColumn()
89+
private async Task AutoFitSingleColumn()
8090
{
81-
TreeList.AutoFitColumn("NameColumn");
91+
await TreeList!.AutoFitColumnAsync("NameColumn");
8292
}
8393
84-
private void AutoFitMultipleColumns()
94+
private async Task AutoFitMultipleColumns()
8595
{
8696
var columns = new List<string>() { "IdColumn", "ParentIdColumn" };
87-
TreeList.AutoFitColumns(columns);
97+
await TreeList!.AutoFitColumnsAsync(columns);
8898
}
8999
90-
private void AutoFitAllColumns()
100+
private async Task AutoFitAllColumns()
91101
{
92-
TreeList.AutoFitAllColumns();
102+
await TreeList!.AutoFitAllColumnsAsync();
93103
}
94104
95-
protected override async Task OnInitializedAsync()
96-
{
97-
Data = await GetTreeListData();
98-
}
99-
100-
// sample models and data generation
101-
102-
public class Employee
105+
protected override void OnInitialized()
103106
{
104-
public int Id { get; set; }
105-
public int? ParentId { get; set; }
106-
public string Name { get; set; }
107-
public DateTime HireDate { get; set; }
108-
}
109-
110-
async Task<List<Employee>> GetTreeListData()
111-
{
112-
List<Employee> data = new List<Employee>();
113-
114107
for (int i = 1; i < 15; i++)
115108
{
116-
data.Add(new Employee
109+
TreeListData.Add(new Employee
117110
{
118111
Id = i,
119112
ParentId = null,
@@ -124,7 +117,7 @@ Programmatic autofitting works even if column resizing is disabled.
124117
for (int j = 1; j < 4; j++)
125118
{
126119
int currId = i * 100 + j;
127-
data.Add(new Employee
120+
TreeListData.Add(new Employee
128121
{
129122
Id = currId,
130123
ParentId = i,
@@ -135,7 +128,7 @@ Programmatic autofitting works even if column resizing is disabled.
135128
for (int k = 1; k < 3; k++)
136129
{
137130
int nestedId = currId * 1000 + k;
138-
data.Add(new Employee
131+
TreeListData.Add(new Employee
139132
{
140133
Id = nestedId,
141134
ParentId = currId,
@@ -145,12 +138,18 @@ Programmatic autofitting works even if column resizing is disabled.
145138
}
146139
}
147140
}
141+
}
148142
149-
return await Task.FromResult(data);
143+
public class Employee
144+
{
145+
public int Id { get; set; }
146+
public int? ParentId { get; set; }
147+
public string Name { get; set; } = string.Empty;
148+
public DateTime HireDate { get; set; }
150149
}
151150
}
152151
````
153152

154153
## See Also
155154

156-
* [Live Demo: Column Resizing](https://demos.telerik.com/blazor-ui/treelist/column-resizing)
155+
* [Live Demo: Column Resizing](https://demos.telerik.com/blazor-ui/treelist/column-resizing)

0 commit comments

Comments
 (0)