How can I set a table row color in my repeater based on the values databound to that row in ASP.NET?

Question

I have a repeater control:

 <table style="width: 100%">
     <asp:Repeater runat="server" ID="rptOptions" OnItemDataBound="rptOptions_ItemDataBound">
                                <HeaderTemplate>
                                    <tr>
                                        <td class="GridHeader">Account</td>    
                                        <td class="GridHeader">Margin</td>  
                                        <td class="GridHeader">Symbol</td>  
                                        <td class="GridHeader">Price</td> 
                                    </tr>
                                </HeaderTemplate>
                                <ItemTemplate>
                                    <tr>
                                        <td class="GridRow"><asp:Label runat="server" ID="lblOptionAccount"></asp:Label></td>
                                        <td class="GridRow"><asp:Label runat="server" ID="lblOptionMargin"></asp:Label></td>
                                        <td class="GridRow"><asp:Label runat="server" ID="lblOptionSymbol"></asp:Label></td>
                                        <td class="GridRow"><asp:Label runat="server" ID="lblOptionPrice"></asp:Label></td>
                                    </tr>
                                </ItemTemplate>
                             </asp:Repeater>
                        </table>

And the following code-behind databound method:

protected void rptOptions_ItemDataBound(object sender, RepeaterItemEventArgs e)
        {
            if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
            {
                Option rowOption = (Option)e.Item.DataItem;

                ((Label)e.Item.FindControl("lblOptionAccount")).Text = rowOption.Account;
                ((Label)e.Item.FindControl("lblOptionMargin")).Text = rowOption.Margin ? "Y" : "N";
                ((Label)e.Item.FindControl("lblOptionSymbol")).Text = rowOption.Symbol;
                       ((Label)e.Item.FindControl("lblOptionPrice")).Text = rowOption.Price.ToString("C", currencyFormat);

            }
        }

There are more columns in that grid, but I've slimmed it down just for the question.

Now, what I would like to do is change the tr's background color based on the price amount. If it is within different levels, I would like to change the rows background color correspondingly.

Do I have to do this with javascript or is there some way I can get access to the table rows in the code-behind to set this color?

Answer 1

make it to runat="Server"

<tr runat="server" ID="trHeader"></tr>

Then find that Table Row in by ID in your code behind in databound event, like what you are doing for other server side control and change color.

Answer 2

another option:

<tr class="<%# GetClassForPrice( Container.DataItem ) %>">

and in code-behind

protected string GetClassForPrice( object data ) 
{
    var rowOption = (Option)data;
    if(rowOption.Price > 100) return "red";
    else return "green";
}

also... any reason you're not using data binding? it would let you eliminate your ItemDataBound code-behind method.

<tr>
    <td class="GridRow"><%# Eval("Account") %></td>
    <td class="GridRow"><%# ((bool)Eval("Margin")) ? "Y" : "N" %></td>
    <td class="GridRow"><%# Eval("Symbol") %></td>
    <td class="GridRow"><%# Eval("Price", "{0:c}") %></td>
</tr>

Answer 3

use this code inside repeter databound event.

HtmlTableRow tr = (HtmlTableRow)e.Item.FindControl("trID"); 
tr.Visible = false;

Answer 4

Another option you can use is jQuery. Seeing you're using a repeater, that gives you full control over your output. Jquery can get into your table, look at the data and format it how you want it.

Look at: http://plugins.jquery.com/project/Plugins/category/54

http://plugins.jquery.com/project/Colorize

http://franca.exofire.net/js/demo_cross.html

Alternately you can use the Code behind in the repeater to set the CSS Class of the cells/rows/columns you need changed.

You'll need to make those controls server controls (require: ID="my_thing" runat="server"), create those controls (use the find control and bind them), then set the CSS class after you determine the value.

Answer 5

Dave Thieben's answer works nicely, except that the css is missing.

If you add the following then the example will work:

table tr.red td { background-color:red; }
table tr.green td { background-color:green; }