docs(Grid): Add edit-related info to Stacked columns docs (#3374)

* docs(Grid): Add edit-related info to Stacked columns docs

* Update toolbar.md

* Update components/grid/toolbar.md

* Update components/grid/columns/stacked.md

* Update components/grid/columns/stacked.md

* Update components/grid/toolbar.md

Author: dimodi

components/grid/columns/stacked.md

@@ -79,17 +79,19 @@ The code snippet below uses 3 stacked columns. The first one is twice as wide as
 
 ## Integration with Other Features
 
-When the Grid is in `Stacked` data layout mode, it does not render column headers. As a result, column features like sorting, filtering, grouping, locking are not available through the classic Grid UI. Instead, use [ToolBar command tools](slug:components/grid/features/toolbar#command-tools) to enable the same functionality through different UI.
+In `Stacked` data layout mode the Grid rendering is different and some features use different UI and UX:
 
-Hierarchy relies on an expand/collapse button, which is below the stacked table row content.
+* The Grid does not render column headers. Column features like sorting, filtering, grouping, and locking require [ToolBar command tools](slug:components/grid/features/toolbar#command-tools).
+* The Grid does not render a command column. Combine [Grid row selection](slug:grid-selection-row) with [Toolbar command tools for the **Delete**, **Edit**, **Save**, and **Cancel** buttons](slug:components/grid/features/toolbar#command-tools).
+* Hierarchy relies on an expand/collapse button, which renders below the stacked table row content.
 
 ## Example
 
 The following sample shows how to:
 
 * Enable and disable column stacking, depending on the viewport width.
 * Display 1 or 2 stacked columns, depending on the viewport width.
-* Render ToolBar tools for column operations only when the Grid is in `Stacked` data layout mode.
+* Render ToolBar tools for column and edit operations only when the Grid is in `Stacked` data layout mode.
 
 >caption Using stacked data layout mode in the Blazor Grid
 
@@ -125,6 +127,9 @@ The following sample shows how to:
             <GridToolBarFilterTool>Filter</GridToolBarFilterTool>
             <GridToolBarColumnChooserTool>Columns</GridToolBarColumnChooserTool>
             <GridToolBarGroupTool>Group</GridToolBarGroupTool>
+            <GridToolBarEditTool>Edit</GridToolBarEditTool>
+            <GridToolBarSaveEditTool>Save</GridToolBarSaveEditTool>
+            <GridToolBarCancelEditTool>Cancel</GridToolBarCancelEditTool>
         }
     </GridToolBar>
     <GridColumns>

components/grid/toolbar.md

@@ -36,6 +36,8 @@ The [Blazor Grid](https://demos.telerik.com/blazor-ui/grid/overview) provides se
 | Sort | `GridToolBarSortTool` | A toggle button that opens a list of the sortable columns. Click a column to sort by it. On mobile devices, the popup renders as an `ActionSheet`. The tool also exposes an `Icon` parameter that allows you to override the default icon. |
 | SearchBox | `GridToolBarSearchBoxTool` | A [searchbox that filters multiple string columns](slug:grid-searchbox) simultaneously. |
 
+The **Edit** command button is disabled if there is no [selected Grid row](slug:grid-selection-row). The **Save** and **Cancel** buttons are disabled when there is no row in edit mode.
+
 ### Layout Tools
 
 | Tool Name | Tool Tag | Description |
@@ -84,45 +86,16 @@ Add a `<GridToolBar>` tag inside `<TelerikGrid>` to configure a toolbar, for exa
             <TelerikButton OnClick="@OnToolbarCustomClick">Custom Grid Tool</TelerikButton>
         </GridToolBarCustomTool>
 
-        <GridToolBarAddTool>
-            Add a product
-        </GridToolBarAddTool>
-
-        <GridToolBarCsvExportTool>
-            Export to CSV
-        </GridToolBarCsvExportTool>
-
-        <GridToolBarExcelExportTool>
-            Export to Excel
-        </GridToolBarExcelExportTool>
-
-        <GridToolBarFilterTool>
-            Filter
-        </GridToolBarFilterTool>
-
-        <GridToolBarSortTool>
-            Sort
-        </GridToolBarSortTool>
-
-        <GridToolBarGroupTool>
-            Group
-        </GridToolBarGroupTool>
-
-        <GridToolBarEditTool>
-            Edit
-        </GridToolBarEditTool>
-
-        <GridToolBarSaveEditTool>
-            Save
-        </GridToolBarSaveEditTool>
-
-        <GridToolBarCancelEditTool>
-            Cancel
-        </GridToolBarCancelEditTool>
-
-        <GridToolBarDeleteTool>
-            Delete
-        </GridToolBarDeleteTool>
+        <GridToolBarAddTool>Add a product</GridToolBarAddTool>
+        <GridToolBarCsvExportTool>Export to CSV</GridToolBarCsvExportTool>
+        <GridToolBarExcelExportTool>Export to Excel</GridToolBarExcelExportTool>
+        <GridToolBarFilterTool>Filter</GridToolBarFilterTool>
+        <GridToolBarSortTool>Sort</GridToolBarSortTool>
+        <GridToolBarGroupTool>Group</GridToolBarGroupTool>
+        <GridToolBarEditTool>Edit</GridToolBarEditTool>
+        <GridToolBarSaveEditTool>Save</GridToolBarSaveEditTool>
+        <GridToolBarCancelEditTool>Cancel</GridToolBarCancelEditTool>
+        <GridToolBarDeleteTool>Delete</GridToolBarDeleteTool>
 
         <GridToolBarSpacerTool />
 
@@ -141,7 +114,7 @@ Add a `<GridToolBar>` tag inside `<TelerikGrid>` to configure a toolbar, for exa
 </TelerikGrid>
 
 @code {
-    private List<Person> GridData { get; set; }
+    private List<Person> GridData { get; set; } = new();
     private IEnumerable<Person> SelectedPeople { get; set; } = Enumerable.Empty<Person>();
 
     private void OnToolbarCustomClick()
@@ -151,59 +124,57 @@ Add a `<GridToolBar>` tag inside `<TelerikGrid>` to configure a toolbar, for exa
 
     protected override void OnInitialized()
     {
-        var data = new List<Person>();
         var rand = new Random();
 
         for (int i = 0; i < 50; i++)
         {
-            data.Add(new Person()
+            GridData.Add(new Person()
             {
                 EmployeeId = i,
                 Name = "Employee " + i.ToString(),
                 HireDate = DateTime.Now.Date.AddDays(-(i * 2)),
                 AgeInYears = 20
             });
         }
-        GridData = new List<Person>(data);
     }
 
     private void CreateItem(GridCommandEventArgs args)
     {
-        var argsItem = args.Item as Person;
+        var createdItem = (Person)args.Item;
 
-        argsItem.EmployeeId = GridData.Count + 1;
+        createdItem.EmployeeId = GridData.Count + 1;
 
-        GridData.Insert(0, argsItem);
+        GridData.Insert(0, createdItem);
     }
 
     private void UpdateItem(GridCommandEventArgs args)
     {
-        var argsItem = args.Item as Person;
-        var itemForEdit = GridData.FirstOrDefault(i => i.EmployeeId == argsItem.EmployeeId);
+        var updatedItem = (Person)args.Item;
+        var itemForEdit = GridData.FirstOrDefault(i => i.EmployeeId == updatedItem.EmployeeId);
 
         if (itemForEdit != null)
         {
-            itemForEdit.AgeInYears = argsItem.AgeInYears;
-            itemForEdit.HireDate = argsItem.HireDate;
-            itemForEdit.Name = argsItem.Name;
+            itemForEdit.AgeInYears = updatedItem.AgeInYears;
+            itemForEdit.HireDate = updatedItem.HireDate;
+            itemForEdit.Name = updatedItem.Name;
         }
     }
     
     private void DeleteItem(GridCommandEventArgs args)
     {
-        var argsItem = args.Item as Person;
+        var deletedItem = (Person)args.Item;
 
-        if (GridData.Contains(argsItem))
+        if (GridData.Contains(deletedItem))
         {
-            GridData.Remove(argsItem);
+            GridData.Remove(deletedItem);
         }
     }
 
     public class Person
     {
         public int? EmployeeId { get; set; }
 
-        public string Name { get; set; }
+        public string Name { get; set; } = string.Empty;
 
         public int? AgeInYears { get; set; }