ASP.NET GridView - Cannot set the colour of the row during databind?

Question

This is driving me NUTS! It's something that I've done 100s of time with a Datagrid. I'm now using a Gridview and I can't figure this out.

I've got this grid:

<asp:GridView AutoGenerateColumns="false" runat="server" ID="gvSelect" CssClass="GridViewStyle"
        GridLines="None" ShowHeader="False" PageSize="20" AllowPaging="True">
        <Columns>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:Label runat="server" ID="lbldas" Text="blahblah"></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>

And during the RowDataBound I've tried:

Protected Sub gvSelect_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles gvSelect.RowCreated
    If e.Row.RowType = DataControlRowType.DataRow Then
        e.Row.Attributes.Add("onMouseOver", "this.style.backgroundColor='lightgrey'")
    End If
End Sub

And it NEVER sets the row backcolor.. I've been successful in using:

gridrow.Cells(0).BackColor = Drawing.Color.Blue

But doing the entire row? NOPE! and it's driving me nuts.. does ANYONE have solution for me?

And just for fun I put this on the SAME page:

<asp:DataGrid AutoGenerateColumns="false" runat="server" ID="dgSelect" GridLines="None"
        ShowHeader="False" PageSize="20" AllowPaging="True">
        <Columns>
            <asp:TemplateColumn>
                <ItemTemplate>
                    <asp:Label runat="server" ID="lbldas" Text="blahblah"></asp:Label>
                </ItemTemplate>
            </asp:TemplateColumn>
        </Columns>
    </asp:DataGrid>

And in the ItemDataBound I put:

If Not e.Item.ItemType = ListItemType.Header And Not e.Item.ItemType = ListItemType.Footer Then
        e.Item.Attributes.Add("onMouseOver", "this.style.backgroundColor='lightgrey'")
End If

And it works as expected.. SO What am I doing wrong with the Gridview?

UPDATE **************

I thought I'd post the resulting HTML to show that any styles aren't affecting this.

Here's the gridview html:

<div class="AspNet-GridView" id="gvSelect"> 
<table cellpadding="0" cellspacing="0" summary=""> 
    <tbody> 
        <tr> 
            <td> 
                <span id="gvSelect_ctl02_lbldas">blahblah</span> 
            </td> 
        </tr> 
    </tbody> 
</table> 
 </div>

And here's the resulting Datagrid HTML:

<table cellspacing="0" border="0" id="dgSelect" style="border-collapse:collapse;"> 
<tr onMouseOver="this.style.backgroundColor='lightgrey'"> 
    <td> 
        <span id="dgSelect_ctl03_lbldas">blahblah</span> 
            </td> 
</tr>
 </table> 

See.. the main difference is the tag. It never gets set in the gridview.. and I don't know why.. I've traced through it.. and the code gets run.. :S

Answer 1

I've done it this way:

Protected Sub gvwCompounds_RowDataBound(ByVal sender As Object, ByVal e As GridViewRowEventArgs)
    If e.Row.RowType = DataControlRowType.DataRow Then
        e.Row.CssClass = "rowstyle"
    End If
End Sub

and in example.css:

.rowstyle
{
    background-color:#e5e5e5;
}

Answer 2

This should actually be done during the RowCreatedEvent. Just tested the following code and it worked marvelously to highlight/unhighlight a row on mouseover.

