Expand and Collapse Dev Express hierarchical grid

 

In this demo I will add a check box in the header of Dev express grid. If i check that checkbox then hierarchical grid will be expanded, and in the second hierarchical grid will be collapsed.

 

First of all I have to add a checkbox in the header of the grid. There might be some other ways to do this, but I have done this by using the following line of code. Place it after the line where you have bind your grid with the datasource.

   1: System.Web.UI.ScriptManager.RegisterStartupScript(this, this.GetType(), "chkExpCol", "ExpandCollapse('" + GRID_NAME.ClientID + "', true);", true);

Then add the following JS function in ur page.

   1: function ExpandCollapse(gridName, reload) {

   2:     var hDiv = $("div[id$='GRIDNAME_hdiv']");

   3:     if (hDiv.length > 0) {

   4:         var firstHeader = hDiv.children()[0].tHead.childNodes[0].childNodes[0];

   5:         firstHeader.innerHTML = "<input type='checkbox' id='chkExpCol' onclick='ExpandCollapse(" + gridName + ")'>";

   6:     }

   7: }

   8: function ExpandCollapse(gridName) {

   9:     var chkExpColl = document.getElementById('chkExpCol');

  10:     var grid = igtbl_getGridById('CLIENT ID OF GRID'); 

  11:     if (chkExpColl != null) {

  12:         if (typeof (grid) != "undefined") {

  13:             for (var i = 0; i < grid.Rows.length; i++) {

  14:                 var row = grid.Rows.getRow(i);

  15:                 if (row != null) {

  16:                     try {

  17:                         row.setExpanded(chkExpColl.checked);

  18:                     }

  19:                     catch (err) {

  20:                     }

  21:                 }

  22:             }

  23:         }

  24:     }

  25: }

 

Thats is it