WebHierarchicalDataGrid grouping feature offers handy “Group By” area – a place where columns can be dragged to for grouping. It has one limitation though: by default it can be positioned only on top or the bottom of the grid. But what if you want to place it elsewhere? For example you have a dedicated navigation part of your page where you want to display grouped columns.

DOM to the rescue. As I mentioned in my previous post Group By area is a DIV that can be located by its CSS class name (either assigned by you or, barring that, class of a StyleSet used by the grid control). After the area is located, it can be moved to a location of your choice, for example another DIV by standard appendChild DOM method:

function positionGroupByArea() {
   var aGroupAreas = document.getElementsByClassName('ighg_Office2007BlueGroupArea'); 
   var oDivActionControls = $get('xdivNavigation'); 

   if (aGroupAreas.length > 1) {
      oDivActionControls.removeChild(aGroupAreas[0]);
      oDivActionControls.appendChild(aGroupAreas[1])
   } else {
      oDivActionControls.appendChild(aGroupAreas[0])
   }
}

Lines 2-3 Locate Group By area and target DIV respectfully. Note Line 5: like nature abhors a vacuum – WHDG abhors Group By area missing from its default place, if it is missing – grid will try to recreate it. If this happens you will have 2 Group By areas. If code on Line 5 detects this situation it removes old area and re-adds new one. Otherwise it simple moves original area.

You will have to call this code on initial grid load and after every grid operation (sorting, paging etc.) since grid will try to recreate Group By at the old place. Also, if the grid feels jumpy during this move – hide Group By area initially via it’s CSS class by setting display:none and make it visible again after the move.

Overall effect is quite seamless

If you work with Infragistics WebHierarchicalDataGrid and try to use its grouping features, you may notice that it uses grid column keys instead of column header’s captions to name items in “Group By” area.

To work around this limitation, let’s take a look at how Grouped By area is rendered:

Basically a container DIV holds a bunch of SPANs representing grouped columns. Both DIV and SPAN can be located by their CSS class (your own, if it’s assigned or Infragistics StyleSet class name, used by the grid control). Knowing the location of the SPANs we can loop thru them altering their text:

function renameColumnsInGroupByArea() {

   //locating GroupBy area DIV 
   var oGroupArea = document.getElementsByClassName('ighg_IGGroupArea')[0]; 

   //locating GroupedColumn SPANs
   var aGroupedColumns = oGroupArea.getElementsByClassName('ighg_IGGroupedColumn');

   // looping thru SPANS with grouped columns, replacing their text
   for (var I = 0; I < aGroupedColumns.length; I++) {
      aGroupedColumns[I].firstChild.nodeValue = // put your new value here;
   }
}

One way of using this function is generate a JavaScript associative array (ColumnData['ColumnKey'] = 'Column Caption') in ASP.NET server side code. Armed with such array Line 11 in the previous code could be simple

aGroupedColumns[I].firstChild.nodeValue = ColumnData[aGroupedColumns[I].firstChild.nodeValue]