Color Grid Header

Suite and Optimus Suite 5
#1

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.

#2

“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

#3

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

#4

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’));

#5

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.

#6

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.