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:
ThanksBruno 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')
});
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);
sorry for my late reply :-(
this is working great!
thank you!
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