Skip to content

Commit ee38299

Browse files
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]>
1 parent b7844ef commit ee38299

File tree

3 files changed

+66
-2
lines changed

3 files changed

+66
-2
lines changed

components/grid/overview.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -161,6 +161,7 @@ The following table lists Grid parameters, which are not discussed elsewhere in
161161

162162
| Parameter | Type and Default&nbsp;Value | Description |
163163
| --- | --- | --- |
164+
| `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`. |
164165
| `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). |
165166
| `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). |
166167
| `Navigable` | `bool` | Enables [keyboard navigation](slug:accessibility-overview#keyboard-navigation). |

components/grid/toolbar.md

Lines changed: 62 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,15 @@ The [Blazor Grid](https://demos.telerik.com/blazor-ui/grid/overview) provides se
2323
| Tool Name | Tool Tag | Description |
2424
| --- | --- | --- |
2525
| Add | `GridToolBarAddTool` | An add command that fires the [`OnAdd` event](slug:grid-editing-overview#events). |
26+
| 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. |
2627
| CsvExport | `GridToolBarCsvExportTool` | An export command for CSV files that fires the [`OnBeforeExport` event](slug:grid-export-events#onbeforeexport). |
28+
| Delete | `GridToolBarDeleteTool` | Deletes the selected row. Row selection and `Inline` or `Popup` editing mode are required. |
29+
| Edit | `GridToolBarEditTool` | Enters edit mode for the selected row. Row selection and `Inline` or `Popup` editing mode are required. |
2730
| ExcelExport | `GridToolBarExcelExportTool` | An export command for Excel files that fires the [`OnBeforeExport` event](slug:grid-export-events#onbeforeexport). |
31+
| 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. |
32+
| 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. |
33+
| Save | `GridToolBarSaveEditTool` | Saves the changes for the selected row. Row selection and `Inline` or `Popup` editing mode are required. |
34+
| 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. |
2835
| SearchBox | `GridToolBarSearchBoxTool` | A searchbox that filters multiple Grid columns simultaneously. |
2936

3037
### Layout Tools
@@ -52,9 +59,24 @@ Add a `<GridToolBar>` tag inside `<TelerikGrid>` to configure a toolbar, for exa
5259
````RAZOR
5360
<TelerikGrid Data=@GridData
5461
EditMode="@GridEditMode.Inline"
62+
FilterMode="GridFilterMode.FilterMenu"
63+
Groupable="true"
64+
Sortable="true"
5565
Pageable="true"
66+
SelectionMode="@GridSelectionMode.Multiple"
67+
@bind-SelectedItems="@SelectedPeople"
68+
AdaptiveMode="AdaptiveMode.Auto"
5669
OnUpdate=@UpdateItem
57-
OnCreate=@CreateItem>
70+
OnCreate=@CreateItem
71+
OnDelete="@DeleteItem">
72+
<GridSettings>
73+
<GridToolBarSettings OverflowMode="GridToolBarOverflowMode.Scroll"
74+
ScrollButtonsPosition="GridToolBarScrollButtonsPosition.Start"
75+
ScrollButtonsVisibility="GridToolBarScrollButtonsVisibility.Visible"
76+
ShowIconOnlyTools="true"
77+
ShowInactiveTools="true">
78+
</GridToolBarSettings>
79+
</GridSettings>
5880
<GridToolBar>
5981
<GridToolBarCustomTool>
6082
<TelerikButton OnClick="@OnToolbarCustomClick">Custom Grid Tool</TelerikButton>
@@ -72,6 +94,34 @@ Add a `<GridToolBar>` tag inside `<TelerikGrid>` to configure a toolbar, for exa
7294
Export to Excel
7395
</GridToolBarExcelExportTool>
7496
97+
<GridToolBarFilterTool>
98+
Filter
99+
</GridToolBarFilterTool>
100+
101+
<GridToolBarSortTool>
102+
Sort
103+
</GridToolBarSortTool>
104+
105+
<GridToolBarGroupTool>
106+
Group
107+
</GridToolBarGroupTool>
108+
109+
<GridToolBarEditTool>
110+
Edit
111+
</GridToolBarEditTool>
112+
113+
<GridToolBarSaveEditTool>
114+
Save
115+
</GridToolBarSaveEditTool>
116+
117+
<GridToolBarCancelEditTool>
118+
Cancel
119+
</GridToolBarCancelEditTool>
120+
121+
<GridToolBarDeleteTool>
122+
Delete
123+
</GridToolBarDeleteTool>
124+
75125
<GridToolBarSpacerTool />
76126
77127
<GridToolBarSearchBoxTool />
@@ -90,6 +140,7 @@ Add a `<GridToolBar>` tag inside `<TelerikGrid>` to configure a toolbar, for exa
90140
91141
@code {
92142
private List<Person> GridData { get; set; }
143+
private IEnumerable<Person> SelectedPeople { get; set; } = Enumerable.Empty<Person>();
93144
94145
private void OnToolbarCustomClick()
95146
{
@@ -135,6 +186,16 @@ Add a `<GridToolBar>` tag inside `<TelerikGrid>` to configure a toolbar, for exa
135186
itemForEdit.Name = argsItem.Name;
136187
}
137188
}
189+
190+
private void DeleteItem(GridCommandEventArgs args)
191+
{
192+
var argsItem = args.Item as Person;
193+
194+
if (GridData.Contains(argsItem))
195+
{
196+
GridData.Remove(argsItem);
197+
}
198+
}
138199
139200
public class Person
140201
{

components/pager/overview.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,13 +80,15 @@ The Blazor Pager provides various parameters that allow you to configure the com
8080

8181
| Parameter | Type and Default&nbsp;Value | Description |
8282
| ----------- | ----------- | ----------- |
83-
|`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.
83+
|`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. |
84+
| `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. |
8485
| `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`). |
8586
| `Class` | `string` | Renders a custom CSS class to the `<div class="k-pager-wrap">` element. |
8687
| `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). |
8788
| `PageSize` | `int` | The number of items to display on a page. Supports two-way binding. |
8889
| `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. |
8990
| `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. |
91+
| `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. |
9092
| `ShowInfo` | `bool` <br /> (`true`) | Defines whether the information about the current page and the total number of records is present. |
9193
| `Total` | `int` | Represents the total count of items in the pager. |
9294

0 commit comments

Comments
 (0)