RadGrid CSS help

[Angie]

OK, this is the css I had for the old styling.  I cannot for the life of me figure out how to properly reference the new classes and the documentation is not current.  I don't really care what skin I use, as long as I can get a handle on getting the references. 

I would appreciate if someone could maybe take what I have here and update it (at least partially) and also let me know how I should reference the style in the Grid control.

 /* TELERIK RAD GRID */


.RadGrid_Office2007
{
    border:solid 1px #bfbfbf;
}

.Custom .GridRow_Office2007 td,
.Custom .GridAltRow_Office2007 td,
.Custom .GridEditRow_Office2007 td,
.Custom .GridFooter_Office2007 td,
.Custom .GridGroupFooter_Office2007 td
{
    border:1px #e5e5e5;
    border-style:none none solid solid;
    padding-top:4px;
    padding-bottom:4px;
}

.Custom .GridRow_Office2007
{
    background:none #ffffff;
    line-height:20px;
}
.Custom .GridAltRow_Office2007
{
    background:none #f2f2f2;
    line-height:20px;
}
.Custom .GridEditRow_Office2007
{
    background:none #ffffe1;
}
.Custom .SelectedRow_Office2007
{
    background:none #ffffe1;

}
.Custom .SelectedRow_Office2007 td,
.Custom .SelectedRow_Office2007>td:first-child
{
    border-color:#f2f2f2;
}
.Custom .GridRowOver_Office2007
{
    background:none #666666;
}

.Custom .GridPager_Office2007
{
    background: #edf5e5;

    color:#333333;
}
.Custom .GridPager_Office2007 td
{
    border:1px solid #bfbfbf;
    border-left:0px;
    border-right:0px;
    padding:1px 4px 2px;
}

.Custom .PagerLeft_Office2007
{
    padding:5px;
    float:right;
}
.Custom .PagerRight_Office2007
{
    padding:5px;
    float:left;
}
.Custom .GridHeader_Office2007
{
    color: #666666;
    font-weight: bold;
    border-left:1px solid #e5e5e5;
    border-bottom: solid 1px #e5e5e5;
    background:none #f2f2f2;
    padding:5px;
}
.Custom .GridHeader_Office2007 a, a:link, a:visited
{
    text-decoration:none;
    font-weight:bold;
    color:#666666;
}
.Custom .GridHeader_Office2007 a:hover, a:active
{
    text-decoration:underline;
    font-weight:bold;
    color:#666666;
}


.Custom .InnerHeaderStyle_Office2007  a, a:link, a:visited
{
    text-decoration:none;
    font-weight:bold;
    color:#666666;

}
.Custom .InnerHeaderStyle_Office2007  a:hover, a:active
{
    text-decoration:underline;
    font-weight:bold;
    color:#666666;
}

.Custom .InnerHeaderStyle_Office2007
{
    color: #666666;
    font-weight: bold;
    border-left:1px solid #e5e5e5;
    border-bottom: solid 1px #e5e5e5;
    background:none #f2f2f2;
    padding:5px;
}



.Custom input[type="text"]
{
    FONT: 11px Arial, Helvetica, sans-serif;
    COLOR: #333333;
    MARGIN: 0px 0px 0px 0px;
    TEXT-ALIGN: left;
    BORDER: solid 1px #7f9db9;

}

The grid reference:

<telerik:RadGrid ID="RadGridCE" runat="server"
            Skin="Office2007"
            CssClass="Custom"
            >

Thanks!

[Dimo]

Hi Angie,

The following page contains the list of old and new RadGrid CSS classes. The new ones are at the bottom:

http://www.telerik.com/help/aspnet-ajax/grdcreatingnewskins.html

You will also have to increase the specificity of your custom CSS rules (to 22 or more) in order to be able to override the new embedded skins. For example you can add one div :

div.Custom  .rgRow  td, 
div.Custom  .rgAltRow  td, 
div.Custom  .rgEditRow  td, 
div.Custom  .rgFooter  td
{ 
    border:1px #e5e5e5; 
    border-style:none none solid solid; 
    padding-top:4px; 
    padding-bottom:4px; 
}

More information about specificity is available at:

