Change background color of every other row

user_12938545 0
Viewed 3507

I'm trying to replicate the default settings of ag-grid which paints every other rows background in a slightly different color. But when I try to reorder columns clicking on headerColumn the background colors doesn't reorder.

This is my current approach that isn´t working

cellStyle(params) {
  let backgroundColor = #FFFFFF;
  if (params.node.rowIndex % 2 === 1) backgroundColor = #E04F00;
}

https://plnkr.co/edit/bHLEmECLNby3obIT, this example shows the desired behavior.

Is there a way to acces and change those default colors?

ag-grid css javascript
3 Answers

I found out that the default themes of ag-grid already did what I wanted, the thing is that the theme I'm using has two colors that are very similar, what I really needed was to change that default color.

I was able to achieve that by overriding theme's variable

.ag-theme-balham {
  --ag-odd-row-background-color: #E04F00;
}
.ag-theme-balham .ag-row-odd {
  background-color: var(--ag-odd-row-background-color);
}

I followed their documentation, first here https://www.ag-grid.com/javascript-grid-styling/, that took me to https://github.com/ag-grid/ag-grid-customise-theme, where I discovered which variable I should edit.

user_129385450

Checking the working example you are showing here, each .ag-row div has an additional class .ag-row-odd or .ag-row-even. So basically those classes mimic the behavior you could achieve by using .ag-row:nth-child(odd) and .ag-row:nth-child(even).

What might be happening in this case is that when you reorder the .ag-row elements the classes are not being updated, instead just moved around. What that would represent is something like this:

<!-- Default //-->
<div class="ag-row ag-row-even"></div>
<div class="ag-row ag-row-odd"></div>
<div class="ag-row ag-row-even"></div>
<div class="ag-row ag-row-odd"></div>

<!-- Sorted //-->
<div class="ag-row ag-row-odd"></div>
<div class="ag-row ag-row-odd"></div>
<div class="ag-row ag-row-even"></div>
<div class="ag-row ag-row-odd"></div>

So in this case what I would recommend is either to change the styles to:

.ag-row:nth-child(odd) {
    background-color: #fcfcfc;
}
.ag-row:nth-child(even) {
    background-color: #ffffff;
}

If that's not an option than you should review the script that reorders the .ag-row elements as it's probably not changing the classes accordingly.

UPDATE

I think I found your issue. I checked this example

And while inspecting elements I saw that when you reorder, each row has these two attributes.

<div row-index="3" aria-rowindex="7"></div>

From what I was able to determine even if you change your sort parameters, those two attributes don't actually change. So if you base your row styles on them, like you do with the row-index parameter, you'll never get a correct order, because sometimes you get:

<div row-index="3" aria-rowindex="7"></div>
<div row-index="5" aria-rowindex="9"></div>
<div row-index="7" aria-rowindex="11"></div>

As this is not incorrect, the styles are applied, but not in the order you would prefer. The script is doing its job as intended, it's just that your condition for the colors is not working.

The solution to this I think would be 100% css and for you to remove the cellStyle definition, because I think the problem lies there.

user_11696860

CSS is going to be the easiest solution to this. I don't see your html, but essentially you will want to reference the html table's rows, and then add a css nth-child(even) and nth-child(odd) to them. Here is an example:

p:nth-child(odd)
{
    background: #ccc;
}
p:nth-child(even)
{
    background: #fff;
}
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>

And here are some more examples from w3:

Depending on what your specific code looks like, there may be different ways of doing this. I noticed you have js in your question, but since there was the css tag, I gave a css answer.

user_110084570
Related