how to have different color rows in datatable

Site and Services
#1

How do you make it so that on a datatable every other row alternates the background color. So say rows 1,3,5,7 … and so on has a white background while rows 2,4,6,8… and so on ahs say a grey background (or whatever color other than the odd number rows)? It is just easier in the eyes if colors alternate.

#2

You can use a simple css rule

http://webix.com/snippet/da3ba095

<style>
  .webix_cell:nth-child(2n){
      background-color:#eff;
  }
</style>
#3

Hello,
this example works fine.

I need something similar: datatable rows in alternating background color and drag&drop.

What do I have to change in this snippet ?
http://docs.webix.com/samples/15_datatable/22_dnd/02_in_out.html

The DnD-Target row should remain yellow even if as “second row”.

Thanks
Kerstin

#4

@kfender hello, if I’ve understood correctly, here’s a solution:

http://webix.com/snippet/13380479

#5

hello Olga,
your solution works, but my sample with own style does not work
http://webix.com/snippet/9ff2f553

Kerstin

#6

You need to check one more condition. Here’s the corrected style:

.webix_cell:nth-child(2n){
      background-color:#cff;
}
.znt-cell-bg-2n .webix_cell:not(.webix_row_select):not(.webix_drag_over):nth-child(2n) {
      background-color: #ff0000;
}
#7

Hi,

what is the .znt-cell-bg-2n meaning? And what is the condition for this red colour to appear?
Thanks

#8

Hi, @Galéace

It’s just a name of a custom class applied to the grid, in order to change default styling for the datatables which have css: 'znt-cell-bg-2n' property.

#9

Ouuups, of course.!

Thank you.