Columns.groupable

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  groupable: true,
  columns: [
    { field: "name", groupable: false },
    { field: "age"}
  ],
  dataSource: {
    data: [
      { name: "Jane Doe", age: 30 },
      { name: "John Doe", age: 30 }
    ]
  }
});
</script>

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