docs(Grid): add filter, sort, editing and group tools with pager adaptiveness (#2945)

* docs(Grid): add filter, sort and group tools

* chore(Grid): polish adaptive docs

* chore(Grid): add pager adaptiveness, editing and address comments

* chore(Grid): address latest comments

* chore(Grid): fix typos

* chore(Grid): remove redundant add tool

* Update components/grid/overview.md

Co-authored-by: Nadezhda Tacheva <[email protected]>

* Update components/grid/toolbar.md

Co-authored-by: Nadezhda Tacheva <[email protected]>

* Update components/grid/toolbar.md

Co-authored-by: Nadezhda Tacheva <[email protected]>

* Update components/pager/overview.md

Co-authored-by: Nadezhda Tacheva <[email protected]>

---------

Co-authored-by: Nadezhda Tacheva <[email protected]>

Author: xristianstefanov

components/grid/overview.md

@@ -161,6 +161,7 @@ The following table lists Grid parameters, which are not discussed elsewhere in
 
 | Parameter | Type and Default Value | Description |
 | --- | --- | --- |
+| `AdaptiveMode` | `AdaptiveMode` enum <br /> (`None`) | Defines the adaptive mode of the Grid. When set to `Auto`, and the window width is below [`768px` or `RootComponentAdaptiveSettings.Medium`](slug:adaptive-rendering#rendering-specifics), the Grid will render ins inner popups (for example, FilterMenu, ContextMenu and more) as an `ActionSheet`. |
 | `Class` | `string` | Additional CSS class for the `<div class="k-grid">` element. Use it to apply custom styles or [override the theme](slug:themes-override). For example, [change the Grid font size](slug:grid-kb-change-font-size). |
 | `Height` | `string` | A height style in [any supported CSS unit](slug:common-features/dimensions). You can also [make the Grid height change automatically with the browser window](slug:grid-kb-adjust-height-with-browser). |
 | `Navigable` | `bool` | Enables [keyboard navigation](slug:accessibility-overview#keyboard-navigation). |

components/grid/toolbar.md

@@ -23,8 +23,15 @@ The [Blazor Grid](https://demos.telerik.com/blazor-ui/grid/overview) provides se
 | Tool Name | Tool Tag | Description |
 | --- | --- | --- |
 | Add | `GridToolBarAddTool` | An add command that fires the [`OnAdd` event](slug:grid-editing-overview#events). |
+| Cancel | `GridToolBarCancelEditTool` | Cancels the changes for the selected row. [Row selection](slug:grid-selection-row) and [`Inline`](slug:grid-editing-inline) or [`Popup`](slug:grid-editing-popup) editing mode are required. |
 | CsvExport | `GridToolBarCsvExportTool` | An export command for CSV files that fires the [`OnBeforeExport` event](slug:grid-export-events#onbeforeexport). |
+| Delete | `GridToolBarDeleteTool` | Deletes the selected row. Row selection and `Inline` or `Popup` editing mode are required. |
+| Edit | `GridToolBarEditTool` | Enters edit mode for the selected row. Row selection and `Inline` or `Popup` editing mode are required. |
 | ExcelExport | `GridToolBarExcelExportTool` | An export command for Excel files that fires the [`OnBeforeExport` event](slug:grid-export-events#onbeforeexport). |
+| Filter | `GridToolBarFilterTool` | A toggle button in the Grid’s toolbar that opens a UI option for filtering. On desktop screens, it displays a popup with a filter menu; on mobile devices, it renders an `ActionSheet`. The filter component has two views: one for selecting the column to filter, and another for applying the filter to the selected column. The tool also exposes an `Icon` parameter that allows you to override the default icon.  |
+| Group | `GridToolBarGroupTool` | A toggle button in the Grid’s toolbar that opens a popup listing the groupable columns—click a column to group by it. On mobile devices, the popup is rendered as an `ActionSheet`. The tool also exposes an `Icon` parameter that allows you to override the default icon. |
+| Save | `GridToolBarSaveEditTool` | Saves the changes for the selected row. Row selection and `Inline` or `Popup` editing mode are required. |
+| Sort | `GridToolBarSortTool` | A toggle button in the Grid’s toolbar that opens a popup listing the sortable columns—click a column to sort by it. On mobile devices, the popup is rendered 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 Grid columns simultaneously. |
 
 ### Layout Tools
@@ -52,9 +59,24 @@ Add a `<GridToolBar>` tag inside `<TelerikGrid>` to configure a toolbar, for exa
 ````RAZOR
 <TelerikGrid Data=@GridData
              EditMode="@GridEditMode.Inline"
+             FilterMode="GridFilterMode.FilterMenu"
+             Groupable="true"
+             Sortable="true"
              Pageable="true"
+             SelectionMode="@GridSelectionMode.Multiple"
+             @bind-SelectedItems="@SelectedPeople"
+             AdaptiveMode="AdaptiveMode.Auto"
              OnUpdate=@UpdateItem
-             OnCreate=@CreateItem>
+             OnCreate=@CreateItem
+             OnDelete="@DeleteItem">
+    <GridSettings>
+        <GridToolBarSettings OverflowMode="GridToolBarOverflowMode.Scroll"
+                             ScrollButtonsPosition="GridToolBarScrollButtonsPosition.Start"
+                             ScrollButtonsVisibility="GridToolBarScrollButtonsVisibility.Visible"
+                             ShowIconOnlyTools="true"
+                             ShowInactiveTools="true">
+        </GridToolBarSettings>
+    </GridSettings>
     <GridToolBar>
         <GridToolBarCustomTool>
             <TelerikButton OnClick="@OnToolbarCustomClick">Custom Grid Tool</TelerikButton>
@@ -72,6 +94,34 @@ Add a `<GridToolBar>` tag inside `<TelerikGrid>` to configure a toolbar, for exa
             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 />
 
         <GridToolBarSearchBoxTool />
@@ -90,6 +140,7 @@ Add a `<GridToolBar>` tag inside `<TelerikGrid>` to configure a toolbar, for exa
 
 @code {
     private List<Person> GridData { get; set; }
+    private IEnumerable<Person> SelectedPeople { get; set; } = Enumerable.Empty<Person>();
 
     private void OnToolbarCustomClick()
     {
@@ -135,6 +186,16 @@ Add a `<GridToolBar>` tag inside `<TelerikGrid>` to configure a toolbar, for exa
             itemForEdit.Name = argsItem.Name;
         }
     }
+    
+    private void DeleteItem(GridCommandEventArgs args)
+    {
+        var argsItem = args.Item as Person;
+
+        if (GridData.Contains(argsItem))
+        {
+            GridData.Remove(argsItem);
+        }
+    }
 
     public class Person
     {

components/pager/overview.md

@@ -80,13 +80,15 @@ The Blazor Pager provides various parameters that allow you to configure the com
 
 | Parameter | Type and Default Value | Description |
 | ----------- | ----------- | ----------- |
-|`Adaptive` | `bool` <br /> (`true`) | Defines whether pager elements should be changed based on the screen size. When enabled, the Pager will hide its `Pager Info` and `PageSize Dropdownlist` if they cannot fit in the available space. In the smallest resolution, the page buttons will be rendered as a select element.
+|`Adaptive` | `bool` <br /> (`true`) | Defines whether pager elements change based on the screen size. When enabled, the Pager will hide its `Pager Info` and `PageSize Dropdownlist` if they cannot fit in the available space. In the smallest resolution, the page buttons will be rendered as a select element. This parameter will be deprecated in the next major version in favor of the new `Responsive` parameter. |
+| `AdaptiveMode` | `AdaptiveMode` enum <br /> (`None`) | Defines the adaptive mode of the Pager. When set to `Auto`, and the window width is below [`768px` or `RootComponentAdaptiveSettings.Medium`](slug:adaptive-rendering#rendering-specifics), components with popups will render them as an `ActionSheet`. In this case, the page sizes dropdown only. |
 | `ButtonCount` | `int` | The maximum number of page buttons that will be visible. To take effect, `ButtonCount` must be smaller than the page count (`ButtonCount < Total / PageSize`). |
 | `Class` | `string` | Renders a custom CSS class to the `<div class="k-pager-wrap">` element. |
 | `Page` | `int` | Represents the current page of the pager. The first page has an index of `1`. Supports two-way binding. If no value is provided, the parameter will default to the first page (1), but you should always use this parameter value in order to successfully use the component. If you don't use two-way binding and you don't update the value of the parameter after the user action, the pager UI will not reflect the change and will revert to the previous value (page index). |
 | `PageSize` | `int` | The number of items to display on a page. Supports two-way binding. |
 | `PageSizes` | `List<int?>` | Allows users to change the page size via a DropDownList. The attribute configures the DropDownList options. A `null` item in the `PageSizes` `List` will render an "All" option. By default, the Pager DropDownList is not displayed. You can also set `PageSizes` to `null` programmatically to remove the DropDownList at any time. |
 | `InputType` | `PagerInputType` enum <br /> (`Buttons`) | Determines if the pager will show numeric buttons to go to a specific page, or a textbox to type the page index. The arrow buttons are always visible. The `PagerInputType` enum accepts values `Buttons` (default) or `Input`. When `Input` is used, the page index will change when the textbox is blurred, or when the user hits Enter. This is to avoid unintentional data requests. |
+| `Responsive` | `bool` <br /> (`true`) | Defines whether pager elements change based on the screen size. When enabled, the Pager will hide its `Pager Info` and `PageSize Dropdownlist` if they cannot fit in the available space. In the smallest resolution, the page buttons will be rendered as a select element. |
 | `ShowInfo` | `bool` <br /> (`true`) | Defines whether the information about the current page and the total number of records is present. |
 | `Total` | `int` | Represents the total count of items in the pager. |