477
Views
8
Comments
Solved
[OutSystems Data Grid] Change header backgroundcolor
outsystems-data-grid
Reactive icon
Forge asset by OutSystems
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!

2020-08-05 09-00-16
Gabriel Lundgren
Solution

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);

}



2019-07-01 15-21-53
b.marcelino

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

UserImage.jpg
AndiK

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

2020-08-05 09-00-16
Gabriel Lundgren

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

UserImage.jpg
AndiK

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?

UserImage.jpg
AndiK

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);


2020-08-05 09-00-16
Gabriel Lundgren
Solution

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);

}



UserImage.jpg
AndiK

sorry for my late reply :-(


this is working great!

thank you!

2019-05-02 11-42-50
Alfio Esposito

Hello Gabriel,

Sorry for replying to an older post, but I am having an issue when I am trying to implement your solution. My goal is to make the header cell of a column red. Instead I get alternate cells that have a red color but not the header cell.

I have attached the oml for reference. 

What am I overlooking here?

Regards,
Alfio Esposito

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