Collapse Groups in Grid by Default

Environment

Product Progress Kendo UI Grid
Progress Kendo UI 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.
<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
Not finding the help you need? Improve this article