How to apply CSS to a table row while binding data in an ASP ListView

Looking for a way to apply a CSS style to a table cell based on certain conditions in my ListView control.

<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>

Answer №1

To easily accomplish this task, you can enhance your object/data source by adding an extra property and then utilizing it during the databinding process.

For instance, create a boolean attribute named LowestPrice

You can then check this attribute during databinding:

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

Your previous example would now look like this:

<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="lnkInfoGraph" 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>

This will assign the class BuyMeNow to the row when LowestPrice is evaluated as true.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to create a multi-line title within a div element?

Is there a way to make the div tag display multiple lines in a tool-tip on mouse hover instead of just one line? Here is the code I am currently using: <div title="Have a nice<br />day">blah</div> ...

Utilize an npm package to transform a CSS file into inline styles within an HTML document

I have an HTML file with an external CSS file and I would like to inline the styles from the external style sheet into one inline <style> tag at the top of the head. Any assistance would be greatly appreciated. Note: I do not want to use the style a ...

What sets apart returning Task<bool> from simply returning bool?

Hopefully this is a straightforward and helpful explanation. I am working with C# MVC Web API in ASP.NET Core 1. I am developing web methods and have come across examples of handling data retrieval. For instance, here's an example: public async Tas ...

How can we transfer animation duration and `@keyframe` values through a function in CSS?

In my angular project, I am currently adding animations to text. However, I want to make these animations dynamic. For instance, I have a CSS class called .slide-in-top with an animation time set to 1.3s. Instead of this static value, I want to be able to ...

What is the best way to design three flexible divs using display: table without the use of JavaScript?

https://i.sstatic.net/bEC4Y.png Is it possible to create a responsive layout with three divs that behave in the following way: When the viewport is narrow, the three divs stack on top of each other When the viewport is average, the first div spans full ...

Is there a way to insert anchor tags (for internal linking) within a gridview structure?

I am looking for a way to display a lengthy alphabetical list using a gridview on my webpage. Is there a method to insert anchor tags within the gridview so that I can have links at the top of the page which will directly jump to specific areas in the gri ...

The font size of the input DOM element appears smaller than anticipated until the user clicks on the page for the first

I have encountered a strange issue that I haven't been able to find any information about online. In my Angular 2 project, the font size of my bootstrap inputs is set to 1rem. However, after recompiling the project and loading the site for the first t ...

I am unable to line up every item next to one another

Regarding the topic at hand, I am facing an issue with aligning multiple objects that should be enclosed in i tags side by side. Despite attempting to use li tags and float:left and right in CSS, the position remains unchanged. Can anyone provide guidanc ...

What is the best way to left-align numbers in a table?

https://jsfiddle.net/6a7d2snj/ I need help aligning numbers to the left within a table column: 50 5 -40 -4 How can I achieve this? Using style="align:right" aligns the numbers on the right, but my goal is to have them aligned to the left! ...

Creating HTML code using PHP to display two tables next to each other

My goal is to display two tables side by side in an HTML table, each ordered by a different column. I attempted this using the following code: <tbody> <td> <?php require_once "db_data.php"; $bids_results = $mysqli-& ...

Detecting space keys with wildcards in Elasticsearch

Looking to search in elasticsearch similar to sql server? Here's the query I want to execute: select * from products where name like '%samsung a50%' I can achieve this with the following c# code snippet. c#: var items = elasticClient.Se ...

What is the best way to define line length in Bootstrap?

I have the following HTML: .line { width: 100%; height: 14px; border-bottom: 1px solid lightgrey; position: absolute; } .circle { height: 24px; width: 24px; background-color: lightgrey; border-radius: 50%; display: inline-block; } < ...

The character known as "';'" and represented by the hexadecimal value 0x3B is not permitted to be used in a name

Encountered the error "The ';' character, hexadecimal value 0x3B, cannot be included in a name." in log files for an ASP.NET Web App. The URL recorded appears as: mypage.aspx?paramone=one+two&amp;paramtwo=zero+1 Curious about which system/b ...

How can I prevent the content on my page from adding padding to the body of the page?

I'm working on designing a simple interface similar to Slack. However, I'm facing an issue where the left navigation is creating some padding from the body, even though I have set the padding and margin to zero. .app { display: flex; flex- ...

Retrieve the initial image link from a blogger's post in cases where it is not being stored on the Blogger platform for use in related

I am currently using a hosting service to store the images that I include on my blogger platform. However, I have encountered an issue where blogger does not automatically fetch the image url to use as the thumbnail when the image is hosted externally. C ...

On the initial page load, Magento is failing to load the CSS properly

I've been tinkering with the Magento website over at For some reason, the CSS on the Home page doesn't load initially, but it loads fine when you click on any other link like Products or Gallery. Any ideas why this might be happening? Thanks in ...

Validate the uniqueness of a name in an ASP.NET application using a custom validator that interacts

I need help creating a custom validator to ensure that each name entered is unique. However, it seems like the server side validation is not being executed. Does anyone know how I can resolve this issue? For reference, you can view the ASP code and code b ...

Optimizing Angular: Leveraging ngx-bootstrap to dynamically load images for faster page loading

I am currently facing a challenge with loading a large number of images in a carousel on my webpage. The issue is that when the page loads, all 300 images are loaded at once, causing a significant delay. Instead, I would like the images to load dynamically ...

Is it possible to target a specific element within one of two classes that share the same name using CSS or XPath in Webdriver.IO?

Currently, I am using Webdriver.io and facing a challenge in selecting an element within the "text-fields-container" class. This particular element happens to be a password field, and both classes share the same name. Can someone guide me on how to go abou ...

Incorporate a new JavaScript animation as the background for an established website, replacing the static background image

Seeking assistance with my portfolio as I delve into the world of Webdesign and learn the basics from templates. How can I integrate this javascript code into the background of my site, replacing the current minecraft image? Every attempt to implement it ...