Color Grid Header

I want to allow the user to select a column by clicking on the header. I’ve added a callback for the onBeforeSorting and returned false to stop sorting. Is there a way to set the header color from this callback? I’m loading the rows from loadXML(), so I don’t implement the grid from a table.

I was thinking just adding and removing a style class but my issue is I don’t know how the table is structured.

“onBeforeSorting” can provide you column index:

grid.attachEvent("onBeforeSorting", function(ind,type,direction){ //any custom logic here return false; });

You can use this index to get reference to the necessary cell in grid header:

var cell=grid.hdr.rows[row_index].cells[column_index];

row_index - 1-based index of row
column_index - 0-based index of column

Thank you very much for the response. Where in the documentation can you find the generated html structure for future reference?

I’m trying to add a style class to the header for setting the background color to yellow. I also tried using style.color but neither worked.

I have a style

        .selected {
            color: yellow;
            background: yellow;
            background-color: yellow;

On the before sorting callback I add the class like:
//columnIndex is the column passed into the callback
var newSelectedColumn = grid.hdr.rows[1].cells[columnIndex];
newSelectedColumn.setAttribute(‘class’, (((newSelectedColumn.getAttribute(‘class’) != null) ? newSelectedColumn.getAttribute(‘class’) + ’ ’ : ‘’) + ‘selected’));

Bumping this because I really want to find out how to color the header. Above I showed the style I was trying to apply when using the suggested method to get the column header html tag. I got the html tag and added the style in javascript but it doesn’t seem to show, almost like they are setting an image as the header.

Issue occurs because of native grid header styles has highter priority then style of the cell with .selected class. To fix ti you should define .selected class like following:

div.gridbox_dhx_skyblue table.hdr td.selected { color: yellow; background: yellow; background-color: yellow; }
change “_dhx_skyblue” to the name of grid skin which you are using.