Adaptive Rendering

Updated on Oct 27, 2026

The Telerik UI Grid for ASP.NET Core supports adaptive rendering to provide a consistent experience across device types.

When users filter or edit data on mobile devices, the Grid opens a dedicated view instead of using desktop inline or popup behavior. For a runnable example, review the adaptive rendering Grid demo.

Enabling the Responsive Web Design

To enable the adaptive rendering feature, set the Mobile property to MobileMode.Auto or MobileMode.Phone:

• If set to MobileMode.Auto, the component uses adaptive rendering when viewed in a mobile browser.
• If set to MobileMode.Phone, the component always uses adaptive rendering, regardless of browser type.

Set the height option when you enable mobile rendering. Without an explicit height, each Grid view can render at a different height.

Razor

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

Razor

<kendo-grid name="grid"
            mobile-enabled="true"
            height="450">
    <datasource type="DataSourceTagHelperType.Ajax">
        <transport>
            <read url="@Url.Action("Products_Read", "Home")"/>
        </transport>
    </datasource>

</kendo-grid>

Resizing 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.

Destroying Adaptive Grids

When the Grid runs in adaptive rendering mode, it generates auxiliary markup that you must remove if you manually destroy the Grid.

To manually destroy the Grid:

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

See Also

• ASP.NET Core DataGrid Homepage

• Responsive Columns by the Grid HtmlHelper for ASP.NET Core (Demo)

• Adaptive Rendering by the Grid HtmlHelper for ASP.NET Core (Demo)

• Server-Side API