4 Replies Latest reply on Jul 11, 2011 9:55 AM by kevinklin

    Spark Datagrid:  Styling the Header?

    UnfinishedDream Level 1



      Question for all the Spark and Datagrid gurus out there:

      • How can I change the text style of the spark datagrid header?  For example, I want to make it blue with underlines.  More importantly I need to change the color on rollover and/or selection. 
      • Second, how can I change the sort indicator/icon?  I'd like to substitute the up/down triangle with a graphic image or other mxml object. 


      I've searched the net high and low, but haven't yet found answers to the above questions.  Is there documentation for such things, or is a bunch of custom code required? 


      Within the DefaultGridHeaderRender (which I've duplicated), I did find the "labelDisplayGroup" and the "sortIndicatorGroup".  But how can these be customized?


      Thank you very much for any advice or help.  Regards,



        • 1. Re: Spark Datagrid:  Styling the Header?
          UnfinishedDream Level 1

          In reply to my own question, I did fine the "defaultSortIndicator" component and "labelDisplay", but I'm still not sure how to get the text to change color on selection.  Any suggestions?  To my gridItemRenderer for the body of the grid, I added a selected state which worked.  But it doesn't seem to work in the header. 


          Thanks ahead of time,



          • 2. Re: Spark Datagrid:  Styling the Header?
            kevinklin Adobe Employee

            Hi Dana,


            Are you looking to select the headers like toggle buttons? Meaning clicking a header once will put it into the selected state until the next click? Or do you just want to change the color with the user has moused down on the header?


            If the latter, you can use the "down" state instead (should be defined in the default). Currently, we don't support the "selected" state in the header because there's no user interaction associated with it by default.


            If you need the toggle button-like behavior, you might try actually putting a ToggleButton with a custom skin in a custom header renderer, but you'll have to handle the selection yourself.


            Hope this helps,


            • 3. Re: Spark Datagrid:  Styling the Header?
              UnfinishedDream Level 1

              Thank you Kevin for the reply. 


              Ideally we'd like to be able to clearly indicate to the user which column is selected.  With the default skin, the background color for the header renderer is used to indicate currently selected column.  However in the current design I'm working with, the background needs to be transparent.  So the goal is to indicated which header is selected by changing the header text color.  My hope was that whatever controls when the sort indicator and the background color change was also easily accessible.  But I can't find a way to leverage the existing controls to know when a column is selected.


              It sounds like instead I should write and append my own column selection control mechanism and/or events, which I can then use to change the text color. 


              In the future it might be nice to have a "selected" state for header renderers, like the rest of the datagrid items, to make it easily to program for and separate out the 'view' a bit more.  (Unless of course this already exists, and I'm just missing it.)


              Thanks for your replies,



              • 4. Re: Spark Datagrid:  Styling the Header?
                kevinklin Adobe Employee

                It is definitely possible to extend datagrid to have your own column selection. In fact, I've attached an old prototype of mine that demonstrates this. In this case, I've hacked up the "down" state of the renderer to act like the "selected" state (see the prepare() method of the header renderer).


                I agree that in the future, the header renderers should support all the grid item renderer features. You can file an enhancement if you'd like at bugs.adobe.com/flex.


                In your specific case, I would suggest writing your own header renderer which has an overridden prepare method. In prepare, you can check whether its column is selected and then sets the renderer's selected property accordingly (which in turn sets the selected state). This should get the behavior you want.