docs: Document autofit methods for Grid and TreeList (#537)

Co-authored-by: Dimo Dimov <[email protected]>

Author: dimodi

components/grid/columns/resize.md

@@ -10,26 +10,59 @@ position: 3
 
 # Resize Columns
 
-The Grid lets the user resize its columns by dragging the borders between their headers.
+The Grid features two different column resizing mechanisms:
 
-To enable the column resizing, set the `Resizable` parameter of the grid to `true`.
+* [Resize by Dragging](#resize-by-dragging)
+* [Fit to Content](#autofit-columns)
+
+The [example at the end of this page](#example) shows both options in action.
+
+## Resize by Dragging
+
+The Grid allows users to resize columns by dragging the borders between header cells.
+
+To enable such column resizing, set the `Resizable` parameter of the grid to `true`.
 
 To prevent the user from resizing a certain column, set its own parameter `Resizable="false"`. Note that the user can still resize other columns around it.
 
-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.
+## Autofit Columns
+
+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.
+
+The Grid also exposes methods to programmatically resize columns to fit their contents:
+
+* `AutoFitColumn(string id)` - autofits the column with the specified [`Id` attribute]({% slug components/grid/columns/bound%}#identification);
+* `AutoFitColumns(IEnumerable<string> ids)` - autofits multiple columns at once'
+* `AutoFitAllColumns()` - autofits all applicable columns (for example, this method does not affect the hierarchy expand/collapse columns);
 
->caption Enable column resizing in Telerik Grid
+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.
+
+Programmatic autofitting works even if column resizing is disabled.
+
+## Example
+
+>caption How Column Resizing Works in the Telerik Grid
+
+![](images/column-resize-preview.gif)
+
+>caption Grid Column Resizing and Autofitting
 
 ````CSHTML
-@* Drag the border between column headers to change the column size. You cannot resize the command column. Note that actual CRUD operations and settings are not implemented here for brevity. *@
+@* Grid column resizing and autofitting *@
+@* Drag the border between column headers to change the column width. The command column is not resizable by the user. *@
+
+<TelerikButton OnClick="@AutoFitSingleColumn">AutoFit ID Column</TelerikButton>
+<TelerikButton OnClick="@AutoFitMultipleColumns">AutoFit String Columns</TelerikButton>
+<TelerikButton OnClick="@AutoFitAllColumns">AutoFit All Columns</TelerikButton>
 
-<TelerikGrid Data="@GridData"
+<TelerikGrid @ref="@Grid"
+             Data="@GridData"
              Resizable="true"
              Pageable="true" PageSize="10" Sortable="true" Height="300px">
     <GridColumns>
-        <GridColumn Field=@nameof(SampleData.Id) Title="Id" />
-        <GridColumn Field=@nameof(SampleData.Name) Title="First Name" />
-        <GridColumn Field=@nameof(SampleData.LastName) Title="Last Name" />
+        <GridColumn Field=@nameof(SampleData.Id) Title="ID" Id="IDColumn" />
+        <GridColumn Field=@nameof(SampleData.Name) Title="First Name" Id="NameColumn1" />
+        <GridColumn Field=@nameof(SampleData.LastName) Title="Last Name" Id="NameColumn2" />
         <GridCommandColumn Width="100px" Resizable="false">
             <GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton>
             <GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
@@ -40,8 +73,25 @@ When column resizing is enabled, a double click on the resize handle between the
 </TelerikGrid>
 
 @code {
+    public TelerikGrid<SampleData> Grid { get; set; }
     public List<SampleData> GridData { get; set; }
 
+    private void AutoFitSingleColumn()
+    {
+        Grid.AutoFitColumn("IDColumn");
+    }
+
+    private void AutoFitMultipleColumns()
+    {
+        var columns = new List<string>() { "NameColumn1", "NameColumn2" };
+        Grid.AutoFitColumns(columns);
+    }
+
+    private void AutoFitAllColumns()
+    {
+        Grid.AutoFitAllColumns();
+    }
+
     protected override void OnInitialized()
     {
         GridData = GetData();
@@ -66,11 +116,6 @@ When column resizing is enabled, a double click on the resize handle between the
 }
 ````
 
-
->caption How column resizing works in the Telerik grid
-
-![](images/column-resize-preview.gif)
-
 ## See Also
 
   * [Live Demo: Column Resizing](https://demos.telerik.com/blazor-ui/grid/column-resizing)

components/grid/columns/width.md

@@ -26,7 +26,7 @@ With regard to the widths of its columns, the scrollable (default) Grid typicall
 
 * When no column widths are set, the available width is distributed evenly between all Grid columns.
 
-* 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.
+* 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).
 
 # See Also
 

components/treelist/columns/resize.md

@@ -10,32 +10,82 @@ position: 3
 
 # Resize Columns
 
-The treelist lets the user resize its columns by dragging the borders between their headers.
+The TreeList features two different column resizing mechanisms:
+
+* [Resize by Dragging](#resize-by-dragging)
+* [Fit to Content](#autofit-columns)
+
+The [example at the end of this page](#example) shows both options in action.
+
+## Resize by Dragging
+
+The TreeList allows users to resize columns by dragging the borders between header cells.
 
 To enable the column resizing, set the `Resizable` parameter of the treelist to `true`.
 
 To prevent the user from resizing a certain column, set its own parameter `Resizable="false"`. Note that the user can still resize other columns around it.
 
-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 and data.
+## Autofit Columns
+
+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.
+
+The TreeList also exposes methods to programmatically resize columns to fit their contents:
+
+* `AutoFitColumn(string id)` - autofits the column with the specified `Id` attribute;
+* `AutoFitColumns(IEnumerable<string> ids)` - autofits multiple columns at once;
+* `AutoFitAllColumns()` - autofits all applicable columns (for example, this method does not affect the hierarchy expand/collapse column);
+
+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.
+
+Programmatic autofitting works even if column resizing is disabled.
+
+## Example
+
+>caption How column resizing works in the Telerik TreeList
+
+![](images/column-resize-preview.gif)
+
 
->caption Enable column resizing in Telerik treelist
+>caption TreeList Column Resizing and Autofitting
 
 ````CSHTML
-@* Drag the border between column headers to change the column size. You cannot resize the ID column itself. *@
+@* TreeList column resizing and autofitting *@
+@* Drag the border between column headers to change the column width. You cannot resize the ID column itself. *@
 
-<TelerikTreeList Data="@Data" Resizable="true"
+<TelerikButton OnClick="@AutoFitSingleColumn">AutoFit Name Column</TelerikButton>
+<TelerikButton OnClick="@AutoFitMultipleColumns">AutoFit Id and ParentId Columns</TelerikButton>
+<TelerikButton OnClick="@AutoFitAllColumns">AutoFit All Columns</TelerikButton>
+
+<TelerikTreeList @ref="@TreeList" Data="@Data" Resizable="true"
                  Pageable="true" IdField="Id" ParentIdField="ParentId" Width="650px" Height="400px">
     <TreeListColumns>
-        <TreeListColumn Field="Name" Expandable="true" Width="320px" />
-        <TreeListColumn Field="Id" Resizable="false" />
-        <TreeListColumn Field="ParentId" />
+        <TreeListColumn Field="Name" Expandable="true" Width="320px" Id="NameColumn" />
+        <TreeListColumn Field="Id" Resizable="false" Id="IdColumn" />
+        <TreeListColumn Field="ParentId" Id="ParentIdColumn" />
         <TreeListColumn Field="HireDate" />
     </TreeListColumns>
 </TelerikTreeList>
 
 @code {
+    public TelerikTreeList<Employee> TreeList { get; set; }
     public List<Employee> Data { get; set; }
 
+    private void AutoFitSingleColumn()
+    {
+        TreeList.AutoFitColumn("NameColumn");
+    }
+
+    private void AutoFitMultipleColumns()
+    {
+        var columns = new List<string>() { "IdColumn", "ParentIdColumn" };
+        TreeList.AutoFitColumns(columns);
+    }
+
+    private void AutoFitAllColumns()
+    {
+        TreeList.AutoFitAllColumns();
+    }
+
     protected override async Task OnInitializedAsync()
     {
         Data = await GetTreeListData();
@@ -95,11 +145,6 @@ When column resizing is enabled, a double click on the resize handle between the
 }
 ````
 
-
->caption How column resizing works in the Telerik treelist
-
-![](images/column-resize-preview.gif)
-
 ## See Also
 
   * [Live Demo: Column Resizing](https://demos.telerik.com/blazor-ui/treelist/column-resizing)

components/treelist/columns/width.md

@@ -24,7 +24,7 @@ With regard to the widths of its columns, the scrollable (default) treelist typi
 
 * 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.
+* 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).
 
 
 # See Also