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 asked on 19 Jul 2012, 06:27 PM

radgrid-css.PNG

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

Accepted

answered on 20 Jul 2012, 06:03 AM

Styled-RadGrid-headers.PNG

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