Different colors on rows in gridview

Mikkel_Madsen

Hi, has anyone made a solution for different colors in gridviews so odd lines has a slightly different color than even line numbers?
/mikkel

Jeff_Lang

@Mikkel_Madsen

Here is the code we have in our custom.css , just as a FYI each alternate table row on the grid views gets a class of 'k-alt' which is what we use to set the alternate colouring etc

We went for keeping the same greyish look, but every 2nd line darker just to make it easy to visually seperate them

/*<br> * alt grid rows updated colour<br>*/<br><br>/*  Grid Higlighted Column(s) Background Color */<br>.k-grid td.grid-highlight-column,<br>.k-grid td.grid-highlight-column-last,<br>.k-grid td.grid-highlight-column-title {<br>    background-color: #f6f8f9;<br>}<br><br>    .k-grid td.grid-highlight-column a,<br>    .k-grid td.grid-highlight-column-last a,<br>    .k-grid td.grid-highlight-column-title a {<br>        color: #808080 !important;<br>        transition: none;<br>        text-decoration: none;<br>    }<br><br>	<br>/*  Grid Higlighted Column(s) Background Color */<br>.k-grid tr.k-alt td.grid-highlight-column,<br>.k-grid tr.k-alt td.grid-highlight-column-last,<br>.k-grid tr.k-alt td.grid-highlight-column-title {<br>    background-color: #EDF1F2;<br>}<br><br>/*  Grid Higlighted Column(s) Background Color */<br>.k-grid tr.k-alt td {<br>    background-color: #F6F8F9;<br>}<br><br>/*  Grid Higlighted Column(s) Selected Background Color */<br>.k-grid tr.k-state-selected:hover td,<br>.k-grid tr.k-alt.k-state-selected:hover td {<br>    background-color: #98abc9;<br>}<br>/*  Grid Higlighted Column(s) Hover Background Color */<br>.k-grid tr:hover td {<br>    background-color: #EDF1F2;<br>}<br><br>/*  Grid Higlighted Column(s) Hover Background Color */<br>.k-grid tr.k-alt:hover td.grid-highlight-column,<br>.k-grid tr.k-alt:hover td.grid-highlight-column-last,<br>.k-grid tr.k-alt:hover td.grid-highlight-column-title {<br>    background-color: #98abc9;<br>}<br><br><br>/*  Grid Higlighted Column(s) Selected Background Color */<br>.k-grid tr.k-alt.k-state-selected td.grid-highlight-column,<br>.k-grid tr.k-alt.k-state-selected td.grid-highlight-column-last,<br>.k-grid tr.k-alt.k-state-selected td.grid-highlight-column-title {<br>    background-color: #98abc9;<br>}<br><br>/*  Grid Higlighted Column(s) Selected Background Color */<br>.k-grid tr.k-alt.k-state-selected td {<br>    background-color: #98abc9;<br>}<br><br>

Jeff_Lang

you can do that with a bit of css, not currently at work so can't paste the exact bit we used to do it, but will check tomorrow and paste it

Mikkel_Madsen

Hi @Jeff_Lang

Did you find the code

/mikkel

Jeff_Lang

@Mikkel_Madsen

Here is the code we have in our custom.css , just as a FYI each alternate table row on the grid views gets a class of 'k-alt' which is what we use to set the alternate colouring etc

We went for keeping the same greyish look, but every 2nd line darker just to make it easy to visually seperate them

/*<br> * alt grid rows updated colour<br>*/<br><br>/*  Grid Higlighted Column(s) Background Color */<br>.k-grid td.grid-highlight-column,<br>.k-grid td.grid-highlight-column-last,<br>.k-grid td.grid-highlight-column-title {<br>    background-color: #f6f8f9;<br>}<br><br>    .k-grid td.grid-highlight-column a,<br>    .k-grid td.grid-highlight-column-last a,<br>    .k-grid td.grid-highlight-column-title a {<br>        color: #808080 !important;<br>        transition: none;<br>        text-decoration: none;<br>    }<br><br>	<br>/*  Grid Higlighted Column(s) Background Color */<br>.k-grid tr.k-alt td.grid-highlight-column,<br>.k-grid tr.k-alt td.grid-highlight-column-last,<br>.k-grid tr.k-alt td.grid-highlight-column-title {<br>    background-color: #EDF1F2;<br>}<br><br>/*  Grid Higlighted Column(s) Background Color */<br>.k-grid tr.k-alt td {<br>    background-color: #F6F8F9;<br>}<br><br>/*  Grid Higlighted Column(s) Selected Background Color */<br>.k-grid tr.k-state-selected:hover td,<br>.k-grid tr.k-alt.k-state-selected:hover td {<br>    background-color: #98abc9;<br>}<br>/*  Grid Higlighted Column(s) Hover Background Color */<br>.k-grid tr:hover td {<br>    background-color: #EDF1F2;<br>}<br><br>/*  Grid Higlighted Column(s) Hover Background Color */<br>.k-grid tr.k-alt:hover td.grid-highlight-column,<br>.k-grid tr.k-alt:hover td.grid-highlight-column-last,<br>.k-grid tr.k-alt:hover td.grid-highlight-column-title {<br>    background-color: #98abc9;<br>}<br><br><br>/*  Grid Higlighted Column(s) Selected Background Color */<br>.k-grid tr.k-alt.k-state-selected td.grid-highlight-column,<br>.k-grid tr.k-alt.k-state-selected td.grid-highlight-column-last,<br>.k-grid tr.k-alt.k-state-selected td.grid-highlight-column-title {<br>    background-color: #98abc9;<br>}<br><br>/*  Grid Higlighted Column(s) Selected Background Color */<br>.k-grid tr.k-alt.k-state-selected td {<br>    background-color: #98abc9;<br>}<br><br>

Mikkel_Madsen

@Jeff_Lang

This is totally awesome!! Thanks a lot

/mikkel