Customize Interactive Grid header using configuration object

Question

I'm trying to set the background color of column headers in an Interactive Grid form. There are a couple of things that I've tried:

• Assigned a static id to a column and made an inline css selector that targets that id - the outcome is that data cells only inherit those attributes while editing; header remains unaffected
• Assigned a class to a column and made an inline css selector that targets that class - the outcome is that all data rows inherit those attributes; header still remains unaffected
• I tried using the JavaScript Code option under Advanced that can use the configuration object and modify column behavior and appearance without much success. I managed to change column header text but nothing else. I suspect there is some member of that configuration object that affects header background color but I can't seem to find it.

So the question is:

How to customize Interactive Grid column header (namely, set its background color) using configuration object?

I suppose this might be considered a separate question, but if that turns out to be impossible, what would be the best alternative?

Answer 1

Re an alternative, if the change is static you can do it using page-level CSS. Each heading has a data-idx attribute whose value is a number unique within the grid. So if your IG region has the static ID "myRegion" then you can add CSS like the following to target a specific header:

#myRegion_ig th[data-idx="2"] {
    background-color: #dff;
}

Or to make all IG headers on the page the same:

.a-GV-header {
    background-color: #dff;
}

Answer 2

The first approach is problematic. It makes the change based on the position, not the particular column. If, for example, the first two columns in your grid are "First Name" & "Last Name", in that order. "First Name" would be data-idx = 1; "Last Name" would be data-idx = 2. If you assign the color blue to data-idx = 1 and green to data-idx = 2, then "First Name" will blue and "Last Name" will be green. However, if you swap then position of the two columns so that the order in your IG is "Last Name", "First Name", then "Last Name" will now be blue and "First Name" will be green.

The second approach works if you want to change the color of all the headers to only one color.