This is a migrated thread and some comments may be shown as answers.

CssClass in RadGrid Properties does not work

7 Answers 1020 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Gregg Teehan
Top achievements
Rank 1
Gregg Teehan asked on 15 Jul 2008, 05:02 PM
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



7 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 16 Jul 2008, 08:13 AM
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.
0
Dimo
Telerik team
answered on 16 Jul 2008, 08:51 AM
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
0
Marty
Top achievements
Rank 1
answered on 18 Dec 2008, 05:30 AM
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!
0
Dimo
Telerik team
answered on 18 Dec 2008, 08:03 AM
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.
0
Marty
Top achievements
Rank 1
answered on 19 Dec 2008, 03:22 AM
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
0
Dimo
Telerik team
answered on 19 Dec 2008, 08:41 AM
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.
0
Sunil
Top achievements
Rank 1
answered on 23 Oct 2012, 12:33 PM
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
Tags
Grid
Asked by
Gregg Teehan
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Dimo
Telerik team
Marty
Top achievements
Rank 1
Sunil
Top achievements
Rank 1
Share this question
or