Remove stripes from Grid

How do I remove the alternate row coloring from a Grid ?. I’m using Valo theme.

This was pretty easy to do with Table:

table.addStyleName(ValoTheme.TABLE_NO_STRIPES); but there’s no
ValoTheme.GRID_NO_STRIPES
.
What to do ?

I’m not sure if Grid has an option to remove the stripes built in, but at least it is easy to add it yourself. If someone knows that there actually is this feature already built-in, then please do share the info.

You can add something like this into your css theme .no-stripes .v-grid-row-stripe > td {background-color: #FFF;} and then you can add the style name to the grid:

grid.addStyleName("no-stripes"); or if you prefer:

grid.addStyleName(ValoTheme.TABLE_NO_STRIPES); If it doesn’t work then check that the css row is more specific than the one in Valo, and add classnames or identifiers to the row to make it more specific.

I went through the theme files as well and did not found any built in option to remove stripes. You can however override the scss variable $v-grid-row-stripe-background-color to change the stripe color

Yeah, I’ve come to the (same) conclusion that it is highly useful to go through the Valo source (sass). It is well organised so I can only recommend it. If you do that you’ll realize that there are in fact more Valo variables that are ready for you to use than what is documented.

Thus, an easy way to remove grid row striping is to do this in your in your theme customization:

// Make row-stripe and non-row-stripe colors the same.
// Result: no striping !
$v-grid-row-stripe-background-color: $v-grid-row-background-color !default;

This will of course remove row striping on
all
your Grids … but that was what I wanted in my case.

Hello,

is there a general solution for the grid available?
I would like to disable the stripe-layout per grid component and not for all grids.

Thank you, best Regards
Thomas

Here are the recipies:



Disabling striping on a per-grid basis

If you want to disable striping for a single grid, and not for all grids, then follow these instructions.

  1. Add the following to your theme’s
    .scss
    file:

.no-stripes .v-grid-row-stripe > td { background-color: $v-grid-row-background-color; } (remember to recompile your theme)

  1. For the grids where you want no striping, you simply add the “no-stripes” style:
mygrid.addStyleName("no-stripes");



Disabling striping for all grids in the application

Add the following to your theme’s
.scss
file:

// Make row-stripe and non-row-stripe colors the same. // Result: no striping ! $v-grid-row-stripe-background-color: $v-grid-row-background-color !default; (remember to recompile your theme)

These recipies work both in v7 and v8. They will also work for
TreeGrid
.
The recipies work for Valo, not necessarily for other themes. But for Valo they’ll work regardless of color. As you notice they use the SASS variables so they’ll automatically adapt to whatever Valo color styling you have applied, e.g. you may be using a dark theme.

Also see
this ticket
.

You can use attribute “oddRowClass” of grid.