CODEWITHSUNDEEP
asp.netcsslistview
thatuxguy
thatuxguy

Reputation: 2528

add CSS to a table row when databinding an asp listview

I am populating a Listview control from my codebehind.

Does anyone know of a way i can assign a css style to a table cell, is say the lowest price is greater than the amazon price?

 <asp:ListView ID="lv1" runat="server" ItemPlaceholderID="itemPlaceholder" OnPagePropertiesChanging="ChangePage">
    <LayoutTemplate>
        <table id="dataTable">
            <thead>
            <tr>
                <th class="t-left">Product Title</th>
                <th>SKU</th>
                <th>Our Price</th>
                <th>Amazon Price</th>
                <th>Lowest Price</th>
                <th>Actions</th>
            </tr>
            </thead>
            <tbody  id="dataResults" >
            <tr id="itemPlaceholder" runat="server"></tr>
        </tbody>
        </table>
    </LayoutTemplate>
    <ItemTemplate>
      <tr id='<%#Eval("sku") %>'>
       <td class="t-left" width="360px">
           <asp:HyperLink ID="prodLnk" runat="server" NavigateUrl='<%#"~/product/editproduct.aspx?sku=" + Eval("sku") %>' ToolTip="Edit this product listing">
                <asp:Label runat="server" ID="lblTitle"><%#Eval("title") %></asp:Label>
           </asp:HyperLink>
       </td>
       <td><asp:Label runat="server" ID="lblSku"><%#Eval("sku") %></asp:Label></td>
       <td><asp:Label runat="server" ID="lblTWE">£<%#Eval("twePrice") %></asp:Label></td>
       <td class="amzprice-edit"><input type="text" id='<%#"txt" + Eval("sku") %>' value='<%#Eval("amzPrice") %>'> </td></td>
       <td>
           <asp:Label runat="server" ID="lblLow">£<%#Eval("lowprice")%></asp:Label>
           <a href='<%#"lowpricedata.aspx?sku=" + Eval("sku") %>' id="lnkInfoGrpah" class="link-to info-graph" data-fancybox-type="iframe"><img src="images/icons/graph-icon.png" alt="Info" title="View Lowprice History" /></a>
       </td>

       <td><div class="twe-button mini update">Update</div></td>
      </tr>
    </ItemTemplate>
</asp:ListView>

Upvotes: 1

Views: 1227

Answers (1)

dash
dash

Reputation: 91510

The simplest way to do this is to add an additional property to your object/data source and then use that in the databinding stage.

For example, create a boolean property called LowestPrice

You can then evaluate this when databinding:

class='<%# Eval("LowestPrice") == true ? "BuyMeNow" : "BuyMeLater" %>'

Your example above would become something like:

<ItemTemplate>
  <tr id='<%#Eval("sku") %>' class='<%# Eval("LowestPrice") == true ? "BuyMeNow" : "BuyMeLater" %>'>
   <td class="t-left" width="360px">
       <asp:HyperLink ID="prodLnk" runat="server" NavigateUrl='<%#"~/product/editproduct.aspx?sku=" + Eval("sku") %>' ToolTip="Edit this product listing">
            <asp:Label runat="server" ID="lblTitle"><%#Eval("title") %></asp:Label>
       </asp:HyperLink>
   </td>
   <td><asp:Label runat="server" ID="lblSku"><%#Eval("sku") %></asp:Label></td>
   <td><asp:Label runat="server" ID="lblTWE">£<%#Eval("twePrice") %></asp:Label></td>
   <td class="amzprice-edit"><input type="text" id='<%#"txt" + Eval("sku") %>' value='<%#Eval("amzPrice") %>'> </td></td>
   <td>
       <asp:Label runat="server" ID="lblLow">£<%#Eval("lowprice")%></asp:Label>
       <a href='<%#"lowpricedata.aspx?sku=" + Eval("sku") %>' id="lnkInfoGrpah" class="link-to info-graph" data-fancybox-type="iframe"><img src="images/icons/graph-icon.png" alt="Info" title="View Lowprice History" /></a>
   </td>

   <td><div class="twe-button mini update">Update</div></td>
  </tr>
</ItemTemplate>

Which would apply the class BuyMeNow to the row when LowestPrice is true.

Upvotes: 1

Related Questions