$(function () {
        var groupDetails = {
            field: 'RoomDescription',
            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 listView = $("#listView").data().kendoListView;
        var dataSource = listView.dataSource;
        dataSource.group(groupDetails);
    });

@(Html.Kendo().ListView<spRoomAvailabilityResult>()
    .Name("listview")
    .TagName("div")
    .ClientTemplateId("template")
    .Selectable(ListViewSelectionMode.Single)
    .Events(events => events.Change("onChange").DataBound("onDataBound"))
    .AutoBind(false)
    .DataSource(ds => ds
        .Ajax()
        .Model(model => {
            model.Id(p => p.ROOMID);
        })
        .Read(read => read.Url("/MyWebPage?handler=Read").Data("forgeryToken"))
    )
)

<script>
    function forgeryToken() {
        return kendo.antiForgeryTokens();
    }

    $(document).ready(function () {
        var listView = $("#listview").data("kendoListView");

        $(".k-add-button").click(function (e) {
            listView.add();
            e.preventDefault();
        });
    });
</script>
<script>
    function onChange(arg) {

        var selected = $.map(this.select(), function (item) {
            return $(item).text();
        });

        alert(selected);
    }
</script>

<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%">
            <div class="k-card-body">
                    <h4 class="k-card-title">#= data.items[i].ROOMNUMBER #</h4>
                    <h5 class="k-card-subtitle">Capacity: #= data.items[i].CAPACITY #</h5>
                </div>
            </div>
            # } #
        </div>
    </div>
</script>

    @(Html.Kendo().Grid<AccessControlsModel>()
        .Name("kgAdmin")
        .Columns(columns =>
        {
            columns.Bound(col => col.PermissionID).Width(50).Hidden(true);
            columns.Bound(col => col.UserID).Width(100);
            columns.Bound(col => col.Initials).Width(50);
            columns.Bound(col => col.Country).Width(50).ClientTemplate("#=Country#");
            columns.Bound(col => col.Admin).Width(50).ClientTemplate("<input type='checkbox' #= Admin ? checked='checked':'' # class='chkbx admin'/>").Editable(@<text> function(e){ return false; }  </text>);
            columns.Bound(col => col.PendingStatus).Width(50).ClientTemplate("<input type='checkbox' #= PendingStatus ? checked='checked':'' # class='chkbx pendingstatus' />").Editable(@<text> function(e){ return false; }  </text>);
            columns.Bound(col => col.BOM).Width(50).ClientTemplate("<input type='checkbox' #= BOM ? checked='checked':'' # class='chkbx bom' />").Editable(@<text> function(e){ return false; }  </text>);
            columns.Bound(col => col.ProcessSheet).Width(50).ClientTemplate("<input type='checkbox' #= ProcessSheet ? checked='checked':'' # class='chkbx processsheet' />").Editable(@<text> function(e){ return false; }  </text>);
            columns.Bound(col => col.Matrix).Width(50).ClientTemplate("<input type='checkbox' #= Matrix ? checked='checked':'' # class='chkbx matrix' />").Editable(@<text> function(e){ return false; }  </text>);
            columns.Bound(col => col.Quality).Width(50).ClientTemplate("<input type='checkbox' #= Quality ? checked='checked':'' # class='chkbx quality' />").Editable(@<text> function(e){ return false; }  </text>);
            columns.Bound(col => col.Process).Width(50).ClientTemplate("<input type='checkbox' #= Process ? checked='checked':'' # class='chkbx process' />").Editable(@<text> function(e){ return false; }  </text>);
            columns.Bound(col => col.Release).Width(50).ClientTemplate("<input type='checkbox' #= Release ? checked='checked':'' # class='chkbx release' />").Editable(@<text> function(e){ return false; }  </text>);
            columns.Bound(col => col.Hold).Width(50).ClientTemplate("<input type='checkbox' #= Hold ? checked='checked':'' # class='chkbx hold' />").Editable(@<text> function(e){ return false; }  </text>);
            columns.Bound(col => col.AddItem).Width(50).ClientTemplate("<input type='checkbox' #= AddItem ? checked='checked':'' # class='chkbx additem' />").Editable(@<text> function(e){ return false; }  </text>);
            columns.Bound(col => col.Reports).Width(50).ClientTemplate("<input type='checkbox' #= Reports ? checked='checked':'' # class='chkbx reports' />").Editable(@<text> function(e){ return false; }  </text>);
            columns.Command(command => { command.Edit(); command.Destroy(); }).Width(160);
        })
        .NoRecords(c => c.Template("<strong>  No data </strong>"))
        .Sortable()
        .Editable(editable =>
        {
            editable.Mode(GridEditMode.InLine);
        })
        .ToolBar(tools =>
        {
            tools.Search().Text("Search all fields...");
            tools.Excel().HtmlAttributes(new { id = "save", @class = "k-button margin-left" });
            tools.Create();
        })
        .Scrollable(c => c.Enabled(true))
        .Resizable(resize => resize.Columns(true))
        .Reorderable(r => r.Columns(true))
        .Height(750)
        .HtmlAttributes(new { style = "width:100%;" })
        .DataSource(dataSource => dataSource
            .WebApi()
            .ServerOperation(false) 
            .Model(model =>
            {
                model.Id(p => p.PermissionID);
                model.Field(p => p.UserID).DefaultValue("JEINC\\");
                model.Field(f => f.Initials);
                model.Field(f => f.Country);         
            })
            .Events(events => {
                events.RequestEnd("GridRequestEnd");
                events.Error("error_handler");
            })
            .Read(read => read.Action("GetGridData", "Admin"))
            .Create(create => create.Action("Create", "Admin"))
            .Update(update => update.Action("Update", "Admin"))
            .Destroy(destroy => destroy.Action("Delete", "Admin", new { Id = "{0}" }))
        )
     )

    public class AccessControlsModel
    {
        public int PermissionID { get; set; }
        [Required]
        public string UserID { get; set; }
        public string Initials { get; set; }
        [UIHint("CountriesDDL")]
        public string Country { get; set; }
        public bool Admin { get; set; }
        public bool PendingStatus { get; set; }
        public bool BOM { get; set; }
        public bool ProcessSheet { get; set; }
        public bool Matrix { get; set; }
        public bool Quality { get; set; }
        public bool Process { get; set; }
        public bool Release { get; set; }
        public bool Hold { get; set; }
        public bool AddItem { get; set; }
        public bool Reports { get; set; }
    }

series
    .Donut(model => model.Count, model => model.Status, model => model.Color)