# ToolBar Adaptive Tools The Telerik UI Grid for ASP.NET MVC supports rendering selected toolbar tools in adaptive mode, starting with version Q2 2025. This feature improves usability on small screens by displaying sorting, filtering, grouping, and editing UI elements in a mobile-friendly ActionSheet. To enable adaptive mode for the Grid, set the [`AdaptiveMode()`](https://www.telerik.com/aspnet-mvc/documentation/api/kendo.mvc.ui.fluent/gridbuilder#adaptivemode) configuration option. The tools appear in the ActionSheet automatically on small and medium screen sizes. To ensure that sorting, filtering, and grouping tools work as expected, configure the respective options—`Sortable()`, `Filterable()`, and `Groupable()`. If the Grid is configured for `Popup` editing, an ActionSheet is displayed for editing or creating records. > important The adaptive tools are not rendered or supported when the toolbar uses the `Overflow` mode. ## Sorting To enable sorting in adaptive mode, configure the Grid with `Sortable()`: * In [single-column sorting mode](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/sorting#single-column-sorting), the sorting popup will close immediately after a field is selected, and the Grid will be sorted accordingly. * In [multi-column](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/sorting#multi-column-sorting) or [mixed-column](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/sorting#mixed-column-sorting) sorting modes, the popup will remain open until the user clicks the **Done** button. Sorting is applied in the background as fields are selected. ```Razor HtmlHelper @(Html.Kendo().Grid() .Name("grid") .ToolBar(toolbar => toolbar.Sort()) .Columns(columns => { columns.Bound(p => p.ProductName); columns.Bound(p => p.UnitPrice); columns.Bound(p => p.UnitsInStock); }) .Pageable() .Sortable(s => s.SortMode(GridSortMode.MultipleColumn).ShowIndexes(true)) .AdaptiveMode(AdaptiveMode.Auto) .DataSource(dataSource => dataSource .Ajax() .PageSize(20) .Read(read => read.Action("Adaptive_Tool_Read", "Grid")) ) ) ``` ## Filtering To enable filtering in adaptive mode, define the `Filterable()` option. The specified filtering settings also apply to the adaptive filtering tool. ```Razor HtmlHelper @(Html.Kendo().Grid() .Name("grid") .ToolBar(toolbar => toolbar.Filter()) .Columns(columns => { columns.Bound(p => p.ProductName); columns.Bound(p => p.UnitPrice).Filterable(f => f.Multi(true)); columns.Bound(p => p.UnitsInStock); }) .Pageable() .Filterable(f => f.Extra(false)) .AdaptiveMode(AdaptiveMode.Auto) .DataSource(dataSource => dataSource .Ajax() .PageSize(20) .Read(read => read.Action("Adaptive_Tool_Read", "Grid")) ) ) ``` ## Grouping The adaptive grouping tool allows users to add, remove, and reorder grouped columns. By default, users can rearrange groups by using drag-and-drop within the popup. To enable the adaptive grouping tool, specify the `Groupable()` option and add the `Group` tool to the Grid toolbar. Use `ReorderButtons(true)` to show up and down arrow buttons in the popup for reordering groups. ```Razor HtmlHelper @(Html.Kendo().Grid() .Name("grid") .ToolBar(toolbar => toolbar.Group()) .Columns(columns => { columns.Bound(p => p.ProductName); columns.Bound(p => p.UnitPrice); columns.Bound(p => p.UnitsInStock); }) .Pageable() .Groupable() .AdaptiveMode(AdaptiveMode.Auto) .DataSource(dataSource => dataSource .Ajax() .PageSize(20) .Read(read => read.Action("Adaptive_Tool_Read", "Grid")) ) ) ``` ## Editing The Grid supports editing in adaptive mode for all available editing modes: `Popup`, `InLine`, and `InCell`. When you use `Popup` or `InLine` Grid edit mode, you must enable the `Selectable()` configuration option to enable editing or deleting rows in adaptive mode. For `InCell` editing, `Selectable()` is required only for deleting rows. When multiple rows are selected, the data operations will apply to the most recently selected row. ### Popup Editing In adaptive mode, when the Grid uses `Popup` editing, the Edit and Create actions open a mobile-friendly ActionSheet that allows users to add or update data in a compact layout for small screens. To delete a record, the user must select the respective row and click the **Delete** toolbar button. ```Razor HtmlHelper @(Html.Kendo().Grid() .Name("grid") .ToolBar(toolbar => toolbar.Items(i => { i.Create(); i.Edit(); i.Spacer(); i.Destroy(); })) .Columns(columns => { columns.Bound(p => p.ProductName); columns.Bound(p => p.UnitPrice).Width(150); columns.Bound(p => p.UnitsInStock).Width(150); }) .Pageable() .Filterable() .Sortable() .AdaptiveMode(AdaptiveMode.Auto) .Selectable(s => s.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row)) .Editable(e => e.Mode(GridEditMode.PopUp)) .DataSource(dataSource => dataSource .Ajax() .PageSize(20) .Model(model => { model.Id(p => p.ProductID); model.Field(p => p.ProductID).Editable(false); model.Field(p => p.Category).DefaultValue( ViewData["defaultCategory"] as Kendo.Mvc.Examples.Models.CategoryViewModel); }) .Create(update => update.Action("Adaptive_Tool_Create", "Grid")) .Read(read => read.Action("Adaptive_Tool_Read", "Grid")) .Update(update => update.Action("Adaptive_Tool_Update", "Grid")) .Destroy(update => update.Action("Adaptive_Tool_Destroy", "Grid")) ) ) ``` ### InLine Editing In adaptive mode, when using `InLine` editing mode, the Grid displays editable fields directly in the selected row while the rest of the Grid remains visible. On small screens, the editing UI is optimized in an ActionSheet. ```Razor HtmlHelper @(Html.Kendo().Grid() .Name("grid") .ToolBar(toolbar => toolbar.Items(i => { i.Create(); i.Edit(); i.Save(); i.CancelEdit(); })) .Columns(columns => { columns.Bound(p => p.ProductName); columns.Bound(p => p.UnitPrice).Width(150); columns.Bound(p => p.UnitsInStock).Width(150); }) .Pageable() .Filterable() .Sortable() .AdaptiveMode(AdaptiveMode.Auto) .Selectable(s => s.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row)) .Editable(e => e.Mode(GridEditMode.InLine)) .DataSource(dataSource => dataSource .Ajax() .PageSize(20) .Model(model => { model.Id(p => p.ProductID); model.Field(p => p.ProductID).Editable(false); model.Field(p => p.Category).DefaultValue( ViewData["defaultCategory"] as Kendo.Mvc.Examples.Models.CategoryViewModel); }) .Create(update => update.Action("Adaptive_Tool_Create", "Grid")) .Read(read => read.Action("Adaptive_Tool_Read", "Grid")) .Update(update => update.Action("Adaptive_Tool_Update", "Grid")) .Destroy(update => update.Action("Adaptive_Tool_Destroy", "Grid")) ) ) ``` ### InCell Editing In adaptive mode, `InCell` editing allows users to edit individual cells by clicking them. After a cell is edited and loses focus, the toolbar displays the **Save changes** and **Cancel changes** buttons. To delete a specified record, the user must first select the row, then click the **Delete** button in the toolbar. ```Razor HtmlHelper @(Html.Kendo().Grid() .Name("grid") .ToolBar(toolbar => toolbar.Items(i => { i.Create(); i.Save(); i.CancelEdit(); i.Destroy(); })) .Columns(columns => { columns.Bound(p => p.ProductName); columns.Bound(p => p.UnitPrice).Width(150); columns.Bound(p => p.UnitsInStock).Width(150); }) .Pageable() .Filterable() .Sortable() .AdaptiveMode(AdaptiveMode.Auto) .Selectable(s => s.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row)) .Editable(e => e.Mode(GridEditMode.InCell)) .DataSource(dataSource => dataSource .Ajax() .PageSize(20) .Model(model => { model.Id(p => p.ProductID); model.Field(p => p.ProductID).Editable(false); model.Field(p => p.Category).DefaultValue( ViewData["defaultCategory"] as Kendo.Mvc.Examples.Models.CategoryViewModel); }) .Create(update => update.Action("Adaptive_Tool_Create", "Grid")) .Read(read => read.Action("Adaptive_Tool_Read", "Grid")) .Update(update => update.Action("Adaptive_Tool_Update", "Grid")) .Destroy(update => update.Action("Adaptive_Tool_Destroy", "Grid")) ) ) ``` ## See Also * [ASP.NET MVC Grid Overview](https://www.telerik.com/aspnet-mvc/grid) * [Adaptive Tools Demo](https://demos.telerik.com/aspnet-mvc/grid/toolbar-tools) * [Adaptive Tools Editing Demo](https://demos.telerik.com/aspnet-mvc/grid/toolbar-editing) * [Server-Side API](https://www.telerik.com/aspnet-mvc/documentation/api/grid)