Telerik UI for Windows 8 HTML

You can programmatically expand and collapse RadGrid groups, using the RadGrid public API. This help article shows an example of how to use the expandGroup(groupHeader) and collapseGroup(groupHeader) methods to expand and collapse a certain group.

Expand/Collapse Groups in Code

The expandGroup and collapseGroup methods accept a single argument, which is the DOM element or corresponding jQuery object, containing the headers of the groups that you want to expand/collapse. Following is an example of how to expand/collapse all groups in RadGrid, based on the expanded state of the first group.

The main logic in the following code snippet is represented by these steps:

  1. Access all group headers in RadGrid by class name.

  2. If the headers array has length greater than 0 (the control is indeed grouped), access the first header and the icon inside it. The icon is accessed by its first class name assigned.

  3. Check whether the icon has expand class or collapse class applied. Based on that, call either the expandGroup method or collapseGroup method and pass to it the group headers.

    Expand/Collapse Example Copy imageCopy
    var groupHeaders = grid.element.querySelectorAll(".k-grid-content tr.k-grouping-row");
    if (groupHeaders.length > 0) {
        var firstGroup = groupHeaders[0];
        var icon = firstGroup.getElementsByClassName("k-icon")[0];
        if (icon.classList.contains("k-i-collapse")) {
            grid.collapseGroup(groupHeaders);
        }
        else {
            grid.expandGroup(groupHeaders);
        }
    }
    

    You can also pass a single header to expand or collapse a single group.

This implementation is part of our SDK Examples and is available for download at the following link: Telerik Windows 8 HTML SDK under Grid/GroupExpandCollapseInCode.

See Also