Selection

By default, the selection feature of the ListView is disabled.

Getting Started

The ListView supports the item selection functionality by setting the selectable property to either "single" or "multiple".

js

$("#listView").kendoListView({
    dataSource: dataSource,
    selectable: "multiple",
    template: kendo.template($("#template").html())
});

Advanced Configuration

You can also detect when users pick up items through the change event which is triggered upon their selecting one or more items with the Shift+ select combination.

js

$("#listView").kendoListView({
    change: function(e) {
        var data = dataSource.view();
        var selected = $.map(this.select(), function(item) {
            return data[$(item).index()].ProductName;
        });

        // Index selected or read item information through data.
    }
});

The following example demonstrates the full implementation of the suggested approach.

<div id="listView" style="max-height:400px;overflow:auto;"></div>
<div class="k-pager">
    <div id="pager"></div>
</div>

<script type="text/x-kendo-tmpl" id="template">
    <div class="product">
        <img src="https://demos.telerik.com/kendo-ui/content/web/foods/#= ProductID #.jpg" alt="Kendo UI for jQuery ListView #: ProductName # " />
        <h3>#:ProductName#</h3>
        <p>#:kendo.toString(UnitPrice, "c")#</p>
    </div>
</script>

<script>
var dataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: "https://demos.telerik.com/kendo-ui/service/Products",
            dataType: "jsonp"
        }
    },
    pageSize: 3
});

$("#pager").kendoPager({
    dataSource: dataSource
});

$("#listView").kendoListView({
    selectable: true,
    dataSource: dataSource,
    template: kendo.template($("#template").html())
});
</script>

<style>
    .alt { background-color: #EEE; }
</style>

See Also

• Basic Usage of the ListView (Demo)
• JavaScript API Reference of the ListView