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

Binding to a DataSource

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

            
                        databinding.cshtml
                    
                        DataBindingController.cs
                    
                        ProductViewModel.cs

Also available for:

API REFERENCE

<div class="img-wrapper"> # for (var i = 0; i < data.length; i++) { # <div> <div style="width: 140px; height: 140px; background-image: #=setBackground(data[i].ProductID)#; background-repeat:no-repeat; background-size: cover;"></div> <p>#= data[i].ProductName #</p> </div> # } # </div> function setBackground(id) { return "url(https://demos.telerik.com/kendo-ui/content/web/foods/" + id + ".jpg)"; } div.k-scrollview ul.k-scrollview-wrap > li { text-align: center; display: table; box-sizing: border-box; } ul.k-scrollview-wrap > li > .img-wrapper { padding: 2em; display: table-cell; vertical-align: middle; white-space: initial; } ul.k-scrollview-wrap > li > .img-wrapper > div { width: 30%; min-width: 150px; box-sizing: border-box; display: inline-block; vertical-align: top; margin-bottom: 1em; } ul.k-scrollview-wrap > li > .img-wrapper > div > div { margin: auto; margin-bottom: 0.5em; }

Description

The ScrollView for ASP.NET Core can be bound to both local data or remote data via the Kendo UI DataSource component. Local data binding is appropriate for small data sets, while remote data binding applies better to larger data sets.

Binding to a DataSource

Description

Support & Learning Resources

Was this demo helpful?

Tell us how we can improve this demo