Alternate Style on Grid Row


I would like to apply an alternate style to the rows of a grid. Every row appears to have the same id and class, anyone know how to achieve this?


If there is something in the data that you can use to determine how that item should be styled I guess you could use the “templateCss” property.

For example suppose each item in the list has a “record” number :-

{ "record":1, "name":"Fred", "location":"Here" },
{ "record":2, "name":"Bill", "location":"There" },
{ "record":3, "name":"John", "location":"Everywhere" },

You could use this function on the list :-

type: {
  templateCss: function(obj) {
    return obj.record % 2 ? 'css_if_odd' : 'css_if_even' ;

Also of course you would need to define the styles :-

<style type="text/css">
  .css_if_odd  { background-color: green; }
  .css_if_even { background-color: blue; }

I’ve done this on a grid to highlight certain rows based on a condition, but it relies on there being something in the data you can use to determine whether that condition is met, or not.

Thanks Mark, this is an even better solution than I was expecting.