[OutSystems Data Grid] Change header backgroundcolor
data-grid-reactive
Reactive icon
Forge component by Platform Maintenance
Application Type
Reactive
Service Studio Version
11.14.11 (Build 59394)

Hello Guys,

is it possible to change the background color of the header?


the first column green and the second yellow?

Thank you!

Hey Andik,


Another way to achieve this is if you use our Styling/AddColumnCssClassAPI method. Passing true on the applyToHeader parameter.


Notice that for this to work, you'll need to be specific with your CSS, otherwise the column cells will have the CSS applied as well.

.wj-cell.wj-header.custom-background-red {

    background-color: var(--color-red);

}



HI @AndiK,

Thanks for reaching us with this use case. Unfortunately we doesn't support this by default but we will check if we can add this as a feature and add it to our backlog. For now, only is possible to change the color by CSS.

Please add this snippet to your theme:
.wj-colheaders .wj-header:nth-child(1) {
     background-color: var(--color-green);
}

.wj-colheaders .wj-header:nth-child(2) {
     background-color: var(--color-yellow);
}

Here is on example: 

Thanks
Bruno Marcelino

Thank you @b.marcelino 

that's working fine, but if i export to excel the header is not colored

Is there a solution for this? Or must i create my own action with advanced Excel or someting like this?


Thank you

Hey @AndiK!


That's true. We are sorry, but as of now, this solution doesn't color our excel exports. We created an issue on our backlog and should have a solution for this in a near future.


Thank you,

Gabriel Lundgren

Hello again,


today i added some columns and i have a problem if i scroll horizontal, the heasder color moves to the next column.

May be the NthRow is only for  the visible content?


This there a solution for this?

Update:


i added a MutationObserver to the div(wj-colheaders)

know if iam scrolling or editing a row the function would be called


function changeBackColor() {

var nodes = $('.wj-colheaders .wj-header')

$.each( nodes, function( index, node ){

    var text  = node.textContent || node.innerText;

    switch(text.toUpperCase()){

        case "ID":

        case "FIRSTNAME":

        case "BIRTHDATE":

        node.classList.add('myRedColor')

        break;

        default : 

        node.classList.add('myGreenColor')

        break;

    }

});

}


const targetNode = document.getElementsByClassName('wj-colheaders')[0];

const config = { childList: true, subtree: true };


const callback = function(mutationsList, observer) {

    for(let mutation of mutationsList) {

        if (mutation.type === 'childList') {

           console.log('changed detected')

           changeBackColor()

        }

    }

};


const observer = new MutationObserver(callback);


observer.observe(targetNode, config);


Hey Andik,


Another way to achieve this is if you use our Styling/AddColumnCssClassAPI method. Passing true on the applyToHeader parameter.


Notice that for this to work, you'll need to be specific with your CSS, otherwise the column cells will have the CSS applied as well.

.wj-cell.wj-header.custom-background-red {

    background-color: var(--color-red);

}



sorry for my late reply :-(


this is working great!

thank you!

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.