Override Styles in a RadControl

[SKY]

Hi,

I am using telerik rad grid on my page.
I want to override the default styles which is coming for Rad grid.
Since the script for the telerik grid is created in the last, so i am aware of that we have to use the class having higher specificity.
I tried using this concept but was not able to over ride the styles.

when i saw the styles implemented using Developer toolbar,
i saw the Css Class used was

.RadGrid_Default {

BACKGROUND: #d4d0c8;

COLOR: #333

}

.RadGrid_Default {

BORDER-RIGHT: #232323 1px solid;

BORDER-TOP: #232323 1px solid;

BORDER-LEFT: #232323 1px solid;

BORDER-BOTTOM: #232323 1px solid

}

When i tried to use my style sheet then in the class it was showing all the css classes used and finally it was using the rad grid default class.

I have attached a screenshot showing the default style.

Can you please guide me, how i can override the default styles of Rad grid and use my own css classes?

Thanks in advance.

[Dimo]

Hello SKY,

The RadGrid styles that you have copy-pasted above have a specificity of 10. What is the higher specificity that you have used in your custom CSS rules?

You can assign a custom CSS class to RadGrid like this...

<telerik:RadGrid CssClass="MyRadGrid" />

...and then use custom CSS rules based on the custom CSS class:

div.MyRadGrid  /*specificity of 11*/
{
        border:1px solid red;
        background:yellow;
}


Here is a blog post for further reading:

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


Greetings,
Dimo
the Telerik team

[SKY]

Hi Dimo,

The css classes i have used is having specificity of 10 only.
Please find below the code snippet..

BODY

{

 

BACKGROUND-COLOR: white;

 

 

FONT-FAMILY: Trebuchet MS, Arial, Verdana, Helvetica, sans-serif;

 

 

FONT-SIZE: .8em;

 

 

FONT-WEIGHT: normal;

 

 

LETTER-SPACING: normal;

 

 

TEXT-TRANSFORM: none;

 

 

WORD-SPACING: normal

 

}

/* Custom Styles */

/* Set the common font applied to all styles specified */

.Body_DataEntryPages

 

, .Body_MainPages, .Button, .ControlText, .ControlTextRequired, .Error, .GridHeader, .GridPaging, .GridItem,

 

.GridSelect

 

, .GridSelectedItem, .GridText, .MasterPageCopyright, .MasterPageFooter, .MasterPageTitle,

 

.MasterPageUserAndPermissions

 

, .MenuHeader, .MenuItem, .Message, .MessageError, .PageAppVersion, .PageTitle, .TabNormal,

 

.TabSelected

 

, .TabStripHeader ,.UserAndPermissions

 

{

 

font-family: Trebuchet MS, Arial, Verdana, Helvetica, sans-serif;

 

}

 

.Body_DataEntryPages

 

 

 

{

 

background-color: White;

 

}

 

 

.Body_MainPages

 

 

 

{

 

background-color: White;

 

}

 

 

.Button

 

 

 

{

 

background-color: #6788be;

 

 

border-color: #E0E0E0;

 

 

color: White;

 

 

font-weight: normal;

 

 

font-size: small;

 

 

width: 70px;

 

}

 

All other classes are like this only having specificity 10.

Then i tried increasing the specificity with the div, but nothing was happening.
Then i saw in the tool that what is the class used. I have attached the screenshot for the same.
The class name is coming wierd like it is combining both the RadGrid_Default and the GridLayout1 as shown in screenshot.

Can you please confirm whatever css classes i have used above is having specificity of 10.
Also, this using this div is not working, am i missing something. Can you please check and tell me. 

[SKY]

Hi Dimo,

I would like to tell you few more things.
From the page when i saw the view source and i found for the css class added to the grid.
It was coming something like this 

 <div id="ctl00_ContentPlaceHolder2_gvASMTAccountInfo" class="RadGrid RadGrid_Default GridLayout1" style="border-width:0px;">

This css class is having three different names separated by comma. If somehow the custom class which i created can only be applied, then it will work fine.
Below is the custom css class which i added and specificity is 11 for this.

