Hide/Show row in the header

Is there a way to have a button to hide/show a second row in the header. I saw an example to hide/show rows in the grid but not in the header. Should it be done through css? I just want tot add a filter bar in the header:-)

You can use grid.setHeaderCount() method -

var grid = new AW.Grid.Extended;
grid.setCellData(function(col, row){return col + "." + row});
grid.setHeaderText("header");
grid.setHeaderCount(2);

grid.setColumnCount(10);
grid.setRowCount(10);

document.write(grid);

var button1 = new AW.UI.Button;
button1.setControlText("hide");
document.write(button1);

var button2 = new AW.UI.Button;
button2.setControlText("show");
document.write(button2);

button1.onControlClicked = function(){
    grid.setHeaderCount(1);
}

button2.onControlClicked = function(){
    grid.setHeaderCount(2);
}
 

Thank you.