Change header style on header lick

Discontinued products Uncategorized discussions
#1

Can just the selected header cell’s background color be changed on a onHeaderClick event?



The underlying rows can remain as they are. I just want to change the header’s cell.



#2


“onHeaderClick” event handler has paramethers:


* ind - index of the column;
* obj - related javascript event object.


You can use “ind” parameter to take a reference to the grid’s header cell and set necessary styles to it:


mygrid.attachEvent(“onHeaderClick”,function(ind){
mygrid.hdr.rows[1].cells[ind].style.cssText=“background-color: red;”;
});




#3


That works.  However, going one step further, how do you reset the css background if another column header is clicked?



Clicking on column 0 and then clicking on column 1 will result in both columns having the background color changed.  I’d like for column 0 to return to its original color.

#4


You can use following code:


mygrid.attachEvent(“onHeaderClick”,function(ind){
cells=mygrid.hdr.rows[1].cells;
for (var i=0; i<cells.length; i++){
cells[i].className=“unClicked”;
}
cells[ind].className=“clicked”;
});


…


div.gridbox table.hdr td.unclicked {
background-color: #C4C4F7;
}
div.gridbox table.hdr td.clicked {
background-color: #6358B5;
}