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>