New to Kendo UI for jQuery? Start a free 30-day trial

Scrollable

configuration

Accepts endless 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.

If set to any other value the listview will display a scrollbar when the content exceeds the listview height value.

scrollable

String

<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>