docs(Grid, TreeList): Improve TableWidth documentation in the State articles (#3020)

Author: dimodi

_contentTemplates/grid/state.md

@@ -716,14 +716,17 @@
 <TelerikGrid @ref="@GridRef"
              Data="@GridData"
              Pageable="true"
-             Reorderable="true">
+             Reorderable="true"
+             Resizable="true">
     <GridToolBarTemplate>
         <TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Success"
                        OnClick="@ReorderPriceAndQuantity">Reorder Price and Quantity</TelerikButton>
-        <TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Primary"
+        <TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Success"
                        OnClick="@MakeIdColumnLast">Make Id Column Last</TelerikButton>
+        <TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Success"
+                       OnClick="@ResizeColumns">Resize Columns</TelerikButton>
         <span class="k-separator"></span>
-        <TelerikButton OnClick="@ResetColumnOrder">Reset Column Order</TelerikButton>
+        <TelerikButton OnClick="@ResetColumns">Reset Column Configuration</TelerikButton>
     </GridToolBarTemplate>
     <GridColumns>
         <GridColumn Field="@(nameof(Product.Id))" Width="80px" />
@@ -784,13 +787,32 @@
         }
     }
 
-    private async Task ResetColumnOrder()
+    private async Task ResizeColumns()
+    {
+        if (GridRef != null)
+        {
+            var gridState = GridRef.GetState();
+            int newColumnWidth = 160;
+
+            foreach (GridColumnState columnState in gridState.ColumnStates)
+            {
+                columnState.Width = $"{newColumnWidth}px";
+            }
+
+            gridState.TableWidth = $"{newColumnWidth * gridState.ColumnStates.Count}px";
+
+            await GridRef.SetStateAsync(gridState);
+        }
+    }
+
+    private async Task ResetColumns()
     {
         if (GridRef != null)
         {
             var gridState = GridRef.GetState();
 
             gridState.ColumnStates = new List<GridColumnState>();
+            gridState.TableWidth = null;
 
             await GridRef.SetStateAsync(gridState);
         }

components/grid/state.md

@@ -43,7 +43,7 @@ The Grid state is a generic [class `GridState<TItem>`](slug:Telerik.Blazor.Compo
 | `SelectedItems` | `ICollection<TItem>` | The currently [selected data item(s)](slug:grid-selection-overview). |
 | `Skip` | `int?` | The number of scrolled data items when using [virtual row scrolling](slug:components/grid/virtual-scrolling). In other words, this is the number of rows above the currently visible ones. |
 | `SortDescriptors` | `ICollection<SortDescriptor>` | The currently applied [sorts](slug:components/grid/features/sorting). |
-| `TableWidth` | `string` | The sum of all visible column widths. This property changes together with `ColumnStates`. The `OnStateChanged` event does not fire separately for it. |
+| `TableWidth` | `string` | The sum of all visible column widths. The initial value is always `null` regardless of the column configuration. The `TableWidth` value changes during column resizing together with `ColumnStates` and the`OnStateChanged` event does not fire separately for it. When you resize a column programmatically, and all other columns already have widths, you must update the `TableWidth` too, otherwise the other columns will resize unexpectedly. |
 
 \* `TItem` is the Grid model type.
 

components/treelist/state.md

@@ -42,7 +42,7 @@ The TreeList state is a generic [class `TreeListState<TItem>`](slug:Telerik.Blaz
 | `SelectedItems` | `ICollection<TItem>` | The currently [selected data item(s)](slug:treelist-selection-overview). |
 | `Skip` | `int?` | The number of scrolled data items when using [virtual row scrolling](slug:treelist-virtual-scrolling). In other words, this is the number of rows above the currently visible ones. |
 | `SortDescriptors` | `ICollection<SortDescriptor>` | The currently applied [sorts](slug:treelist-sorting). |
-| `TableWidth` | `string` | The sum of all visible column widths. This property changes together with `ColumnStates`. The `OnStateChanged` event does not fire separately for it. |
+| `TableWidth` | `string` | The sum of all visible column widths. The initial value is always `null` regardless of the column configuration. The `TableWidth` value changes during column resizing together with `ColumnStates` and the`OnStateChanged` event does not fire separately for it. When you resize a column programmatically, and all other columns already have widths, you must update the `TableWidth` too, otherwise the other columns will resize unexpectedly. |
 
 \* `TItem` is the TreeList model type.