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

Grouping

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

            
                        grouping.cshtml
                    
                        GroupingController.cs

Also available for:

API REFERENCE

<div class="k-listview-item"> <h4 class="k-group-title">#= data.value #</h4> <div class="cards"> # for (var i = 0; i < data.items.length; i++) { # <div class="k-card" style="width: 15em; margin:2%"> <img class="k-card-image" src="#=destinationURL(data.items[i].ImageUrl)#" /> <div class="k-card-body"> <h4 class="k-card-title">#= data.items[i].Title #</h4> <h5 class="k-card-subtitle">#= data.items[i].Description #</h5> </div> </div> # } # </div> <h5 class="k-group-footer"> #=data.items.length# Destinations in #= data.value #</h5> </div> function destinationURL(name) { return '../content/shared/images/destinations/' + name; } $(function () { var groupDetails = { field: 'Country', dir: 'desc', compare: function (a, b) { if (a.items.length === b.items.length) { return 0; } else if (a.items.length > b.items.length) { return 1; } else { return -1; } } } var listView = $("#listView").data().kendoListView; var dataSource = listView.dataSource; dataSource.group(groupDetails); }); #listView .k-listview-content { height: 65em; } #listView .k-listview-content .k-listview-item { padding: 2%; } #listView .k-listview-content .k-listview-item:after { content: ''; width: 95%; height: 2px; background: #F4F4F4; position: absolute; } #listView .k-listview-content .k-listview-item .cards { display: flex; flex-wrap: wrap; } #listView .k-group-title { font-family: inherit; font-size: 20px; line-height: normal; font-weight: 400; margin: 0 0 14px; text-transform: uppercase; font-weight: 600; } #listView .k-group-footer { font-family: inherit; font-size: 17px; line-height: normal; font-weight: 400; margin: 0 0 14px; font-style: italic; } .k-content { width: 60em; margin: auto; max-width: unset !important; }

Description

This demo for ASP.NET MVC ListView component shows how you can populate the widget with local grouped data. To make this possible, configure the group option of the dataSource and declare a template that creates an HTML element for each group item.

Grouping

Description

Support & Learning Resources

Was this demo helpful?

Tell us how we can improve this demo