Telerik UI for Windows 8 HTML

You can easily perform rows expand/collapse programmatically in hierarchy scenarios. RadGrid exposes two methods—expandRow(masterRow) and collapseRow(masterRow)—which facilitate such action. This article explains how to use these methods.

Hierarchy Expand/Collapse in Code.

Both expandRow and collapseRow methods accept a single argument—the DOM element(s) or corresponding jQuery object of the master row(s) that should be expanded/collapsed. The following code sample demonstrates how you can expand/collapse all master rows in RadGrid, based on the expanded state of the first row. The logic implemented is as follows:

  1. Access all master rows in RadGrid by class name.

  2. Get the first row element and access its expand/collapse icon by its unchanging "k-icon" class name.

  3. Check the second class name of the icon—if it is "k-plus", the row is collapsed and should be expanded, otherwise, it should be collapsed. Based on this logic, the relevant method is called for all rows.

JavaScript Copy imageCopy
var masterRows = grid.element.getElementsByClassName("k-master-row");
var firstRow = masterRows[0];
var icon = firstRow.getElementsByClassName("k-icon")[0];
if (icon.classList.contains("k-plus")) {
else {

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

See Also