CssClass in RadGrid Properties does not work

[Gregg Teehan]

Setting CssClass in several RadGrid Properties does not work
When I set CssClasss to "hdr1" I get a bogus string and the class does not work.

    <div id="RadGrid1" class="RadGrid_Default hdr1">

What is adding the RadGrid_Default?
How do I get rid of it?

How do I set custom CssClass in various properties?
   ---  in the Grid itself, in MasterTableView, in HeaderStyle

[Princy]

Hi Gregg,

You can set custom CssClass for the Grid as shown below.

ASPX:

<MasterTableView HierarchyLoadMode="ServerOnDemand"   CssClass="MasterTable"   DataSourceID="SqlDataSource2">
            <HeaderStyle CssClass="Class1"  />

  <style type="text/css" >
     .MasterTable
     {
        background-color: #ffffe1;
        background-image: none;
     }
     .Class1
     {
      background-color: #ffffe1;
     }

    </style>

Thanks
Princy.

[Dimo]

Hi Gregg,

RadGrid uses a number of predefined (native) CSS classes for its HTML elements. The CSS classes are used to style RadGrid when using a skin and have the following format:

<HTMLElement  class="ClassName_SkinName">


When you set a custom CSS class to a RadGrid element declaratively, it is appended to the predefined CSS class and that is why you are seeing two CSS classes in the HTML output.

If you don't want the predefined CSS classes at all, you should set an empty string for the Skin property:

<telerik:RadGrid  Skin=""  />

However, in this case RadGrid will appear completely unstyled and you will have to set CSS classes for all elements manually and add custom styles. This is not very convenient.

A better option is to set custom CSS classes only for those elements, which you want to style and/or override the control's skin, as described in the following blog post:

How to Override RadControls' Embedded Skins

The last option is to create a custom skin. In this case you should set:

<telerik:RadGrid  Skin="MySkinName"  EnableEmbeddedSkins="false"  />

and follow these guidelines:

RadControls Fundamentals : Creating Custom Skins
RadGrid Skins
RadGrid : Creating/Modifying Skins


As for your last question, you can add custom CSS classes to a variety of RadGrid elements, by using Style properties, for example:

<ItemStyle CssClass="....." />
<PagerStyle CssClass="......" />
<HeaderStyle CssClass="..." />

etc. The whole list of Style properties can be found on this page:

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


Let us know if you need further advice.



Sincerely yours,
Dimo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Marty]

Hi Dimo, I followed your article but CssClass does not seem to work when you have controls in a GridTemplateColumn column.  Specifically, I have an asp:LinkButton with a CssClass and its NOT being handled - the skin CSS is taking precedence!  Please help  - probably from specificity issues with CSS.   If I view the page source - I see the correct class but CSS rules are using the skin and not my rules..  Please if you could provide an example using a custom css style that overrides a link button in a template column!  Not the ItemStyle - the actual controls - I may have several controls in a template column with different styles.
How do I form my css so that it will override the skin.  In this case, I'm using a custom skin or just assume any skin.

The CSS is pasted at the end.
.
.
.
<telerik:GridTemplateColumn HeaderText="Items" UniqueName="ItemDescription">
                            <ItemTemplate>
                                <div>
                                    <asp:LinkButton CssClass="rentItemLink" ID="lnkItemDescription" runat="server" Text='<%#Eval("Item.ItemDescription")%>' Width="100%"></asp:LinkButton>
                                </div>
                                <div>
                                    <asp:Label CssClass="rentItemLabel" runat="server" Text='<%# Eval("Item.ItemSubDescription") %>' Width="100%"></asp:Label>
                                </div>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>


default.css
.rentItemLabel
{
    font-size: medium;
    color: #006600;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
}

.rentItemLink
{
    font-size: medium;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    color: #FF00FF;
    text-decoration: none;
}

thanks!

[Dimo]

Hello Marty,

You are right, your custom CSS styles are not applied because the specificity of the CSS rules is not high enough.

RadGrid skins contain the following:

.GridRow_SkinName  a,
.GridAltRow_SkinName  a,
.GridEditRow_SkinName  a,
.GridFooter_SkinName  a,
.GridGroupFooter_SkinName  a,
.GridEditForm_SkinName  a
{
    color: ..........;
}

In order to override the skin, you need to use a CSS selector with specificity of 12 or above. For example:


body span.rentItemLabel
{
    font-size: medium;
    color: #006600;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
}

body a.rentItemLink
{
    font-size: medium;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    color: #FF00FF;
    text-decoration: none;
}



Best wishes,
Dimo
the Telerik team

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

[Marty]

Hi Dimo!  Thanks that worked!   I figured it was specificity but I have not idea what the syntax actually means, what goes where and spaces vs no spaces.. if you have a good into to this for dummies please post.  I try and not get into css and javascript unless I absolutely have to.  Then I forget it almost completely after a month of not using it.

Thanks for not only replying fast but also for including the exact example of how this works. I'm certain a lot of developers will want to use templates and cssclass on server controls and this will come in handy - esp.. link button.

thanks again
Marty

[Dimo]

Hi Marty,

Thanks for the feedback.

Currently it is not very easy to override a control's skin style if you are not at all familiar with the control's CSS code, but I will try to prepare some guidelines for this soon. I will announce them in my blog:

http://blogs.telerik.com/DimoDimov/


Regards,
Dimo
the Telerik team

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

[Sunil]

Hello Dimo,
I am using rad grid. So far it's working fine for me but today i am getting an issue that if i am enabling "AllowCustomPaging" mode true then the drop down at footer is not applying CSS. But all functionality are working fine. 
Please see the attached file for reference.
Can you guide me that what can be the issue.


Thanks 
---
Sunil