Adding CSS Class on RowDataBound

Question

I'm trying to append a CSS class to a row on RowDataBound. I'm using the alternating css class property against the GridView, so I'm assuming this is applied on RowDataBound. If you assign a CSS class programatically to the CssClass property of the row within the RowDataBound event then the alternating row style css class is not applied, even if you append the CSS class.

Here's what I've got:

Protected Sub gvGeneral_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles gvGeneral.RowDataBound
    If e.Row.RowType = DataControlRowType.DataRow Then
      If previousExpenseType <> e.Row.Cells(2).Text And previousExpenseType.Length > 0 Then
        e.Row.CssClass += "bottom-border"
      End If

      previousExpenseType = e.Row.Cells(2).Text
    End If
  End Sub

previousExpenseType is just a String which I'm doing comparisons against. If the expense type changes, then I want to have a border applied to the bottom of the <tr> element.

Any ideas how to get around this? It seems there's an event after RowDataBound that's applying the alternating row style css class to the row.

Answer 1

Gridview rowdatabound allows you ONLY to manipulate the HTML within a TR so you probably do not have an option to do what you want to do with gridView. Instead i would recommend to use Repeater which gives you much more control over the HTML you generate. here is what you can do with the repeater

<table>
    <thead>
        <tr><td>Head1</td><td>Head2</td></tr>
    </thead>
    <asp:Repeater ID="rptTaskItems" runat="server">
        <ItemTemplate>
             <tr><td>column 1 data</td>
                 <td>column 1 data</td>
             </tr>
             <asp:PlaceHolder ID="PHBar" runat="server" visible="false">
             <tr><td colspan="2"><hr/></td>
             </tr>
             </asp:PlaceHolder>
        </ItemTemplate>
    </asp:Repeater>
</table>

In the ItemDataBound, you can make this placeholder [PHBar] visible ONLY when your condition is true and thats it.

Hope this helps.

Answer 2

Another work around you may want to try is to perform your checks and CSS Class manipulation after all the rows are databound by using one of the later gridview events and looping through the rows yourself. I am aware that this would add some extra processing time, but depending on the size of the datasets your are displaying, it could be worth it.

Answer 3

try this in your RowDataBound event handler...

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    GridView grid = GridView1;
    GridViewRow row = e.Row;
    if (row.RowType == DataControlRowType.DataRow)
    {
        bool isAlternating = row.RowState == DataControlRowState.Alternate;

        List<string> classes = new List<string>();

        /*  Setting the CssClass of a row overwrites any CssClass declared in the 
         *  markup, so lets save the value that is in the markup and add to it.
         */
        if (isAlternating) { classes.Add(grid.AlternatingRowStyle.CssClass); }
        else { classes.Add(grid.RowStyle.CssClass); }

        //
        //logic for adding other css classes to the row...
        //

        //set the CssClass property of the row to the combined css classes value
        row.CssClass = string.Join(" ", classes.ToArray());

        //
        //more row processing...
        //
    }
}

Answer 4

I gave an answer for the same thing here... you have plenty of code to work with :)