3

I am using the MVC3 WebGrid (Razor) and everything is working fine. However, I need to vary the css class that is attached to a particular column based on the value that is in the column.

I have a non-Server-side JQuery way of doing this already. There are a few reasons why I want this to happen outside of JQuery.

Basically, I'm doing cell traffic-lighting/highlighting based on the value of the cell. So if the value in the cell is "62.5", the class that needs to be attached to the <td> is scr60. This sets the background-color for the cell to the appropriate shade.

<tr>
  <td class="scr60">62.5</td>
</tr>

I know I can control the output of the contents of the cell using the format: parameter on the grid.Column() definition, but I need to set the CSS class for the actual <td> that contains the contents (so that the entire cell is highlighted, not just the value/content itself.

I already have a separate helper class/method to output the name of the CSS class I want to use, based on the value. What I need is a way to adjust the style of the containing <td> using the output of that method.

Again, I already have a JQuery solution that does this, I'm looking for a way to do this with the webgrid itself.

Jay Stevens
  • 5,863
  • 9
  • 44
  • 67
  • I tried playing around with the WebGrid and couldn't find a solution for you. There is a "style" property on grid.Column, but from what I can tell it sets the style for the entire column, not the individual cell. – Sam May 09 '11 at 21:45
  • thanks anyway Sam. I'm afraid I may need to look at another grid (MvcContrib Grid?) or just do it in a table to get what I need/want. – Jay Stevens May 09 '11 at 22:01
  • I ended up using google.visualization.data Table chart visualizations. – Jay Stevens Jun 30 '11 at 19:18

2 Answers2

1

From my experience with WebGrid you can't do this BUT you can include a span within the "cell" and add your class(es) to the span based on whatever condition you want.

MarkG
  • 1,859
  • 1
  • 19
  • 21
-1

Like the 'format:' parameter, there is a 'style:' parameter which you can use like this:

style: "class1 class2"
tathagata
  • 478
  • 3
  • 12