diff --git a/components/grid/columns/stacked.md b/components/grid/columns/stacked.md
index 98bf967b0..9d0d8dc97 100644
--- a/components/grid/columns/stacked.md
+++ b/components/grid/columns/stacked.md
@@ -79,9 +79,11 @@ 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` command buttons](slug:components/grid/features/toolbar#command-tools).
+* Hierarchy relies on an expand/collapse button, which renders below the stacked table row content.
## Example
@@ -89,7 +91,7 @@ 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:
Filter
Columns
Group
+ Edit
+ Save
+ Cancel
}
diff --git a/components/grid/toolbar.md b/components/grid/toolbar.md
index bf00e22b3..d8ce3949d 100644
--- a/components/grid/toolbar.md
+++ b/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 tool is disabled if there is no [selected Grid row](slug:grid-selection-row). The `Save` and `Cancel` tools are disabled when there is no row in edit mode.
+
### Layout Tools
| Tool Name | Tool Tag | Description |
@@ -84,45 +86,16 @@ Add a `` tag inside `` to configure a toolbar, for exa
Custom Grid Tool
-
- Add a product
-
-
-
- Export to CSV
-
-
-
- Export to Excel
-
-
-
- Filter
-
-
-
- Sort
-
-
-
- Group
-
-
-
- Edit
-
-
-
- Save
-
-
-
- Cancel
-
-
-
- Delete
-
+ Add a product
+ Export to CSV
+ Export to Excel
+ Filter
+ Sort
+ Group
+ Edit
+ Save
+ Cancel
+ Delete
@@ -141,7 +114,7 @@ Add a `` tag inside `` to configure a toolbar, for exa
@code {
- private List GridData { get; set; }
+ private List GridData { get; set; } = new();
private IEnumerable SelectedPeople { get; set; } = Enumerable.Empty();
private void OnToolbarCustomClick()
@@ -151,12 +124,11 @@ Add a `` tag inside `` to configure a toolbar, for exa
protected override void OnInitialized()
{
- var data = new List();
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(),
@@ -164,38 +136,37 @@ Add a `` tag inside `` to configure a toolbar, for exa
AgeInYears = 20
});
}
- GridData = new List(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);
}
}
@@ -203,7 +174,7 @@ Add a `` tag inside `` to configure a toolbar, for exa
{
public int? EmployeeId { get; set; }
- public string Name { get; set; }
+ public string Name { get; set; } = string.Empty;
public int? AgeInYears { get; set; }