New to Kendo UI for jQuery? Download free 30-day trial

Integration - ListView

Loading Demo...

EXAMPLE
VIEW SOURCE
Edit in Kendo UI Dojo
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

integration-listview.html

Also available for:

<div class="product"> <img src="../content/web/foods/#= ProductID #.jpg" alt="#: ProductName # image" /> <h3>#:ProductName#</h3> <p>#:kendo.toString(UnitPrice, "c")#</p> </div> $(function() { var dataSource = new kendo.data.DataSource({ data: products, pageSize: 21 }); $("#listView").kendoListView({ dataSource: dataSource, template: kendo.template($("#template").html()) }); $("#pager").kendoPager({ dataSource: dataSource }); $("#listView").kendoSortable({ filter: ".k-listview-content > div.product", cursor: "move", placeholder: function(element) { return element.clone().css("opacity", 0.1); }, hint: function(element) { return element.clone().removeClass("k-state-selected"); }, change: function(e) { var skip = dataSource.skip(), oldIndex = e.oldIndex + skip, newIndex = e.newIndex + skip, data = dataSource.data(), dataItem = dataSource.getByUid(e.item.data("uid")); dataSource.remove(dataItem); dataSource.insert(newIndex, dataItem); } }); }); #listView { padding: 10px 5px; margin-bottom: -1px; min-height: 400px; } .product { float: left; position: relative; width: 111px; height: 170px; margin: 0 5px; padding: 0; cursor: move; } .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; } .product p { visibility: hidden; } #listView .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-color .2s linear, color .2s linear; } .k-listview:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

Integration - ListView

Support & Learning Resources

Was this demo helpful?

Tell us how we can improve this demo