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.

Nimrod · Accepted Answer · 2011-02-25T17:07:14.653

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>

Thanks, these values are all dynamically coming from a database and the table isn't built until the web page is accessed. The table contains things like the item image, what year it was made in, a link to view the information on the item, and so forth. — Xesaniel, Feb 25 '11 at 15:06
I understand, but for brevity's sake I was just outlining the concept. If you need an actual C# example that shows how to produce the html just let me know. — Nimrod, Feb 25 '11 at 16:03
I understand the concept, but the table generated from the data grid control doesn't add classes, IDs, or the like. So I am unsure how I would implement the solution provided. I understand the concept. — Xesaniel, Feb 25 '11 at 16:15
Is your DataView set to `AutoGenerateColumns="true"`? If it is, then that's the problem. You will need to set that property to false and specify your columns and the templating on the aspx page. — Nimrod, Feb 25 '11 at 16:28
Under Edit Columns on the grid view control the Auto-generate fields is set to false. It is bound to a datasource that pulls in the data. — Xesaniel, Feb 25 '11 at 16:54
I just added a very simple example. Unless I misunderstood, it should provide a little clarity. — Nimrod, Feb 25 '11 at 17:08
I actually think that will fit perfectly. Thank you very much. — Xesaniel, Feb 25 '11 at 17:59

Adding Dynamic Image Overlay to Databound Gridview

1 Answers1

A very simple GridView example with templating