Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by SFGolfer on May 05, 2009 09:22
open dhtmlx forum
Change header style on header lick

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.

Answer posted by dhxSupport on May 06, 2009 01:42

"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;";
 });


Answer posted by SFGolfer on May 06, 2009 05:18

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.

Answer posted on May 06, 2009 05:35

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;
 }