New to Telerik UI for ASP.NET Core? Download free 30-day trial

ASP.NET Core ListView Endless Scrolling

Loading Demo...

EXAMPLE

VIEW SOURCE
EDIT IN
- Telerik REPL

Also available for:

<div class="product"> <img src="/aspnet-core/shared/web/foods/#= ProductID #.jpg" alt="#: ProductName # image" /> <h3>#:ProductName#</h3> <p>#:kendo.toString(UnitPrice, "c")#</p> </div>

#listView { padding: 10px 5px; margin-bottom: -1px; display: flex; } .product { float: left; position: relative; width: 111px; height: 170px; margin: 0 5px; padding: 0; } .product img { width: 110px; height: 110px; } .product h3 { margin: 0; padding: 3px 5px 0 0; max-width: 96px; overflow: hidden; line-height: 1.1em; font-size: .9em; font-weight: normal; text-transform: uppercase; color: #999; } .product p { visibility: hidden; } .product:hover p { visibility: visible; position: absolute; width: 110px; height: 110px; top: 0; margin: 0; padding: 0; line-height: 110px; vertical-align: middle; text-align: center; color: #fff; background-color: rgba(0,0,0,0.75); transition: background .2s linear, color .2s linear; -moz-transition: background .2s linear, color .2s linear; -webkit-transition: background .2s linear, color .2s linear; -o-transition: background .2s linear, color .2s linear; } .k-listview:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

Description

The ListView endless scrolling functionality allows you to optimize the performance of substantial amounts of data by appending additional records on demand and displaying only a subset of items. Whenever the scrollbar of the list view reaches its end, new items are loaded.

This demo is a runnable example of the endless scrolling functionality. You can enable the endless scroll mode of the ListView by setting the Scrollable property to .Scrollable(ListViewScrollableMode.Endless).

Additional Apps

This ListView example is part of unique collection of hundreds of ASP.NET Core demos, with which you can see all Telerik ASP.NET Core components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Telerik REPL for ASP.NET Core or ThemeBuilder.

ASP.NET Core ListView Endless Scrolling

Description

Additional Apps

Support & Learning Resources

Additional Resources