This is a migrated thread and some comments may be shown as answers.

Grid : want to give different color to a row

1 Answer 269 Views
Data Source
This is a migrated thread and some comments may be shown as answers.
Ashok
Top achievements
Rank 1
Ashok asked on 21 Jan 2012, 04:48 AM
Hello,

I am new to kendo ui. I have used grid to display my list of entries (stored in db). Now i want to make few rows in different color based on some condition i.e. i want to show all rows in different if any of my friends birthday is in next week. in my grid i am printing friend name and brithday.

Now as per the demo i used div for grid. It is showing all my friends in grid but there is no property where i can specify different colorfor few records.

Any idea how to achieve that?

Regards,
Ashok

1 Answer, 1 is accepted

Sort by
0
Andrew
Top achievements
Rank 1
answered on 22 Jan 2012, 03:43 AM
Tried templates?   I did a similar thing - first, use a template to display the field:

{ field: "revenue", title: "Revenue", template: "#= formatrevenue(revenue) #" }

the above calls a function so I can do some conditional tests to decide how to style the cell (in my example, values < 200K get one color, over a million get another, and either way we add commas or other formatting):

   <style type="text/css">
        .lowball { color:seagreen; }
        .paydirt { color:forestgreen;}
    </style>

 function formatrevenue(n) {
   if (n < 200000) {
return "<div class='lowball'>" + addCommas(n) + "</div>";
} else if (n > 1000000) {
return "<div class='paydirt'>" + addCommas(n) + "</div>";
} else {
 return addCommas(n);
}
 }

 
(Note, addCommas() is yet another function, not included in this post)

Tags
Data Source
Asked by
Ashok
Top achievements
Rank 1
Answers by
Andrew
Top achievements
Rank 1
Share this question
or