-1

I want to add some style classes to a handsontable cell header (colHeaders). I am using a custom renderer to do this on the table cells however i can't find out how to do this to the cell header.

I have tried to use JQuery to add a class to the appropriate colHeader in the custom renderer however this doesn't seem to work. Looking at the style of the th in chrome inspector shows an empty style attribute. Does handsontable have another way to add a style to a class? I need to do this to selected column headers and not all of them.

var container = document.getElementById('spreadsheet');
hot = new Handsontable(container, {
    data: null,
    startCols: columns.length,
    colHeaders: columns,
    minSpareRows: 100,
    rowHeaders: true,
    contextMenu: false,
    columnSorting: true,
    stretchH: 'all',
    cells: function (row, col, prop) {
        var cellProperties = {};
        cellProperties.renderer = hiddenCellRenderer;
        return cellProperties;
    }
});

function hiddenCellRenderer(instance, td, row, col, prop, value, cell) {
var modeColumns = getCurrentModeColumns();

//Check for a hidden field match, if so add the CSS value
if(modeColumns[col].hidden == '1') {
    $(td).addClass("hidden-cell");
    $(td).closest('table').find('th').eq(col).addClass("hidden-cell");
}

   return;
}
Tim
  • 111
  • 2
  • 5
  • Where does `getCurrentModeColumns();` come from? Are you sure `modeColumns[col].hidden` is a string? – Jon P Aug 03 '15 at 01:00
  • getCurrentModeColumns is another function that gets a JSON array of the current mode columns. This is used to set the text in the colHeaders along with the data as to if the column should be hidden. Yes, this is a string as it works in the first link $(td).addClass("hidden-cell"); however it never gets set on the second line for the table header. – Tim Aug 03 '15 at 01:40
  • Add some console logging to test your second jquery selector: `console.log($(td).closest('table')) ; //chcek table found console.log($(td).closest('table').find('th')); //Check you've found some th console.log($(td).closest('table').find('th').eq(col)); //check you've found the final target` (make sure to reformat the code to seperate lines!) That should help you debug the selector. – Jon P Aug 03 '15 at 02:00
  • Added console logging which shows the attribute being set via JQuery however there is still an empty class tag in the th element where it was set. Perhaps handsontable overwrites the th class attribute after the code has set it? – Tim Aug 03 '15 at 03:35
  • You can't change anything on the header using jquery because as soon as you do, or soon after, Handson will trigger it's re-render event, making your changes dissapear – ZekeDroid Aug 04 '15 at 00:34

1 Answers1

0

The renderer only applies to cells, and not to the headers defined in colHeaders. Now, colHeaders takes an array of strings which can contain HTML in them. The best solution is to simply set your HTML here. If you ever need to update these headers, simply modify the string in the colHeaders array and do:

hotInstance.updateSettings({
    colHeaders: modifiedColHeaders
})
ZekeDroid
  • 7,089
  • 5
  • 33
  • 59