Adaptive Rendering
The Telerik 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, the system slides in a new screen for the user, which is a departure from the desktop-like inline and popup behaviors. For a runnable example, refer to the demo on implementing the responsive web design in the Grid.
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 will use adaptive rendering when viewed on a mobile browser. - If set to
MobileMode.Phone
, the component will be forced to use adaptive rendering regardless of the browser type.
Important: With the mobile rendering, we recommend to set up
height
as well. Without setting an explicit height, every view of the grid might have a different height.
@(Html.Kendo().Grid<ProductViewModel>()
.Name("grid")
.Mobile()
.HtmlAttributes(new { style = "height:450px;" })
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Products_Read", "Home"))
)
)
<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 is in its adaptive rendering mode, it generates auxiliary markup which needs to be removed if the Grid is to be destroyed
manually.
To manually destroy the Grid:
- Call the Kendo UI for jQuery
kendo.destroy()
method over the closest.k-pane-wrapper
ancestor which is created around the Grid. - Remove the whole
.k-pane-wrapper
element from the DOM.