Selectively apply css to a row in a gridview

Question

Hi,

I'm looking for a way to selectively apply a css class to individual rows in a GridView based upon a property of the data bound item.

e.g.:

GridView's data source is a generic list of SummaryItems and SummaryItem has a property 'ShouldHighlight'... when ShouldHighlight == true the css for the associated row should be set to 'highlighted'

any ideas?

Answer 1

very easy

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        DataRowView drv = e.Row.DataItem as DataRowView;
        if (drv["ShouldHighlight"].ToString().ToLower() == "true")
            e.Row.CssClass = "highlighted";
    }
}

the code above works if you use a DataTable as DataSource

change to:

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        myClass drv = (myClass)e.Row.DataItem;
        if (drv.ShouldHighlight)
            e.Row.CssClass = "highlighted";
    }
}

just for the example above when using generics:

public class myClass
{ 
    public Boolean ShouldHighlight
    { get; set; }
}

if you are working with Generics (List, Dictionary, etc)

keep in mind:

e.Row.dataItem

always return the entire object that you are populating the row with, so it is easy from here to manipulate the appearance of the data in the webpage.

you should use RowDataBound event that will trigger after the data is attached to the row object but not yet written the HTML code in the page, in this way you can check the ShouldHighlight value (I converted to a String cause I do not know the type, you can change it if you know it's a boolean value).

this code runs much faster than megakemp code cause you're not creating a List object and populated with the entire data source for each row...

P.S. take a look at this website, you can find several tutorials for your project using the GridView object

Answer 2

One thing you want to keep in mind is that setting the Row.CssClass property in the RowCreated or RowDataBound event handlers will override any default styles you may have applied at the grid level. The GridView gives you easy access to row styles via properties such as:

gvGrid.AlternatingRowStyle.CssClass = ALTROW_CSSCLASS
gvGrid.RowStyle.CssClass = ROW_CSSCLASS

However, when you assign a CssClass value to a specific row, as is your need in this case, the assignment overrrules any top-level assignment at the grid level. The assignments will not "cascade" as we might like them to. So if you want to preserve the top-level class assignment and also layer on your own, more specific one, then you would need to check the rowState to see what kind of row you are dealing with and concatenate your class names accordingly

If(item.ShouldHighlight)
 {
    If(e.Row.RowState == DataControlRowState.Alternate)
    {
     e.Row.CssClass = String.Format("{0} {1}", "highlight", ALTROW_CSSCLASS)
    }
    else
    {
     e.Row.CssClass = String.Format("{0} {1}", "highlight", ROW_CSSCLASS)
    }


}