Search code examples
oracle-apex-5.1

Customize Interactive Grid header using configuration object

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?

Solution

  • 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;
}