Gridview - Conditional Images

This Gridview sample shows how to, for each row, based on other data within that row, to show a different image. We do this by creating a TemplateField, and putting an ASP.Net Image control within it, called 'Image1'.

Then, inside the RowDataBound event of the Gridview, we put code, which first, checks and finds the Image control in that row, and then assigning a different JPG file to the ImageURL property of that image. One other thing here, you'll notice, is that when the criteria is matched, we set the Image control's Visible property to 'True'. That's because, one extra criteria is, that if the Units In Stock is larger than 80, we set the Image control's Visible property to 'False'.

Naturally, since we're checking one particular column in the Gridview for this data, we're using a Select Case statement.

Code Behind:

Protected SubGridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) 
    If e.Row.RowType = DataControlRowType.DataRow Then 
        Dim img As Image = CType(e.Row.FindControl("image1"), Image)
        If e.Row.Cells(3).Text = 0 Then 
            img.ImageUrl = "~/images/red.jpg" 
            img.Visible=True 
        End If 
        If e.Row.Cells(3).Text <= 25 And e.Row.Cells(3).Text > 0 Then 
            img.ImageUrl = "~/images/yellow.jpg" 
            img.Visible=True 
        End If 
        If e.Row.Cells(3).Text > 25 Then 
            img.ImageUrl = "~/images/green.jpg" 
            img.Visible=True 
        End If 
        If e.Row.Cells(3).Text > 80 Then 
            img.Visible=False 
        End If 
    End If
End Sub

HTML Source:

<asp:gridviewid="GridView1" runat="server" autogeneratecolumns="False"
    datakeynames="ProductID" datasourceid="ds1" allowpaging="True"     
    rowdatabound="GridView1_RowDataBound"> 
    <Columns> 
        <asp:TemplateField> 
            <ItemTemplate> 
                <asp:Image ID="Image1" runat="server" /> 
            </ItemTemplate> 
        </asp:TemplateField> 
        <asp:BoundField DataField="ProductID" HeaderText="ProductID" 
            InsertVisible="False" ReadOnly="True" SortExpression="ProductID" />     
        <asp:BoundField DataField="ProductName" HeaderText="ProductName"     
            SortExpression="ProductName" /> 
        <asp:BoundField DataField="UnitsInStock" HeaderText="UnitsInStock"
            SortExpression="UnitsInStock" /> 
        <asp:BoundField DataField="UnitPrice" DataFormatString="{0:c}" 
            HtmlEncode="False" HeaderText="UnitPrice" 
            SortExpression="UnitPrice" /> 
    </Columns>
</asp:gridview>
<asp:sqldatasourceid="ds1" runat="server" 
    connectionstring="<%$ ConnectionStrings:NorthwindConnectionString %>" 
    selectcommand="SELECT [ProductID], [ProductName], [UnitsInStock], [UnitPrice] FROM [Products]">
</asp:sqldatasource>