asp.net - Webmatrix - WebGrid: change css style conditionally -
i've started webmatrix , i'm trying transform html table webgrid. data comes db , want change css class each td (within 1 column) depending on items content.
so example if item contains "," apply class="multi", if doesn't contain "," , not null class="single", else "none".
<td class="multi"> <td class="single"> <td class="none">
i've tried webgrid style: , format: settings couldn't classname switch depending on value of item. think need right syntax started.
i hope can me out here. thank you.
if want use webgrid, real option set td
style based on cell value via javascript after has rendered. style
parameter accept string representing css class apply.
alternatively, can conditionally set content in format
parameter based on value, filling td
span
or div
can style eg:
<style> td.nopadding{padding: 0;margin: 0;} .green{background-color:green;display: inline-block;width: 100%;height: 100%;} .yellow{background-color:yellow;display: inline-block;width: 100%;height: 100%;} </style> <div id="grid"> @grid.gethtml( tablestyle : "table", alternatingrowstyle : "alternate", headerstyle : "header", columns: grid.columns( grid.column("country", style: "nopadding", format: @<text>@html.raw(item.country == "usa" ? "<span class=\"green\">" + item.country +"</span>" : "<span class=\"yellow\">" + item.country +"</span>")</text>)) ) </div>
update: following code illustrates more complex if..else statement being accommodated in format parameter:
format: @<text>@if(item.yourproperty == null){ @html.raw("<span class=\"none\">" + some_value +"</span>") } else{ if(item.yourproperty.contains(",")){ @html.raw("<span class=\"multi\">" + some_value +"</span>") } else{ @html.raw("<span class=\"single\">" + some_value +"</span>") } } </text>
Comments
Post a Comment