How do I apply CSS to my grid column header

Webix JS
#1

I have one grid which has column header and when I select any cell from the grid, the color of the respected column header should change dynamically.

#2

You can change related object in header’s configuration and call refreshColumns to repaint the grid

http://webix.com/snippet/7f7521ff

#3

Thanks for the snippet. I forgot to mentioned one thing that when I select another cell the previous selection of the header need to be disappear which is not happening in this snippet.

#4

Just add one more line to remove css from other headers.

http://webix.com/snippet/75b8702a

#5

Thanks for quick response.

#6

Need one more help as header is getting highlighted I want to highlight my 1st column cell (which is read-only) too so you can say cell is the intersection of the header and first column cell.

#7

You can use cssFormat
http://docs.webix.com/datatable__styling.html#cells

or addCellCss API
http://docs.webix.com/api__link__ui.treetable_addcellcss.html

#8

I tried with addCellCss, but applied css is not showing when my application is loaded but when I do inspect elements its shows there. Is there any internal function which refresh the entire grid (rather than this.refreshColumns) so that I can show my applied css on first column.

#9

You can call

dtable.refresh()

to repaint the data part of datatable. Call to addCellCss must trigger such repainting automatically, though

If issue still occurs then please provide demo link or a code snippet, where the wrong behavior can be checked.

#10

for (var index = 0; index < grid.config.data.length; index++) {
grid.removeCellCss(grid.config.data[index ].id, columnID, “myCSS” }

grid.addCellCss(selectedCell.row, columnID, local.getHeaderHighlightCss());
grid.refresh();

#11

grid.config.data[index ].id this line in your code is wrong. You need to use row id as first parameter, not the column’s id

Please check the next snippet

http://webix.com/snippet/59519a2f

It uses the updated code and works correctly

#12

…one interesting situation here, where I needed a bit time to figure it out - if you change the header value, you first need to refreshColumns() before you can change the CSS: If I did not do the refreshColumns() in between setting header value and changing CSS, the CSS change would not work/not be reflected. For me it worked like this.

editor.config.header[2] = 99;
this.refreshColumns();
editor.config.header[2].css={ “background”:"#24A259"};
this.refreshColumns();

I was also using addCellCss, but same situation here.