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

Endless Scrolling

Loading Demo...

EXAMPLE
VIEW SOURCE
Edit in Theme Builder
Change Theme
Default
SASS

LESS
- Default
- Bootstrap
- Material
- Launch Theme Builder
- Black
- Blue Opal
- Bootstrap v3
- Default
- Fiori
- Flat
- High Contrast
- Material
- Material Black
- Metro
- Metro Black
- Moonlight
- Nova
- Office 365
- Silver
- Uniform

            
                        endless_scrolling.cshtml
                    
                        Endless_ScrollingController.cs
                    
                        ProductViewModel.cs

Also available for:

API REFERENCE

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

Endless Scrolling

Support & Learning Resources

Was this demo helpful?

Tell us how we can improve this demo