The Kendo Mobile ListView widget is used to display flat or grouped list of items. It can be either used in unbound mode by enhancing an HTML ul element, or bound to a DataSource instance.

Getting Started

The Kendo mobile Application automatically initializes the mobile ListView for every ul element with role data attribute set to listview present in the views' markup. Alternatively, it can be initialized using a jQuery selector. The mobile ListView element can contain one or more li elements.

Initialize mobile ListView using a role data attribute

<ul data-role="listview">
  <li>Foo</li>
  <li>Bar</li>
</ul>

Initialize mobile ListView using a jQuery selector

<ul id="listView"></ul>
<script>
var listView = $("#listView").kendoMobileListView();
</script>

Inset mobile ListView

In iOS, the mobile ListView appearance can be changed to inset, to achieve an effect similar to iOS grouped table views, where the list items are padded from the container, and have rounded corners. This can be accomplished by setting the style data attribute to inset. Note: This setting won't affect the appearance of the mobile ListView on Android devices.

Create Inset mobile ListView

<ul data-role="listview" data-style="inset">
  <li>Foo</li>
  <li>Bar</li>
</ul>

Grouped mobile ListView

The mobile ListView can display items in groups, with optional headers. This can be achieved by nesting unordered lists in items, and setting the widget's element type data attribute to group.

Create grouped mobile ListView

<ul data-role="listview" data-type="group">
    <li>
        Foo
        <ul>
            <li>Bar</li>
            <li>Baz</li>
        </ul>
    </li>
    <li>
        Bar
        <ul>
            <li>Bar</li>
            <li>Qux</li>
        </ul>
    </li>
</ul>

Binding to Data

The mobile ListView can be bound to both local JavaScript arrays and remote data via the Kendo DataSource component. Local JavaScript arrays are appropriate for limited value options, while remote data binding is better for larger data sets.

Bind mobile ListView to a local data source.

$(document).ready(function() {
    $("#listview").kendoMobileListView({
        dataSource: kendo.data.DataSource.create(["foo", "bar", "baz"])
     });
});

Customizing Item Templates

The mobile ListView leverages Kendo UI high-performance Templates to give you complete control over item rendering. For a complete overview of Kendo UI Template capabilities and syntax, please review the Kendo UI Template demos and documentation.

Basic item template customization

<ul id="listview"></ul>

<script type="text/javascript">
    $(document).ready(function() {
        $("#listview").kendoMobileListView({
            template : "<strong>${data.foo}</strong>",
            dataSource: kendo.data.DataSource.create([{foo: "bar"}, {foo: "baz"}])
        });
    });
</script>

Item Icons

An icon can be set in two ways - either by adding an img element inside the li element, or by setting an icon data attribute to the li element. if data attribute is used then an a element should be put in the li element. The icon class will be applied to the a element. Kendo mobile comes out of the box with several ready to use icons:

Additional icons may be added by defining the respective CSS class. If the icon data attribute is set to custom, the item will receive km-custom CSS class.

Define custom button icon.

<style>
.km-custom {
  background-image: url("foo.jpg");
}
</style>

<ul data-role="listview" data-style="inset">
  <li data-icon="custom">
     <a>Home</a>
  </li>
  <li>
     Bar
  </li>
</ul>