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

Collapse Groups in Grid by Default

Environment

Product Progress® Kendo UI® Grid for jQuery
Product Version Created with the 2017.3.1026 version

Description

How can I render Kendo UI Grid groups as collapsed by default?

Solution

  1. Handle the dataBound event of the Grid.
  2. Iterate through each group by calling collapseGroup for it.
Open In Dojo
<div id="grid"></div>

<script>
    $("#grid").kendoGrid({
        columns: [
            { field: "productName" },
            { field: "category" }
        ],
        dataSource: {
            data: [
                { productName: "Tea", category: "Beverages" },
                { productName: "Coffee", category: "Beverages" },
                { productName: "Ham", category: "Food" },
                { productName: "Bread", category: "Food" },
                { productName: "Bread", category: "abc" }
            ],
            group: { field: "category" }
        },
        groupable: true,
        dataBound: function (e) {
            var grid = this;
            $(".k-grouping-row").each(function (e) {
                grid.collapseGroup(this);
            });
        }
    });
</script>
In this article