ListView Overview

The Kendo UI ListView widget enables you to specify a custom type of layout for the items that are displayed in the control.

It can be bound to local JSON data or to remote data by using the Kendo UI DataSource component.

Getting Started

Initialize the ListView

The ListView can be created out of an existing <span>, <div>, or <ul> HTML element.

  <ul id="listView"></ul>

To initialize the widget, use the code from the following example.

  $(document).ready(function() {
          template: "<li>${FirstName} ${LastName}</li>",
          dataSource: {
              data: [
                      FirstName: "Joe",
                      LastName: "Smith"
                      FirstName: "Jane",
                      LastName: "Smith"


Selection, Navigation, and Editing

The ListView supports selection, navigation, and editing which, by default, are disabled. You can configure any of these functionalities by using Boolean options.

  $(document).ready(function() {
         selectable: true,
         navigatable: true,
         editable: true,
         template: "<li>${FirstName}</li>",
         editTemplate: '<li><input type="text" data-bind="value:FirstName" name="FirstName" required="required"/></li>'


To enable paging, instantiate a separate pager control and bind it to the same DataSource.

<div id="listview"></div>
<div id="pager"></div>
    var dataSource = new{
        data: [
            { id: 1, item: "Item 1" },
            { id: 2, item: "Item 2" },
            { id: 3, item: "Item 3" },
            { id: 4, item: "Item 4" },
            { id: 5, item: "Item 5" },
            { id: 6, item: "Item 6" }
        pageSize: 2

        dataSource: dataSource,
        template: "<div>#: item #</div>"

        dataSource: dataSource

See Also

Other articles and how-to examples on the Kendo UI ListView:

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