scrollable Boolean|String (default: false)

If set to true the listview will display a scrollbar when the content exceeds the listview height value. By default scrolling is disabled.

It could be also set to endless in order to enable the endless scrolling functionality. In endless scrolling mode the height should be configured to display a scrollbar. Scrolling to the end of the scrollbar will load more items (equal to the pageSize number) and append them to the listview DOM element utill all items are loaded and displayed.

Example - set the scrollable to endless

<script src="https://demos.telerik.com/kendo-ui/content/shared/js/products.js"></script>
<div>
    <div id="listView"></div>
</div>

<script type="text/x-kendo-tmpl" id="template">
    <div class="k-widget">
        <div>Product Name</div>
        <div>#:ProductName#</div>
        <div>Unit Price</div>
        <div>#:kendo.toString(UnitPrice, "c")#</div>
        <div>Units In Stock</div>
        <div>#:UnitsInStock#</div>
        <div>Discontinued</div>
        <div>#:Discontinued#</div>
    </div>
</script>

<script>
    $(document).ready(function () {
        var dataSource = new kendo.data.DataSource({
            data: products,
            pageSize: 6
        });

        $("#listView").kendoListView({
            dataSource: dataSource,
            height: 400,
            scrollable: "endless",
            template: kendo.template($("#template").html()),
        });
    });
</script>
In this article
Not finding the help you need? Improve this article