SpGridView styling

Question

Hi 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 am not a CSS expert, but th and td are not direct descendants of the table element of the grid, so maybe you should try:

.SPGridviewsCSS * td

Have a look here.

Answer 2

Using IE Developer Toolbar (or, may I suggest Firebug w/ Mozilla Firefox), can you verify what HTML output element the CSS class is being applied to?

I have a feeling that the primary CSS selector (.SPGridviewsCSS) is failing, and therefore nothing is being styled.

Also helpful might be posting a snippet of the HTML output so we can see what you're trying to style.

Answer 3

Hello!

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!