Change header font color client side

3 posts, 1 answers
  1. Erik
    Erik avatar
    43 posts
    Member since:
    Feb 2009

    Posted 01 Jul 2014 Link to this post

    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. Answer
    Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 02 Jul 2014 in reply to Erik Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Erik
    Erik avatar
    43 posts
    Member since:
    Feb 2009

    Posted 02 Jul 2014 in reply to Jayesh Goyani Link to this post

    Jayesh, thanks much.  This works absolutely perfect. 
Back to Top