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

Change header font color client side

2 Answers 48 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Erik
Top achievements
Rank 1
Erik asked on 01 Jul 2014, 07:31 PM
I'm trying to change the header font color on a dynamically added user control RadGrid without much success.  I can change the main data of the Radgrid in any way I like (colors, font size, background, etc..), but it seems this isn't the case with the header section of the Grid.

Using Chrome and looking at the grid via the "Elements" tab through the developer tool I can clearly see the rgb font color (color: rgb(255, 0, 0);) being applied to the header section, yet the color change is never visually shown.  I've even tried appending on "!important" which does nothing either. 

$('#ctl00_MainContent_Grid_7011_ctl00_Header th').css('color', _newColor);  //set color of Grid header text - doesn't work???
$('#ctl00_MainContent_Grid_7011_ctl00_Header').css('color', _newColor);  //set color of Grid header text - doesn't work???
$('#ctl00_MainContent_Grid_7011_GridHeader').css('color', _newColor);  //set color of Grid header text - doesn't work???

$('#ctl00_MainContent_Grid_7011_GridData').css('color', _newColor);            //set data color - this works just fine

A section of the Grid markup which shows the color being applied, yet visually unchanged:
‚Äč
<thead>
<tr class="rgMultiHeaderRow">
<th scope="col" id="ctl00_MainContent_Grid_7011_ctl00ExpandColumn1_MultiHeader-1" class="rgHeader rgExpandCol" rowspan="3" style="color: rgb(255, 0, 0);">&nbsp;</th><th scope="col" class="rgHeader" colspan="10" style="font-size: 12pt; font-weight: bold; color: rgb(255, 0, 0);">Type Performance</th>
 </tr><tr class="rgMultiHeaderRow">
<th scope="col" id="ctl00_MainContent_Grid_7011_ctl00Application0_MultiHeader2" class="rgHeader" rowspan="2" style="color: rgb(255, 0, 0);"><a title="Click here to sort" href="javascript:__doPostBack('ctl00$MainContent$Grid_7011$ctl00$ctl02$ctl03$ctl00','')">Application</a></th>

2 Answers, 1 is accepted

Sort by
0
Accepted
Jayesh Goyani
Top achievements
Rank 2
answered on 02 Jul 2014, 06:24 AM
Hello,

I have checked below code in this demo. It works perfectly for me. You can also check below code in any browser using Developer tool/Fire bug/Console window.

$("#ctl00_ContentPlaceHolder1_RadGrid1 th.rgHeader a").css("color","red");

Let me know if any concern.

Thanks,
Jayesh Goyani
0
Erik
Top achievements
Rank 1
answered on 02 Jul 2014, 01:21 PM
Jayesh, thanks much.  This works absolutely perfect. 
Tags
Grid
Asked by
Erik
Top achievements
Rank 1
Answers by
Jayesh Goyani
Top achievements
Rank 2
Erik
Top achievements
Rank 1
Share this question
or