Adding Dynamic Image Overlay to Databound Gridview

Question

I am trying to add an image overlay of a cell within a data bound gridview cell in ASP.Net (C#). The effect is designed to have a string within the image that is going to sit on top of the image that is pulled from the server.

IE:

Database contains path to images. Data grid is pulling these images in based on the ID of the items in question. I need to pull the price from the database and lay it onto an image that is placed over the data bound image cell.

SQL Statement gets results. Results contains path to image for items. Items are sometimes on sale, so a special overlay is needed. Overlay will have a varying price overlaying it.

I tried to break it down into easy portions. I am not sure if I am over thinking things or not but I can't find a feasible way to do this. The data is converted to a table due to the data grid control in ASP.Net, and there isn't any way to determine the IDs after the table is created.

If anyone has any ideas I would be most appreciative.

Answer 1

One way to do this is to set the cell's background to the image using CSS and write the price as plain text into the same cell (rendered output displayed):

<td class="product"  
    style="background: url(path-to-image.png) top left no-repeat">  
    <span class="price">$ 3.22</span>  
</td>  

The only downside to this approach is that the cell would have to be explicitly sized to the same dimensions as the image, which you may not know.

Another option is to use an <img> element inside the cell and still use a <span> for the plain text price (rendered output displayed):

<td class="product">
    <img src="path-to-image.png" alt="..."/>
    <span class="price">$ 3.22</span>
</td>

Regardless of which method, you would use CSS to position and style the price within the cell:

td.product { 
    position: relative
}
span.price {  
    position: absolute;
    top : 40px;    < whatever works for you
    left: 40px;    <  
}

A very simple GridView example with templating

You will need to set the GridView's AutoGenerateColumns property to false and handle the column creation and templating yourself.

<asp:GridView ID="products" runat="server"  
              AutoGenerateColumns="false"  
              DataKeyNames="productId"  
              DataSourceID="ObjectDataSource1">
    <Columns>
        <asp:BoundField DataField="productId" HeaderText="Product ID" />
        <asp:TemplateField HeaderText="Whatever ...">
            <ItemTemplate>
                <img src='<%# DataBinder.Eval(Container.DataItem,"productImageUrl") %>'
                     alt="..." />
                <span class="price">
                    <%# DataBinder.Eval(Container.DataItem,"productPrice","{0:c}") %>
                </span>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="productDesc" HeaderText="Description" />
    </Columns>
</asp:GridView>