Edit this page

ListView Overview

The Kendo UI ListView widget is designed to give you the freedom to specify a custom type of layout for the items displayed in the control. It can be bound to local JSON data or to remote data using the Kendo UI DataSource component.

Getting Started

Initialize the ListView

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

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

Then, initialize the widget in the way demonstrated below.

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

Configuration

Selection, Navigation, and Editing

The ListView supports selection, navigation, and editing functionalities which, by default, are disabled. You can configure any of these behaviors by using simple Boolean options, as shown in the example below.

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

Paging

To enable paging, instantiate a separate pager control and bind it to the same DataSource, as shown in the example below.

Example
<div id="listview"></div>
<div id="pager"></div>
<script>
    var dataSource = new kendo.data.DataSource({
        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
    });

    $("#listview").kendoListView({
        dataSource: dataSource,
        template: "<div>#: item #</div>"
    });

    $("#pager").kendoPager({
        dataSource: dataSource
    });
</script>

See Also

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