columns.groupable.sort.compare Function

A JavaScript function which is used to compare the groups (refer to sortable.compare for comparing 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,
        height: 550,
        groupable: true,
        columns: [
            { field: "id", title: "Id", width: "120px" },
            { field: "name", title: "Name", width: "120px" },
            {
                field: "category",
                title: "Category",
                width: "120px",
                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;
                            }
                        }
                    }
                }
            }
        ]
    });
</script>