Private Sub GridView1_RowCreated(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowCreated
    If e.Row.RowType = DataControlRowType.DataRow Then
        e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor='#ccaaaa';")
        e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor='#ffffff';")
    End If
End Sub

EDIT: Appending html output (NOTE: Works in both VB and C# with RowCreated - same output)

<div>
  <table cellspacing="0" rules="all" border="1" id="GridView1" style="border-collapse:collapse;">
    <tr>
      <th scope="col">ST_CD</th><th scope="col">ST_CD_ALPHA</th><th scope="col">ST_DESC</th>
    </tr><tr onmouseover="this.style.backgroundColor='#ccaaaa';" onmouseout="this.style.backgroundColor='#ffffff';">
      <td>04</td><td>CA</td><td>CALIFORNIA                    </td>
    </tr><tr onmouseover="this.style.backgroundColor='#ccaaaa';" onmouseout="this.style.backgroundColor='#ffffff';">
      <td>34</td><td>OH</td><td>OHIO                          </td>
    </tr><tr onmouseover="this.style.backgroundColor='#ccaaaa';" onmouseout="this.style.backgroundColor='#ffffff';">
      <td>41</td><td>TN</td><td>TENNESSEE                     </td>
    </tr><tr onmouseover="this.style.backgroundColor='#ccaaaa';" onmouseout="this.style.backgroundColor='#ffffff';">
      <td>42</td><td>TX</td><td>TEXAS                         </td>
    </tr><tr onmouseover="this.style.backgroundColor='#ccaaaa';" onmouseout="this.style.backgroundColor='#ffffff';">
      <td>45</td><td>VA</td><td>VIRGINIA                      </td>
    </tr><tr onmouseover="this.style.backgroundColor='#ccaaaa';" onmouseout="this.style.backgroundColor='#ffffff';">
      <td>46</td><td>WA</td><td>WASHINGTON                    </td>
    </tr><tr onmouseover="this.style.backgroundColor='#ccaaaa';" onmouseout="this.style.backgroundColor='#ffffff';">
      <td>49</td><td>WY</td><td>WYOMING                       </td>
    </tr><tr onmouseover="this.style.backgroundColor='#ccaaaa';" onmouseout="this.style.backgroundColor='#ffffff';">
      <td>14</td><td>IA</td><td>IOWA                          </td>
    </tr><tr onmouseover="this.style.backgroundColor='#ccaaaa';" onmouseout="this.style.backgroundColor='#ffffff';">
      <td>24</td><td>MO</td><td>MISSOURI                      </td>
    </tr><tr onmouseover="this.style.backgroundColor='#ccaaaa';" onmouseout="this.style.backgroundColor='#ffffff';">
      <td>40</td><td>SD</td><td>SOUTH DAKOTA                  </td>
    </tr><tr onmouseover="this.style.backgroundColor='#ccaaaa';" onmouseout="this.style.backgroundColor='#ffffff';">
      <td>43</td><td>UT</td><td>UTAH                          </td>
    </tr><tr onmouseover="this.style.backgroundColor='#ccaaaa';" onmouseout="this.style.backgroundColor='#ffffff';">
      <td>44</td><td>VT</td><td>VERMONT                       </td>
    </tr><tr onmouseover="this.style.backgroundColor='#ccaaaa';" onmouseout="this.style.backgroundColor='#ffffff';">
      <td>47</td><td>WV</td><td>WEST VIRGINIA                 </td>
    </tr><tr onmouseover="this.style.backgroundColor='#ccaaaa';" onmouseout="this.style.backgroundColor='#ffffff';">
      <td>48</td><td>WI</td><td>WISCONSIN                     </td>
    </tr><tr onmouseover="this.style.backgroundColor='#ccaaaa';" onmouseout="this.style.backgroundColor='#ffffff';">
      <td>54</td><td>AK</td><td>ALASKA                        </td>
    </tr>
  </table>
</div>

EDIT: Here is the HTML side that I've got. I kept it simple. It's possible in your HTML side you have a css configuration that is interfering.

<div>
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
        DataSourceID="SqlDataSource1">
        <Columns>
            <asp:BoundField DataField="ST_CD" HeaderText="ST_CD" SortExpression="ST_CD" />
            <asp:BoundField DataField="ST_CD_ALPHA" HeaderText="ST_CD_ALPHA" 
                SortExpression="ST_CD_ALPHA" />
            <asp:BoundField DataField="ST_DESC" HeaderText="ST_DESC" 
                SortExpression="ST_DESC" />
        </Columns>
    </asp:GridView>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
        ConnectionString="<%$ ConnectionStrings:WebTestConnectionString %>" 

        SelectCommand="SELECT [ST_CD], [ST_CD_ALPHA], [ST_DESC] FROM [STATE_VALUES] WHERE ([ST_CD] LIKE '%' + @ST_CD + '%')">
        <SelectParameters>
            <asp:Parameter DefaultValue="4" Name="ST_CD" Type="String" />
        </SelectParameters>
    </asp:SqlDataSource>

</div>

Answer 3

This problem occurs in IE6. I solved it with setting CssClass names of all cells in the gridview row. Here is the code:

private void grdvw_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
       e.Row.Attributes.Add("onmouseover", "rowHighlight(this,'lightOn');"); 
       e.Row.Attributes.Add("onmouseout", "rowHighlight(this,'');");
    }
}

function rowHighlight(obj, nameOfTheClass) 
{
   cells = obj.getElementsByTagName("td");
   for (var i = 0; i < cells.length; i++) 
   {
       cells[i].className = nameOfTheClass;
   }
}

King regards.

yusuf metin

Answer 4

Are you using CSSFriendly Control Adapters for your GridViews? They may not be rendering the attributes you add.