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

Columns.groupable.sort

configuration

Sets the sort configuration when grouping.

columns.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,
        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>

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.

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

columns.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: 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: {
                        dir: "desc"
                    }
                }
            }
        ]
    });
</script>