Scrolling
By default, the scrolling functionality of the ListView is disabled.
Getting Started
To enable the scrolling functionality, set the scrollable property. If scrollable is set to true and the content exceeds the height value of the ListView, the component will display a scrollbar.
<script src="https://demos.telerik.com/kendo-ui/content/shared/js/products.js"></script>
<div>
<div id="listView"></div>
</div>
<script>
$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
data: products,
});
$("#listView").kendoListView({
dataSource: dataSource,
height: 200,
scrollable: true,
template: "<div>#:ProductName#</div>",
});
});
</script>
Endless Scrolling
The endless scrolling functionality enables the ListView to display large amounts of data by appending additional pages of data on demand. The loading of new items happens when the scrollbar of the ListView reaches its end. When the data is returned, only the new items are rendered and appended to the old ones. The endless scrolling of the ListView works with both local and remote data.
Endless scrolling also works with editing—when the ListView is in its endless scroll mode and an item is opened for editing, that item will remain opened even after a new page is requested.
To enable endless scrolling, set the scrollable property to endless.
The ListView supports endless scrolling regardless of whether it is bound to local or remote data:
- When bound to local data arrays, the ListView serializes all items to the client and while the user is scrolling, the component displays new items.
- When bound to remote data, the ListView serializes only the items for one page. When the user scrolls to the end of the list, the ListView sends an AJAX request to get the items for the next page. When the data is returned, the ListView renders only the new items and appends them to the old ones.
<script src="https://demos.telerik.com/kendo-ui/content/shared/js/products.js"></script>
<div>
<div id="listView"></div>
</div>
<script>
$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
data: products,
pageSize: 12
});
$("#listView").kendoListView({
dataSource: dataSource,
height: 200,
scrollable: "endless",
template: "<div>#:ProductName#</div>",
});
});
</script>