Edit this page

Adaptive Rendering

As of the Kendo UI Q3 2013 release, the Grid supports adaptive enhancements, such as changes in styling and behavior, to provide consistency to the client device experience.

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

Getting Started

Enable Adaptive Rendering

To enable the adaptive rendering feature, set the mobile property to true, phone, or tablet.

Example
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
   columns: [
     { field: "name" },
     { field: "age" },
     { command: "destroy" }
   ],
   dataSource: [
     { name: "Jane Doe", age: 30 },
     { name: "John Doe", age: 33 }
   ],
   filterable: true,
   columnMenu: true,
   mobile: true
});
</script>

Prerequisites

The Kendo UI adaptive mode requires scripts, which are normally part of the Kendo UI Mobile (Hybrid) library (kendo.mobile.min.js). However, these scripts are also included in kendo.web.min.js and kendo.all.min.js. If you are using individual widget scripts or a custom combined script, make sure the relevant scripts are included.

Pane Configuration

The mobile pane in which the adaptive Grid is placed does not automatically expand its height. To add an adaptive Grid to a Kendo UI mobile application, set the stretch configuration of the respective view to true, or explicitly define the height of the widget.

Use the stretch Option

Example
<div id="foo" data-role="view" data-init="onInit" data-stretch="true">
    <div id="grid"></div>
</div>

<script>
    var gridConfig = {
        columns: [
            { field: "name" },
            { field: "age" },
            { command: "destroy" }
        ],
        dataSource: [
            { name: "Jane Doe", age: 30 },
            { name: "John Doe", age: 33 }
        ],
        filterable: true,
        columnMenu: true,
        mobile: "phone"
    };

    function onInit() {
        $("#grid").kendoGrid(gridConfig);
    }

    var app = new kendo.mobile.Application();
</script>

Use the height Option

Example
<div id="foo" data-role="view" data-init="onInit">
    <div id="grid"></div>
</div>

<script>
    var gridConfig = {
        columns: [
            { field: "name" },
            { field: "age" },
            { command: "destroy" }
        ],
        dataSource: [
            { name: "Jane Doe", age: 30 },
            { name: "John Doe", age: 33 }
        ],
        filterable: true,
        columnMenu: true,
        mobile: "phone",
        height: "140px" //grid will be 140px height
    };

    function onInit() {
        $("#grid").kendoGrid(gridConfig);
    }

    var app = new kendo.mobile.Application();
</script>

Resize 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 is able to resize the column by dragging.

Figure 1. Grid with resizeable columns on a mobile device

Grid Specifics

Apply Height and Position Styles to Parent Grid Elements

This section applies to the following cases:

  • When multiple adaptive Grids are used on the same page.
  • When the Grid is not the only content on the page.

Each adaptive Grid is rendered inside a separate mobile pane. Because the position of the panes is absolute, the panes overlap. To avoid this behavior, wrap each Grid inside a <div> container that is relatively positioned and has a set height. The absolute position is required for the transition between main and edit views to work correctly.

The example below demonstrates how to add multiple adaptive Grids to the same page.

Example
<div class="adaptive-grid-wrapper">
    <div id="grid1"></div>
</div>

<div class="adaptive-grid-wrapper">
    <div id="grid2"></div>
</div>
<style>
    .adaptive-grid-wrapper {
        position: relative;
        height: 130px;
     }
</style>
<script>
    var gridConfig = {
        columns: [
            { field: "name" },
            { field: "age" },
            { command: "destroy" }
        ],
        dataSource: [
            { name: "Jane Doe", age: 30 },
            { name: "John Doe", age: 33 }
        ],
        filterable: true,
        columnMenu: true,
        mobile: "phone"
    };

    $("#grid1").kendoGrid(gridConfig);
    $("#grid2").kendoGrid(gridConfig);
</script>

Destroy the Adaptive Grid

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

The recommended approach is to call kendo.destroy() over the closest .km-pane-wrapper ancestor of the Grid, which is created around the Grid widget. Then, remove the whole .km-pane-wrapper element from the DOM. To recreate the Grid, insert a new <div> at the same place where the previous Grid <div> was placed initially.

See Also

For how-to examples on the Kendo UI Grid widget, browse its How To documentation folder.