Skip to content

[On hold] docs(Grid): add filter, sort and group tools #2945

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

[On hold] docs(Grid): add filter, sort and group tools #2945

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
07fd8be
docs(Grid): add filter, sort and group tools
xristianstefanov May 9, 2025
85598b6
chore(Grid): polish adaptive docs
xristianstefanov May 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions components/grid/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`, components with popups will render them as an `ActionSheet`. |
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You may want to use "adaptive mode" as an anchor leading to an article or a section dedicated to that topic.

| `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). |
Expand Down
19 changes: 19 additions & 0 deletions components/grid/toolbar.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,9 @@ The [Blazor Grid](https://demos.telerik.com/blazor-ui/grid/overview) provides se
| Add | `GridToolBarAddTool` | An add command that fires the [`OnAdd` event](slug:grid-editing-overview#events). |
| CsvExport | `GridToolBarCsvExportTool` | An export command for CSV files that fires the [`OnBeforeExport` event](slug:grid-export-events#onbeforeexport). |
| 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 filter interface. On desktop screens, it displays a popup with a filter menu; on mobile devices, it renders as an `ActionSheet`. The 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 `Icon` parameter that allows you to override the default icon. |
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
| Filter | `GridToolBarFilterTool` | A toggle button in the Grid’s toolbar that opens a filter interface. On desktop screens, it displays a popup with a filter menu; on mobile devices, it renders as an `ActionSheet`. The 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 `Icon` parameter that allows you to override the default icon. |
| Filter | `GridToolBarFilterTool` | A toggle button in the Grid’s toolbar that opens a filter interface. On desktop screens, it displays a popup with a filter menu; on mobile devices, it renders as an `ActionSheet`. The 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 `Icon` parameter that allows you to override the default icon. |
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Our style guide recommends using the em dash without spaces on either side.

Suggested change
| 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 `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. |

| 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 `Icon` parameter that allows you to override the default icon. |
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
| 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 `Icon` parameter that allows you to override the default icon. |
| 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
Expand Down Expand Up @@ -52,7 +55,11 @@ 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"
AdaptiveMode="AdaptiveMode.Auto"
OnUpdate=@UpdateItem
OnCreate=@CreateItem>
<GridToolBar>
Expand All @@ -72,6 +79,18 @@ 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>

<GridToolBarSpacerTool />

<GridToolBarSearchBoxTool />
Expand Down