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() 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.
The adaptive tools are not rendered or supported when the toolbar uses the
Overflowmode.
Sorting
To enable sorting in adaptive mode, configure the Grid with Sortable():
- In single-column sorting mode, the sorting popup will close immediately after a field is selected, and the Grid will be sorted accordingly.
- In multi-column or mixed-column sorting modes, the popup will remain open until the user clicks the Done button. Sorting is applied in the background as fields are selected.
@(Html.Kendo().Grid<ProductViewModel>()
.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.
@(Html.Kendo().Grid<ProductViewModel>()
.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.
@(Html.Kendo().Grid<ProductViewModel>()
.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.
@(Html.Kendo().Grid<ProductViewModel>()
.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.
@(Html.Kendo().Grid<ProductViewModel>()
.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.
@(Html.Kendo().Grid<ProductViewModel>()
.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"))
)
)