Different colors on rows in gridview

Answers

• Options

  Jeff_Lang Customer Ninja IT Monkey ✭✭✭✭

  July 2018

  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
  

  2
• Options

  Mikkel_Madsen Customer Advanced IT Monkey ✭✭✭

  August 2018

  Hi @Jeff_Lang
  
  Did you find the code
  
  /mikkel

  0
• Options

  Jeff_Lang Customer Ninja IT Monkey ✭✭✭✭

  August 2018 edited August 2018 Answer ✓

  @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>

  
  

  
  

  7
• Options

  Mikkel_Madsen Customer Advanced IT Monkey ✭✭✭

  August 2018

  @Jeff_Lang
  
  This is totally awesome!! Thanks a lot
  
  /mikkel

  0