I have created a telerik RadGrid in asp .net. My requirement is to give my own color to Column header. How can we achieve this...? Below is the code structure I'm using.
<Telerik:RadGrid ID="RadGrid2" runat="server">
<MasterTableView Width="100%" DataKeyNames="CustomerID" AllowMultiColumnSorting="True">
<DetailTables>
<telerik:GridTableView DataKeyNames="OrderID" Name="Orders" Width="100%">
<DetailTables>
<telerik:GridTableView DataKeyNames="OrderID" Name="OrderDetails" Width="100%">
<Columns>
<telerik:GridBoundColumn SortExpression="UnitPrice" HeaderText="Unit Price" HeaderButtonType="TextButton" DataField="UnitPrice">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn SortExpression="Quantity" HeaderText="Quantity" HeaderButtonType="TextButton" DataField="Quantity">
</telerik:GridBoundColumn>
</Columns>
</telerik:GridTableView>
</DetailTables>
<Columns>
<telerik:GridBoundColumn SortExpression="OrderID" HeaderText="OrderID" HeaderButtonType="TextButton" DataField="OrderID">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn SortExpression="OrderDate" HeaderText="Date Ordered" HeaderButtonType="TextButton" DataField="OrderDate" UniqueName="OrderDate" DataFormatString="{0:D}">
</telerik:GridBoundColumn>
</Columns>
</telerik:GridTableView>
</DetailTables>
<Columns>
<telerik:GridBoundColumn SortExpression="CustomerID" HeaderText="CustomerID" HeaderButtonType="TextButton" DataField="CustomerID">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn SortExpression="ContactName" HeaderText="Contact Name" HeaderButtonType="TextButton" DataField="ContactName">
</telerik:GridBoundColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>
And it should looks like image below:
A VERY EASY way to achieve your results is to use...
<ItemStyle BackColor="Red"/>
And
<AlternatingItemStyle BackColor="Red"/>
Here is your code with the tags inserted...
I had the same issue and even after overriding the class, the header color did not change.
I found that my overridden background was re-overridden by Grid. I used
!important
keyword not to allow Grid to re-override my classSame you can do for any class!
We meet again!:
Step 0: (Added via edit) Navigate to the following install folder and add the grid folder to your project)
Results of what I managed to produce
Step 1: Create a stylesheet, I named mine Grid.Default.css and link it in your .aspx page between the head tags.
Step 2: Open said style sheet and paste this verbatim:
Step 3: Go to your grid and set your css class to default and turn off embedded skins:
Step 4: Run it. (If you wish to adjust the color I used, as I tried to get it as close as possible to the one in your screenshot, see below.)
NOTE: To change the color modify this declaration in the css class:
Telerik automatically uses a skin for its grid. If you have not specified a skin it will use the Grid.Default skin. You can modify this skin or any of the skins to your own custom style. Just follow these steps.
Grid.Default.css (line 59)
Add a link to the css file that you modified on the page where you have your grid (or in the master page).
<link href="Grid.Default.css" rel="stylesheet" type="text/css" />
Add the property EnableEmbeddedSkins="false" to your RadGrid.
<telerik:RadGrid ID="RadGrid1" EnableEmbeddedSkins="false" runat="server">
This will tell the page to use your modified css file instead of the embedded one.Telerik's web site has a blog post called How To Override Styles in a RadControl for ASP.NET AJAX' Embedded Skin that explains in detail how to override an existing style.