Adaptive Rendering

The Kendo UI Grid for ASP.NET Core provides consistency to the customer experience on any device by supporting adaptive enhancements.

For example, when you filter or edit data on mobile, Kendo UI slides in a new screen for the user, which is a departure from the desktop-like inline and popup behaviors. To see these features in action, refer to the adaptive rendering demo.

Enabling Responsive Design

To enable the adaptive rendering feature, use the Mobile method.

Example
@(Html.Kendo().Grid<ProductViewModel>()
    .Name("grid")
    .Mobile()
    .HtmlAttributes(new { style = "height:450px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("Products_Read", "Home"))
    )
)

Configuring Panes on Mobile

The Pane in which the adaptive Grid is placed does not automatically expand its height. Thus, define an explicit pixel Grid height.

The following example demonstrates how to apply the height option.

Example
@(Html.Kendo().Grid<ProductViewModel>()
    .Name("grid")
    .Mobile(MobileMode.Phone)
    .HtmlAttributes(new { style = "height:450px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("Products_Read", "Home"))
    )
)

Resizing of Columns

The column resizing feature on touch screen devices is triggered when the user holds a finger on the respective column header. When the resizing icon appears, the user can resize the column by dragging.

Figure 1: A Grid with resizable columns on a mobile device

Grid Resizable Columns on Mobile

Destroying Adaptive Grids

When in adaptive mode, the Grid generates auxiliary markup which needs to be removed if the widget is to be destroyed manually.

To manually destroy the Grid:

  1. Call kendo.destroy() over the closest .k-pane-wrapper ancestor which is created around the Grid widget.
  2. Remove the whole .k-pane-wrapper element from the DOM.

See Also

In this article
Not finding the help you need? Improve this article