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


In essense, this implementation is not achieved directly through the ListView, but using the DataSource grouping capability:

Kendo UI DataSource group configuration

Sample Explanation

You can find the full sample displayed here:

Kendo UI ListView Grouping (Demo)

The key part is to configure the ListView Template for proper accomodation of the grouping structure of the data:

<script type="text/x-kendo-template" id="template">
    <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 alt="Kendo UI for jQuery ListView #= data.items[i].Title #" class="k-card-media" 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>
            # } #
        <h5 class="k-group-footer"> #=data.items.length# Destinations in #= data.value #</h5>

The next step is to define the DataSource and configure its group settings:

        var dataSource = new{
            data: destinations,
            group: {
                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;

And the finishing brush is to create the Kendo ListView:

            dataSource: dataSource,
            template: kendo.template($("#template").html())
In this article