div.GridLayout1

 

 

{

 

background-color: White;

 

 

color: Black;

 

 

font-weight: normal;

 

 

text-align: left;

 

 

font-family: Trebuchet MS, Arial, Verdana, Helvetica, sans-serif;

 

 

letter-spacing: normal;

 

 

text-transform: none;

 

 

word-spacing: normal;

 

 

font-size: 1.4em;

 

 

margin: 0px;

 

 

border-color: #ece9d8;

 

 

border-style: outset;

 

 

display: block;

 

}

Please use this information is found helpful and guide me with any solution.
Thanks in advance.

[Dimo]

Hello SKY,

I recommend you to use Firebug with Firefox instead of Internet Explorer's Web Developer Toolbar - the former are a lot more convenient to trace conflicting CSS styles.

>> Can you please confirm whatever css classes i have used above is having specificity of 10.

Each CSS class in a CSS selector adds 10 points to the selector's specificity.


>> The class name is coming wierd like it is combining both the RadGrid_Default and the GridLayout1 as shown in screenshot.

Yes, your custom CSS class is appended to the native RadGrid CSS classes. The CSS classes are separated by a space in the value of the class HTML attribute. If your custom CSS class is not appended and the native CSS classes are lost, the control will lose most of its native styling.

By the way, I don't see where you are adding any custom CSS styles for GridLayout1 CSS class.


I recommend you to get familiar also with the following help article:

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


If you want to override the RadGrid native font styles, you should use the following CSS rule:

div.RadGrid_Default,
div.RadGrid_Default .rgMasterTable,
div.RadGrid_Default .rgDetailTable,
div.RadGrid_Default .rgGroupPanel table,
div.RadGrid_Default .rgCommandRow table,
div.RadGrid_Default .rgEditForm table,
div.RadGrid_Default .rgPager table,
span.GridToolTip_Default
{
    ...............
}


Kind regards,
Dimo
the Telerik team

[SKY]

Hi Dimo,

Thanks for your reply.
As you have suggested to override the native font styles, i have already tried this by taking the class name with help of IE Developer Toolbar and prefixed the div. to the class name.
But still there was no effect on the UI display.
Am i missing something here?

I will just the scenario.

The Telerik grid is there inside an update panel.

I am using only bound columns as of now.

There is no other css class which will override these classes.

I am using the MasterTableView.
Also i have attached the screenshot showing all the div's, the RadGrid, the masterTableView using Developer Toolbar.
and the aspx code for the grid.
Please check if i am missing something else which may be creating the problem.

[Dimo]

Hi SKY,

Please inspect the following simple demo, which shows how to override the RadGrid border and font styles by using a custom CSS assigned to the control's wrapper. Note that it makes a difference if you assign the class to the RadGrid or to the MasterTableView. In the second case the selectors should include table.... instead of div....

I recommend you to refer also to the following general resources on CSS:

http://css.maxdesign.com.au/selectutorial/

http://blogs.telerik.com/dimodimov/posts/08-06-17/how_to_override_styles_in_a_radcontrol_for_asp_net_ajax_embedded_skin.aspx
(the three links at the bottom of the article)

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

<script runat="server">

    protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        DataTable dt = new DataTable();
        DataRow dr;
        int colsNum = 4;
        int rowsNum = 8;
        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;
    }

</script>

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

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

div.MyRadGrid
{
    border-color:#f00;
}

div.MyRadGrid,
div.MyRadGrid .rgMasterTable,
div.MyRadGrid .rgDetailTable,
div.MyRadGrid .rgGroupPanel table,
div.MyRadGrid .rgCommandRow table,
div.MyRadGrid .rgEditForm table,
div.MyRadGrid .rgPager table
{
    font-style:italic;
    font-size:20px;
    font-family:serif;
}

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

<telerik:RadGrid
    ID="RadGrid1"
    runat="server"
    Width="800px"
    Skin="Default"
    CssClass="MyRadGrid"
    OnNeedDataSource="RadGrid_NeedDataSource">
</telerik:RadGrid>

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

Regards,
Dimo
the Telerik team