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

Groupable.sort

configuration

Sets the sort configuration when grouping.

groupable.sort

Object

<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: {
                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;
                    }
                }
            }
        },
        height: 550,
        columns: [
            { field: "id", title: "Id", width: "120px" },
            { field: "name", title: "Name", width: "120px" },
            { field: "category", title: "Category", width: "120px" }
        ]
    });
</script>

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.

<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>

groupable.sort.dir

String

The sort order of the groups according to the group field.

The supported values are:

"asc" (ascending order)
"desc" (descending order)

Default: asc

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

<script>
    $("#grid").kendoGrid({
        dataSource: {
            data: [
                { id: 6, name: "Tea", category: "Beverages" },
                { id: 7, name: "Coffee", category: "Beverages" },
                { 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" }
            ],
            pageSize: 10
        },
        pageable: true,
        groupable: {
            sort: {
                dir: "desc"
            }
        },
        height: 550,
        columns: [
            { field: "id", title: "Id", width: "120px" },
            { field: "name", title: "Name", width: "120px" },
            { field: "category", title: "Category", width: "120px" }
        ]
    });
</script>