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

Selection

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

            
                        selection.cshtml
                    
                        SelectionController.cs
                    
                        ListViewController.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> </div> kendo.syncReady(function(){jQuery("#listView").kendoListView({"change":onChange,"dataBound":onDataBound,"tagName":"div","dataSource":{"type":(function(){if(kendo.data.transports['aspnetmvc-ajax']){return 'aspnetmvc-ajax';} else{throw new Error('The kendo.aspnetmvc.min.js script is not included.');}})(),"transport":{"read":{"url":"/aspnet-core/listview/products_read"},"prefix":""},"pageSize":15,"page":1,"groupPaging":false,"total":0,"serverPaging":true,"serverSorting":true,"serverFiltering":true,"serverGrouping":true,"serverAggregates":true,"filter":[],"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"fields":{"ProductID":{"type":"number"},"ProductName":{"type":"string"},"UnitPrice":{"type":"number"},"UnitsInStock":{"type":"number"},"Discontinued":{"type":"boolean"},"LastSupply":{"type":"date"},"UnitsOnOrder":{"type":"number"},"Category":{"type":"object"},"CategoryID":{"type":"number","defaultValue":null},"QuantityPerUnit":{"type":"string"}}}}},"template":kendo.template(jQuery('#template').html()),"pageable":{"buttonCount":10,"pagerId":"listView_pager"},"selectable":"multiple"});}); .product { float: left; width: 230px; height: 120px; margin: 0; padding: 5px; cursor: pointer; } .product img { float: left; width: 110px; height: 110px; } .product h3 { margin: 0; padding: 10px 0 0 10px; font-size: .75em; overflow: hidden; font-weight: normal; float: left; max-width: 110px; text-transform: uppercase; } .k-pager-wrap { border-top: 0; } .demo-section .k-listview:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

Selection

Support & Learning Resources

Was this demo helpful?

Tell us how we can improve this demo