groupable.sort.compare Function

A JavaScript function which is used to compare the groups (refer to sortable for sorting the items of the groups). It has the same signature as the compare function accepted by Array.sort.

Example - use a custom function to compare the groups

<div id="grid"></div>

<script>
    $("#grid").kendoGrid({
        dataSource: {
            data: [
                { id: 1, name: "Salmon", category: "Seafood" },
                { id: 3, name: "Ice cream", category: "Desserts" },
                { id: 2, name: "Mackerel", category: "Seafood" },
                { id: 4, name: "Cake", category: "Desserts" },
                { id: 5, name: "Lemonade", category: "Beverages" },
                { id: 6, name: "Tea", category: "Beverages" },
                { id: 7, name: "Coffee", category: "Beverages" },
            ],
            pageSize: 10
        },
        pageable: true,
        groupable: {
            sort: {
                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;
                    }
                }
            }
        },
        height: 550,
        columns: [
            { field: "id", title: "Id", width: "120px" },
            { field: "name", title: "Name", width: "120px" },
            { field: "category", title: "Category", width: "120px" }
        ]
    });
</script>