Column Header Backcolor

Getting help Questions
1

Hi, I need to display a different color for a few column in the handsontable
and I found a sample below, but I am getting " Cannot read property ‘addClass’ of undefined" from the line of “Handsontable.Dom.addClass(‘TH’, ‘color1’);”

sample that has what I need to do in my project : https://codepen.io/js-ziggle/pen/pjpNWZ?editors=0110

Do I need to reference in the html file? I am only referencing “dist/handsontable.full.min.js” on my file.

thanks,

2

Hi @jchoi2006

in version 1.11.0 we have changed some global variable names and Dom have been renamed to dom.

Here is a working example http://jsfiddle.net/znkmwfpt/1/

3

thanks, my user wants to be able to highlight(or different color) random multiple columns on demand, meaning he wants to press on a right-click context menu, and change the color of the column header
Can you please guide me how.
thanks for your help

4

First step is to create a custom context menu item. I do not know what type of an option you prefer but it would be the easiest to create a submenu.

Here is how the structure can look like https://jsfiddle.net/oc4e2p1c/

Then you need to call instance.getSelected()[1] which will return a column index of currently selected column. It will allow you to change styles only for the column.

EDIT: I have tested the example and it seems like the submenu is not a perfect pick, there’s one issue at https://github.com/handsontable/handsontable/issues/3550 that can cause some unexpected console logs.

However the input type color can also do they job https://jsfiddle.net/rk4eryfh/

5

yes that was how I did create a context menu, and was able to get the column index by using instance.getSelected()[1]
and display different color on the column header, I found I need to use Handsontable.dom.addClass(elem, className);

how do I get the “elem” , I know how to get column index using instance.getSelected()[1]

Thanks in advance

6

Can you share a demo with your recent progress? It will be much easier for me to jump into already made code

7

mine is basically same as your example… all I need is… how do I color the selected column header.
your example shows chosenColumnIndex, how do I color the column header with this index number?

8

You access the element in the in afterGetColHeader callback in the first demo that you’ve send me https://codepen.io/js-ziggle/pen/pjpNWZ?editors=0110
It uses an index and the TH element.
Once a new color is picked by the context menu you can update the afterGetColHeader via updateSettings method.

9

thanks for your help, that worked for me…

10

great. Thanks for keeping me updated.