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 smaller screens by displaying sorting, filtering, grouping, and editing UI elements in a mobile-friendly ActionSheet.
To enable the adaptive mode of the Grid, set the AdaptiveMode() configuration option.
The tools appear in the ActionSheet automatically on small or medium screen sizes. To ensure that the sorting, filtering, and grouping tools function as expected, specify the respective options—Sortable(), Filterable(), and Groupable(). If the Grid is configured for Popup editing, an ActionSheet will be 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 filterable settings will be applied also in the filter adaptive 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, groups can be rearranged by using drag-and-drop within the popup.
To enable the adaptive grouping tool, specify the Groupable() option and add the Group tool in the Grid's toolbar. Use ReorderButtons(true) to show arrow up and down arrow buttons in the popup for reordering of the 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 using 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 needed 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, allowing users to input or update data in a compact and responsive layout suitable for smaller 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 the editable fields directly within the selected row while the rest of the Grid remains visible. On smaller screens, the editing UI is optimized within an ActionSheet to maintain usability.
@(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, the InCell editing allows users to edit individual cells by clicking into 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"))
)
)