Question

I am having a small issue. I am creating a SPGridView on the fly within a web part and adding it to the web part with some data in it. This works fine. I have now decided to rey make it look a little funky!!

However i cannot seem to get my cssclass property to work.

I have a class in the css file

.SPGridviewsCSS th
{
background-color:#e60004;
color: Blue!important;
background-image:none;
}

.SPGridviewsCSS td
{
 border-bottom-style: solid ;
 border-bottom-width: 1px ;
 border-bottom-color: #e60004 ;
}

and
in my oninit event

CssRegistration.Register("/Styles/Style.css");

then

myspgridview.cssclass = "SPGridviewsCSS" 

all I want is it to make the grid view look good!!!

Answer 1

I’m using some server code for SPGridView styling. It is not very elegant solution, but it works perfectly. If you don’t have much time to find the better solution, you can use this code in your user control or aspx page, where the SPGridView control is placed:

protected override void CreateChildControls()
{
    // ...
    spGridView.RowStyle.CssClass = "spgridview-td";
    spGridView.AlternatingRowStyle.CssClass = "spgridview-td-alternating";
    this.Controls.Add(spGridView);
    // ...
}

Of course, you can use aspx markup instead of generating controls. For example:

<asp:SPGridView ID="spGridView" runat="server">
    <RowStyle CssClass="spgridview-td" />
    <AlternatingRowStyle CssClass="spgridview-td-alternating" />
</asp:SPGridView>

Next thing is attach styling to header:

protected override void Render(HtmlTextWriter writer)
{
    // ...
    spGridView.DataBind();
    if (spGridView.HeaderRow != null)
    foreach (TableCell cell in spGridView.HeaderRow.Cells)
        cell.CssClass = "spgridview-th";
    // ...
}

So, your css will be:

.spgridview-th
{
    background-color:#e60004;
    color: Blue!important;
    background-image:none;
}

.spgridview-td
{
    border-bottom-style: solid ;
    border-bottom-width: 1px ;
    border-bottom-color: #e60004 ;
}

.spgridview-td-alternating
{
}

Hope, this helps!