http://blogs.telerik.com/dimodimov/posts/08-06-17/How_To_Override_Styles_in_a_RadControl_for_ASP_NET_AJAX_Embedded_Skin.aspx

All the best,
Dimo
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Angie]

Thanks for your reply.  That got me much closer.

The two items I have left to fix are the following:

1)  I would like the style of the Expand column to have the same background as the alternating rows, rather than a different background color.

2)  I would like to switch the location of the PagerText ('displaying x of n', etc) so that it is on the left and the actual page navigation links are on the right.

Thank you for your help!

[Dimo]

Hi Angie,

1) The table cells, which belong to the ExpandColumn, have their own CSS class, which can be used for styling: rgExpandCol. For example:

div.Custom  .rgMasterTable  .rgExpandCol
{
     background: #f2f2f2 ;
     border-bottom-color: #f2f2f2 ;
}


2) Such a layout cannot be achieved by using CSS only. Please use a pager template:

http://demos.telerik.com/aspnet-ajax/grid/examples/programming/pagertemplate/defaultcs.aspx


Regards,
Dimo
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Angie]

Hi Dino.  I'm am very close now, thanks for your help.

Are you sure the page items can't be switched around?  Before, I was able to accomplish this with the following CSS:
 

.Custom .PagerLeft_Office2007
{
    padding:5px;
    float:right;
}
.Custom .PagerRight_Office2007
{
    padding:5px;
    float:left;
}

Is there nothing like that now?  Thank you!

[Dimo]

Hi Angie,

Switching the pager elements' position is not possible now, as the pager rendering is completely different and more complex than before. Sorry about the inconvenience.

All the best,
Dimo
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Ariel]

Hi Dimo
I have the same question , like in post from 10 April about expand column. I won't to give to it the background color like in row (item style and alternating style). Cant found , how I could to set it separately by row type.
Will thanks full , if You could help me
Serge

[Dimo]

Hello Serge,

Basically, you need to override the embedded RadGrid skin and set background colors for the expand column's cells, according to the row type.

Depending on the skin, however, the default expand/collapse buttons may become invisible. For example, the RadGrid Hay skin expand/collapse buttons are white, and the row background is also white. You will have to use different expand/collapse images.

Both of the above techniques are demonstrated in this example:

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        DataTable dt = new DataTable();
        DataRow dr;
        int colsNum = 4;
        int rowsNum = 5;
        string colName = "Column";

        for (int j = 1; j <= colsNum; j++)
        {
            dt.Columns.Add(String.Format("{0}{1}", colName, j));
        }

        for (int i = 1; i <= rowsNum; i++)
        {
            dr = dt.NewRow();

            for (int k = 1; k <= colsNum; k++)
            {
                dr[String.Format("{0}{1}", colName, k)] = String.Format("{0}{1} Row{2}", colName, k, i);
            }
            dt.Rows.Add(dr);
        }

        (sender as RadGrid).DataSource = dt;
    }

    protected void RadGrid_ColumnCreated(object sender, GridColumnCreatedEventArgs e)
    {
        if (e.Column is GridExpandColumn)
        {
            (e.Column as GridExpandColumn).ButtonType = GridExpandColumnType.ImageButton;
            (e.Column as GridExpandColumn).ExpandImageUrl = "aaa.gif";
            (e.Column as GridExpandColumn).CollapseImageUrl = "bbb.gif";
        }
    }

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>RadControls for ASP.NET AJAX</title>
<style type="text/css">

.RadGrid_Hay .rgMasterTable td.rgExpandCol
{
    background:transparent;
    border-color:#fff;
}

.RadGrid_Hay .rgMasterTable .rgAltRow .rgExpandCol
{
    background:#ececd8;
    border-color:#ececd8;
}

</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />

<telerik:RadGrid
    ID="RadGrid1"
    runat="server"
    Skin="Hay"
    OnColumnCreated="RadGrid_ColumnCreated"
    OnNeedDataSource="RadGrid_NeedDataSource">
    <MasterTableView>
        <DetailTables>
            <telerik:GridTableView Width="100%" />
        </DetailTables>
    </MasterTableView>
</telerik:RadGrid>

</form>
</body>
</html>

Greetings,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.