How do I apply CSS to my grid column header

edited January 2015 in Technical questions

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.

Tagged:

Comments

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

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

  • 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.

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

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

  • Thanks for quick response.

  • 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.

  • 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.

  • 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.

  • edited January 2015

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

  • 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

  • ..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.

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!