Skip navigation
Currently Being Moderated

Can't change AdvancedDataGrid Header Text Color

Sep 2, 2010 3:27 PM

Hello,

 

I'm having a really annoying problem styling the AdvancedDataGrid header text colors. With a regular DataGrid you can use a property called "headerStyleName" to set the color of the header text. According to the documentation this style is applicable to AdvancedDataGrid as well. You can see that here:

 

http://help.adobe.com/en_US/FlashPla...eaderStyleName

 

Here is a sample app that will show you what I'm talking about. Notice that both grids share the same style but only the normal grid will apply it.

 

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                  xmlns:s="library://ns.adobe.com/flex/spark"
                  xmlns:mx="library://ns.adobe.com/flex/mx">
     
     <s:layout>
          <s:VerticalLayout paddingTop="10"
                                paddingRight="10"
                                paddingBottom="10"
                                paddingLeft="10" />
     </s:layout>
     <fx:Style>
          @namespace s "library://ns.adobe.com/flex/spark";
          @namespace mx "library://ns.adobe.com/flex/mx";
          .headerStyle
          {
               color: #FF0000;
               fontWeight: bold;
          }
     </fx:Style>
     <mx:DataGrid width="100%" height="100%" headerStyleName="headerStyle">
          <mx:columns>
               <mx:DataGridColumn headerText="Header 1" />
               <mx:DataGridColumn headerText="Header 2" />
          </mx:columns>
     </mx:DataGrid>
     <mx:AdvancedDataGrid width="100%" height="100%" headerStyleName="headerStyle">
          <mx:columns>
               <mx:AdvancedDataGridColumn headerText="Header 1" />
               <mx:AdvancedDataGridColumn headerText="Header 2" />
          </mx:columns>
     </mx:AdvancedDataGrid>
     
</s:Application>

 

This is driving me nuts as I have to use Advanced data grids because of their added functionality. I would greatly appreciate any solutions to this.

 
Replies
  • Currently Being Moderated
    Sep 2, 2010 3:56 PM   in reply to Budkin76

    I am not sure why that is not working, but this works

     

    mx|AdvancedDataGridHeaderRenderer
    {
         color: #FF0000;
         fontWeight: bold;
    }
    
     
    |
    Mark as:
  • Currently Being Moderated
    Jun 23, 2011 6:48 AM   in reply to Subeesh Arakkan

    Hi Arakkan,

     

    How to call this advanceddatagridheaderrenderer like I am calling css styles for adg in AS

     

    adg.setStyle("styleName",'adgcss');

     

     

    here adgcss is stylename like this been declared .adgcss{ } but u didn't mention declaration without .(dot)

     

    could u pls explain me how to call it

     

    Thnq in advance

    -Mahesh

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 23, 2011 7:20 AM   in reply to maheshbabum

    Mahesh,

     

    Setting headerStyleName works in the new SDK. Try the following code

    .headerStyle
    {
         color: #FF0000;
         fontWeight: bold;
    }
     
     
    adg.setStyle("headerStyleName","headerStyle");
    

     

     

    Hope that helps

     

    Subeesh

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 23, 2011 8:31 AM   in reply to Subeesh Arakkan

    Hi Subeesh,

     

    No it is not working with that in my current sdk. so i am trying otherway round.

    I want to know how to use the headerrenderer usage...in css way or any other way setting for header text coloring...

     

    thnq for ur quick response...

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 23, 2011 8:34 AM   in reply to maheshbabum
    <?xml version="1.0" encoding="utf-8"?>
    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
                      xmlns:s="library://ns.adobe.com/flex/spark" 
                      xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
                      creationComplete="application1_creationCompleteHandler(event)">
         <fx:Style>
              @namespace s "library://ns.adobe.com/flex/spark";
              @namespace mx "library://ns.adobe.com/flex/mx";
              .headerStyle
              {
                   color: #FF0000;
                   fontWeight: bold;
              }
         </fx:Style>
         <fx:Script>
              <![CDATA[
                   import mx.events.FlexEvent;
                   private function application1_creationCompleteHandler(event:FlexEvent):void
                   {
                        adg.setStyle("headerStyleName","headerStyle");
                   }
                   
              ]]>
         </fx:Script>
         <mx:AdvancedDataGrid id="adg" width="100%" height="100%" >
              <mx:columns>
                   <mx:AdvancedDataGridColumn headerText="Header 1" />
                   <mx:AdvancedDataGridColumn headerText="Header 2" />
              </mx:columns>
         </mx:AdvancedDataGrid>
    </s:Application>
    

     

     

    This is not working for you ?

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 23, 2011 8:46 AM   in reply to Subeesh Arakkan

    try

    styleManager.getStyleDeclaration("mx.controls.advancedDataGridClasses.AdvancedDataGridHeaderRenderer").setStyle("color","red");
    
     
    |
    Mark as:
  • Currently Being Moderated
    Jun 23, 2011 9:14 PM   in reply to Subeesh Arakkan

    Thnq Subeesh, Got worked with Stylemanager headerrenderer only ........yes that last code did not worked and tried stylemanager with adg only not with headerer.

    Can u tell me good tutorial for flex but iam not using spark ns but mostly i expect to do in AS only..

     

    Subeesh thnq for quick help ..

     

    -Mahesh

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 1, 2013 2:13 AM   in reply to Subeesh Arakkan

    This post is working for me, thanks Subeesh Arakkan

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points