How to Highlight Cells with a certain value from the DB in a GridView in ASP .NET using VB Programming?

I have a GridView on an ASP .NET Web Page with templatefields. I am using VB as the programming language. I want to Highlight the Cells red that show a value 'not submitted' and green if it shows 'submitted' Is there a way to do this? Thanks

1 answer

  • answered 2021-02-20 04:29 Albert D. Kallal

    Ok, the approach to do this is to in near all cases use the "row data" bound event.

    This event fires for "each" row during the rendering process. Thus you can get between the rendered row, and the final output.

    So, say I have this Markup:

     <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
            <Columns>
    
                <asp:BoundField  runat="server" DataField="HotelName" HeaderText="HotelName" SortExpression="HotelName" />
                <asp:BoundField DataField="City" HeaderText="City" SortExpression="City" />
    
                <asp:TemplateField HeaderText="Hotel Name2">
                    <ItemTemplate>
                      <asp:TextBox ID="HotelName2" runat="server" Text='<%# Eval("HotelName") %>'></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
    
                <asp:TemplateField HeaderText="City2">
                    <ItemTemplate>
                      <asp:TextBox ID="City2" runat="server" Text='<%# Eval("City") %>'></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
    
    
            </Columns>
        </asp:GridView>
    

    Now, on purpose I included the common "boundfield" and I ALSO included template fields.

    I included BOTH in this post since how you get at and change one is different then the other.

    So, I wanted to show how both types can be changed.

    FYI: Templated fields - you use FindControl (by id name)

    Non Templated - you use cells(N) - by a number 0 to n (you can't use name here!!!).

    So, with above, in my on-load page event, I have this:

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    
        If IsPostBack = False Then
         dim strSQL as string
         strSQL = "SELECT ID, FirstName, LastName,City FROM tblHotels ORDER BY HotelName"
    
         Using cmdSQL As New SqlCommand(strSQL, New SqlConnection(My.Settings.Test3))
    
                cmdSQL.Connection.Open()
                Dim rData As New DataTable
                rData.Load(cmdSQL.ExecuteReader)
    
                GridView1.DataSource = rData
                GridView1.DataBind()
    
            End Using
    
        End If
    
    End Sub
    

    And we get this:

    enter image description here

    So far, simple - and we see our grid (with those boundfields and then the same with two templated fields (as I noted - often you have one or the other - or even maybe both types).

    Ok, so, for City = "Edmonton", we want say "sky blue" color

    And for City = "Calgary", we want say "Plum"

    So, we can use the RowDataBound event.

    Our code is thus this:

    Protected Sub GridView1_RowDataBound(sender As Object, e As GridViewRowEventArgs) Handles GridView1.RowDataBound
    
        If e.Row.RowType = DataControlRowType.DataRow Then
    
            Dim txtBoxCity As TextBox = e.Row.FindControl("City2")
    
            If txtBoxCity.Text = "Edmonton" Then
                txtBoxCity.BackColor = Drawing.Color.SkyBlue
            End If
    
            If txtBoxCity.Text = "Calgary" Then
                txtBoxCity.BackColor = Drawing.Color.Plum
            End If
    
            Dim dF As TableCell = e.Row.Cells(1)
    
            If dF.Text = "Edmonton" Then
                dF.BackColor = Drawing.Color.SkyBlue
            End If
            If dF.Text = "Calgary" Then
                dF.BackColor = Drawing.Color.Plum
            End If
    
    
    
        End If
    End Sub
    

    Now as noted, i have DOUBLE the code here - since I am showing both types of controls.

    And now, when it run the above? We get this:

    enter image description here

    Keep in mind that when we get our hands on that row, and THEN a control?

    You not limited to just setting say the background. You might say show a custom picture for each city. Maybe you do some math calc on two controls and shove the result into a 3rd row or control.

    So the "lesson" here is that the row data bound event lets you get your hands on that row - and then you are near free to do what you want from setting colors, shoving in different values - quite much whatever you want.