Adding a group header using top panel .....

This is a solution to make a top header (group) that inserts an empty & scroll-bars-less grid ( just a header) inside upper panel ( horiz-scroll sinconized ).
Can be used with both UI.Grid and Grid.Extended (without any change).

But if you just need the Extended version, then it's much better ( cleaner and shorter) to use Alex's excellent enhancement posted in:
http://activewidgets.com/javascript.forum.16298.7/sorting-on-second-header-row.html

<script>  
 //var obj = new AW.Grid.Extended;
 var obj = new AW.UI.Grid;  
 obj.setId('Mygrid');  
 obj.setCellText(function(i, j){return j + "-" + i});
 
 obj.setHeaderText(function(i){return i});
 obj.setRowCount(10);  
 obj.setColumnCount(8);  
 obj.setSelectorVisible(false);  
 obj.setHeaderHeight(20);  
 obj.setCellEditable(true);
 obj.setControlSize(500, 200); // width, height 

 // column widths defined via js new HeaderProperty(array) instead of css
 obj.defineHeaderProperty('colwidths', ['40','84','57','70','80','50','38','90'], true);

 for (var r=0;r<obj.getColumnCount();r++){
 obj.setColumnWidth( parseInt(obj.getHeaderColwidths()[r]) ,r);
 }
 
 // define new property (array) to define merged cols (groups)
 // column-1 is grouping (0+1+2+3) // column-2 (4) // column-3  (5+6+7)   
 obj.defineHeaderProperty('mergehead', ['3','4','7'], true);

 // sincronize scroll in both grids
 obj.onScrollLeftChanging = function(event){
 setTimeout(function(){
 TopGrid.setScrollLeft(obj.getScrollLeft()  );
 },0);
 }
/////////////////////////////////////////

 var TopGrid = new AW.UI.Grid;  
 TopGrid.setId('Mygrid2');  
 TopGrid.setHeaderText(['HC1','HC2','HC3']); 
 TopGrid.setRowCount(0);  
 TopGrid.setColumnCount(obj.getHeaderMergehead().length);  
 TopGrid.setHeaderHeight(20);  
 TopGrid.setSelectorVisible(false);  
 TopGrid.setVirtualMode(false); // disable Virtual Mode
 TopGrid.setStyle('width', obj.getStyle('width')); // Top grid width (same as main grid )
 TopGrid.setStyle('height', 23 ); 

    
 TopGrid.setScrollBars("none");  // disable scrollbars
 TopGrid.onScrollBarsChanging  = function(){return 1}; // cancel scrolling 


 TopGrid.getSeparatorTemplate().setStyle("cursor", "default"); 
 TopGrid.getSeparatorTemplate().setEvent("onmousedown", ""); 


 // centered text for top headers
 for(var w=0;w<obj.getHeaderMergehead().length;w++){
 TopGrid.getHeaderTemplate(w).setStyle('text-align', 'center');
 } 


 obj.onColumnWidthChanged = function(width, column){
 var i=0, mergedcol=0 , colswidth = 0, lmc=0, fmc=0;

 // find which columns are involved 
 for (var x=0;x<TopGrid.getColumnCount();x++){
 if (column<=obj.getHeaderMergehead()[x] ){

 if( x>0 && column>=obj.getHeaderMergehead()[(x-1)]){
 fmc = obj.getHeaderMergehead()[(x-1)];
 mergedcol = x ;
 lmc = obj.getHeaderMergehead()[x];
 break;
 }
 if( x==0 ){
 fmc = -1;
 mergedcol = 0 ;
 lmc = obj.getHeaderMergehead()[x];
  break;
 }

 }
 }

 // calculate widths of grouped columns
 for (i=lmc;i>fmc;i--){
  colswidth += obj.getColumnWidth(i) ;
 }

 //adjust this merged (top) Column
 if(mergedcol==0)TopGrid.setColumnWidth( colswidth - AW.dx - 1, mergedcol );
 if(mergedcol!=0)TopGrid.setColumnWidth( colswidth , mergedcol );
 //alert(mergedcol + ' ' + colswidth + ' ' + lmc + ' ' + fmc)
 }
///////////////////////////////////////////////

 //initial top headers adjustment
 for (var zz=0;zz<obj.getColumnCount();zz++){
  obj.onColumnWidthChanged( obj.getColumnWidth(zz), zz);
 }

 TopGrid.setColumnWidth( TopGrid.getColumnWidth(0) - AW.dx - 1  , 0 );

 //////// PANELS CODE

 obj.defineTemplate("topLine", function(){return TopGrid.toString() });  // inserts an empty grid at top (top-Header))

 obj.setLayoutTemplate(new AW.Panels.Horizontal); 
 obj.setPanelTemplate(function(i){ 
 switch(i){ 
 case 0: return this.getTopLineTemplate(); 
 case 1: return this.getScrollTemplate(); 
 } 
 }); 

 obj.setPanelHeight(23, 0); //top line 

 document.write(obj); 

</script>