How do I specify CSS classes for specific rows in a GridView?

Question

I am creating a SharePoint web part in C# and part of it outputs a GridView control to the page. While I can get fairly extensive control over the way it is displayed by setting the CSS class of the GridView itself, what I would really like to do is be able to specify classes to certain specific td elements. I'm not sure how to go about doing this, or if it would be done at the time that the GridView is being populated with rows, or at the time the GridView is added to the page.

In pseudocode, what I had essentially envisioned was to be able to say something like gridView.Row[4].CssClass = "header", which would set the td of the fifth row in the GridView to the class "header."

I've looked into using the RowDataBound event, so I just used the following to test it:

protected void outputGrid1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    e.Row.CssClass = "outputHeader";
}

It's probably my misunderstanding of how to use that properly, but it doesn't appear to do anything. I thought it would set all of the rows to the class "header," and if it had, I was going to work on my logic from there, but I can't even get that to work. Thanks for any help anyone can provide!

Nij · Accepted Answer · 2010-03-15 21:00:38Z

21

I do something similar with RowDataBound:

if (e.Row.RowType == DataControlRowType.DataRow)
{
    // Check the XXXX column - if empty, the YYYY needs highlighting!
    if (e.Row.Cells[6].Text == "&nbsp;")
    {
       e.Row.CssClass = "highlightRow"; // ...so highlight it
    }
}

One way to check that what you are doing is correct is to monitor your html output via the browser... something like Firebug really helps.

Here's some sample CSS, where we assign the CssClass 'dataGrid' to the Grid:

/* Used to highlight rows */
table.dataGrid tr.highlightRow td
{
    background-color: #FF6666;
    border-bottom: 1px solid #C0C0FF;
}

Update: Wiring all this up: I use auto-wire-up on the aspx page. Your page declaration looks something like this:

<%@ Page Language="C#" MasterPageFile="~/XXXXXX.master" AutoEventWireup="true" CodeBehind="YYYY.aspx.cs" Inherits="ZZZ.ZZZ.AAAAAA" Title="View Blah" %>

This setting on the page allows you to use the UI to connect up the events. Click the grid, select the properties, click the lightning-strike icon, and under the RowDataBound event, select your method. All this does behind the scenes is add an attribute to the DataGridView, thus:

        <asp:GridView ID="uiActionGridView" runat="server" AllowSorting="True" AutoGenerateColumns="False"
        OnRowDataBound="uiActionGridView_RowDataBound" OnDataBound="uiActionGridView_DataBound">

this shows two events being wired-up, the DataBound and RowDataBound events.

This is what I do using VS2005 and it all seems to 'just work'. The only thing that I can think you are experiencing is that you are manually binding the event after the databind has occurred.

edited Mar 15, 2010 at 21:00

answered Mar 5, 2010 at 22:20

Nij

2,0982 gold badges23 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Geo Ego Over a year ago

I like this approach. However, in stepping through the code in the debugger, I find that my RowDataBound isn't being called. I wrote it exactly as it is in the question, and my grid is called outputGrid1. Do you have any idea why that wouldn't be calling RowDataBound?

Geo Ego Over a year ago

The only additional thing I needed to do was set the RowDataBound property of my GridView to the RowDataBound method, like so: outputGrid1.RowDataBound += outputGrid1_RowDataBound; Thanks for your help!

Nij Over a year ago

@Geo Eye: Please see updates above. Perhaps post your code if you continue to experience problems

Abdul Khaliq · Accepted Answer · 2020-08-13 10:01:30Z

Optional! you can also add bootstrap class in code behind like...

protected void gvEmpContactsHistory_SelectedIndexChanged(object sender, EventArgs e)
    {
        string val = Convert.ToDateTime(gvEmpContactsHistory.SelectedDataKey.Value).ToString("dd-MM-yyyy hh:mm:ss", new System.Globalization.CultureInfo("en-US"));
        GetEmployeeDetail(val);

        foreach (GridViewRow row in gvEmpContactsHistory.Rows)
        {
            if (row.RowIndex == gvEmpContactsHistory.SelectedIndex)
            {
                row.ToolTip = string.Empty;
                row.Attributes.Add("class", "btn-success");
            }
            else
            {
                row.ToolTip = "Click to select this row.";
                row.Attributes.Add("class", "btn-outline-success");
            }
        }
    }

Collectives™ on Stack Overflow

How do I specify CSS classes for specific rows in a GridView?

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related