4 Replies Latest reply on Oct 4, 2011 4:57 PM by Michael J Roberts

    How to set header background color in a spark datagrid

    dsNYC76

      I have searched high and low for an answer to what should be a simple question.  I want to change the background color of only the column header area of my datagrid.  I think it has to be done in a custom skin which I've created but I can't figure out what to do next. I have created custom button and panel skins and changed background colors with no problem.

       

      Any assistance would be gretly apreicated.

        • 1. Re: How to set header background color in a spark datagrid
          Michael J Roberts

          Hi,  I beleive you'll want to create a custom DataGridSkin and change the HeaderRenderer to a custom GridItemRenderer.  To do this the dataGrid definition could look something like this:

           

          <s:DataGrid skinClass="RedDataGridSkin">

           

          RedDataGridSkin could look something like this:

           

          <spark:DataGridSkin xmlns:fx="http://ns.adobe.com/mxml/2009"

                              xmlns:s="library://ns.adobe.com/flex/spark"

                              xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:spark="spark.skins.spark.*"

                              xmlns:local="*">

              <fx:Declarations>

                  <fx:Component id="headerRenderer">

                      <local:RedGridHeaderRenderer />

                  </fx:Component>

              </fx:Declarations>

          </spark:DataGridSkin>

           

          And the RedGridHeaderRenderer can be almost a carbon copy of the SDKs DefaultGridHeaderRenderer, but just changing around some of the colors or adding in some skinning assets.

           

          I will add a more complete answer as a follow up comment and will soon post the full solution with a working example on ramblingdeveloper.com.

           

          -Mike

          ramblingdeveloper.com

          • 2. Re: How to set header background color in a spark datagrid
            Michael J Roberts Level 2

            I have posted a full solution and a demo with example code on ramblingdeveloper.com.

             

            The direct link to the article is HERE.

             

            The link to the demo and source is HERE.

             

            I hope this helps you with your problem.

             

            -Mike

            • 3. Re: How to set header background color in a spark datagrid
              dsNYC76 Level 1

              Sorry for the long delay in responding.   Thanks for the posts and the detailed samples. Your solution was fairly easy and did the trick.  I wish I understood why Adobe makes it so complicated to do basic styling tasks. 

               

              Now that I have the header background color set (solid  dark blue), how can I set the color of the header text?

              • 4. Re: How to set header background color in a spark datagrid
                Michael J Roberts Level 2

                Within your "BlueGridHeaderRenderer" mxml, simply add a script block that looks like this:

                 

                <fx:Script>

                        <![CDATA[

                            override public function prepare(hasBeenRecycled:Boolean):void{

                                super.prepare(hasBeenRecycled);

                                labelDisplay.setStyle("color",0xFF0000);

                            }

                        ]]>

                    </fx:Script>

                 

                Just change the hex color code in the setStyle call to be whatever color you want.