Adding CSS to GridView in Code Behind

Question

I am trying to style my GridView object but I can't seem to get it to use the CSS class. I am creating the GridViews dynamically, so they are all created in code-behind. I have tried the following and nothing seems to work.

for (...)
{
 GridView gv = new GridView();
 gv.CssClass = "aclass";
 gv.Attributes.Add("class", "aclass");
}

and also in the RowDataBound event:

foreach (row in gv)
e.Row.Cells[i].CssClass = "aClass";

and yet I still cannot style my data. Any advice is greatly appreciated

In which stage of the page lifecycle are you creating the gridview? Page load, Init? — Andre Calil
– Andre Calil, Commented Mar 18, 2013 at 18:00
Try moving that code to the Page_Init method. Dynamic controls should not be created on the page load, because of the page lifecycle. — Andre Calil
– Andre Calil, Commented Mar 18, 2013 at 23:34

Kokulan Eswaranathan · Accepted Answer · 2013-03-18 19:07:03Z

3

    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            e.Row.Cells[1].CssClass = "controlbackcolor";
            e.Row.Cells[3].CssClass = "controlbackcolor";
        }
    }

this should work but you need to make sure that the css classes are put in the right place or linked.. otherwise you wont get the style applied

Your Css class declaration should look something like the following in head tag or link:

.controlbackcolor { background: green; font-weight: bold; color: White; }

answered Mar 18, 2013 at 19:07

Kokulan Eswaranathan

1657 bronze badges

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

2 Comments

Jenny54321 Over a year ago

Can you elaborate where it needs to be? I have a Site.Css page and I was under the impression I can put it anywhere in there. Thanks

Kokulan Eswaranathan Over a year ago

If you have started from New Web Site template and using the Site master page, then CSS classes you put in site.css should be available to any page.

Harmeet Singh Bhamra · Accepted Answer · 2018-02-23 18:00:54Z

1

The best way is to assign CssClass, as you are doing. And then control style using selectors like this:

Codehind

MyGridView.CssClass = "aclass";

CSS

.aclass{Border: 1px solid lighgray;}
.aclass tr td {background:green; font-weight:bold; color: white}

Gridview is rendered as normal table in HTML, so you can do this on CSS side to reduce code behind load.

edited Feb 23, 2018 at 18:00

answered Jun 15, 2014 at 2:51

Harmeet Singh Bhamra

6378 silver badges15 bronze badges

Comments

Abdul Khaliq · Accepted Answer · 2020-08-13 09:59:40Z

Bootstrap class can also be added 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

Adding CSS to GridView in Code Behind

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related