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

Overriding RadGrid Default CSS

2 Answers 616 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Matthew
Top achievements
Rank 1
Matthew asked on 19 Jul 2012, 06:27 PM
I'm REALLY struggling with this and it's causing me endless frustration. The only way I've been able to override the styles successfully is by using `!important,` which I just don't want to do, nor is it recommended. I read the following article, but it has been of no help to me.
http://blogs.telerik.com/aspnetmvcteam/posts/08-06-17/how-to-override-styles-in-a-radcontrol-for-asp-net-ajax-embedded-skin.aspx 

I have the following style which I want to override the rgHeader style. I use this style for all my GridView just fine, but RadGrid is being a pain in my ear!! :(

.appTableHead
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #2B486A;
}

I tried ".RadGrid_Default .appTableHead { <styles> }" like the article suggests, as well as several other variations and nothing is working for me. It's driving me bonkers! >.<

I've attached a snippet view of the markup generated by my app so you can see the class structure. Any help would be greatly appreciated. Particularly if you can show me exactly what needs to be done to make this work. Thanks! :)

2 Answers, 1 is accepted

Sort by
0
Accepted
Vasssek
Top achievements
Rank 1
answered on 20 Jul 2012, 06:03 AM
Hello Matthew,

This works in my case, so you can try it, too.

1. Add custom header style in RadGrid aspx declaration

<MasterTableView DataSourceID="SqlDataSource1" DataKeyNames="Hostname, ID" AllowMultiColumnSorting="True"
                CssClass="GridStyle" ShowHeadersWhenNoRecords="false" HierarchyLoadMode="ServerOnDemand"
                Width="700px" TableLayout="Fixed" CommandItemDisplay="None">
                <CommandItemSettings ShowAddNewRecordButton="false" ShowRefreshButton="false" ShowExportToExcelButton="true"
                    ExportToExcelText="ExportovaĆ„ do Excelu" />
                <HeaderStyle CssClass="HeaderStyle" />
                <DetailTables>
                    <telerik:GridTableView DataKeyNames="Hostname, DL_ID" DataSourceID="SqlDataSource2"
                        AutoGenerateColumns="false" Name="DL" ShowHeadersWhenNoRecords="false" HierarchyLoadMode="ServerOnDemand"
                        Width="1400px" runat="server">
                        <ParentTableRelation>
                            <telerik:GridRelationFields DetailKeyField="Hostname" MasterKeyField="Hostname" />
                            <telerik:GridRelationFields DetailKeyField="Nastavenie_klientov_ID" MasterKeyField="ID" />
                        </ParentTableRelation>
                        <HeaderStyle CssClass="InnerHeaderStyle" />

Important rows are <HeaderStyle CssClass="HeaderStyle" /> and for detailtable (if it's used)  <HeaderStyle CssClass="InnerHeaderStyle" />

2. In your .css style file add this lines :

.rgMasterTable th.HeaderStyle
{
   background-color:Red;
   background-image: none ;
}

.rgDetailTable th.InnerHeaderStyle
{
   background-color:#B57483;
   background-image: none ;
}


The result RadGrid is in the attachement....

I hope, it helps you a bit...

Best regards

Vasssek

0
Matthew
Top achievements
Rank 1
answered on 23 Jul 2012, 05:03 PM
Thank you Vasssek! It still irritates me to no end that I have to create new rules just for my Telerik controls. This just bloats my css files all the more. :(
Tags
Grid
Asked by
Matthew
Top achievements
Rank 1
Answers by
Vasssek
Top achievements
Rank 1
Matthew
Top achievements
Rank 1
Share this question
or