3

If I have 10 columns in a Spark datagrid, and some headers need to be left-justified, some headers right-justified, and some centered, what's the simplest way to accomplish this?

Assuming a custom headerRenderer is needed, are there any simple examples that can walk me through it?

Thanks in advance for any comments.

zero323
  • 322,348
  • 103
  • 959
  • 935
ggkmath
  • 4,188
  • 23
  • 72
  • 129

2 Answers2

4

The simplest way I could find to solve this is to override the settings in the spark DefaultGridHeaderRenderer, as discussed in this link:

http://flexponential.com/2011/10/30/changing-fontweight-of-spark-datagrid-headers/

More specifically, I used the following custom headerRenderer, saved as file: myRightHeaderRenderer.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:DefaultGridHeaderRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
            xmlns:s="library://ns.adobe.com/flex/spark" 
            xmlns:mx="library://ns.adobe.com/flex/mx" > 

<fx:Declarations>
    <s:Label id="labelDisplay" 
             verticalCenter="1" left="0" right="0" top="0" bottom="0"
             verticalAlign="middle"
             maxDisplayedLines="1"
             textAlign="right"
             fontWeight="bold"
             showTruncationTip="true" />
</fx:Declarations>

</s:DefaultGridHeaderRenderer>

This custom header renderer right-justifies header text. To use it, simply add it to one or more columns of the Spark DataGrid as follows:

...
<fx:Array>
    <s:GridColumn ... />
    <s:GridColumn headerRenderer="myRightHeaderRenderer" ...>
    <s:GridColumn ... />
    ...
</fx:Array>
...

I'm not sure how to do it, but I'm sure it can be made more flexible by parameterizing the textAlign attribute to be center, left, or right.

ggkmath
  • 4,188
  • 23
  • 72
  • 129
2

If you take a look at this blog post, there's a decent amount of source code available showing you how to do this.

However, I think that the blog's example is much more complex than you'll need. You will need a custom headerRenderer, as you feared, but your code should be pretty straightforward. I've only tested this lightly, so if you have any issues, let me know.

Custom Header Renderer

package
{
    import spark.skins.spark.DefaultGridHeaderRenderer;

    public class CustomGridHeader extends DefaultGridHeaderRenderer
    {
        public function CustomGridHeader()
        {
            super();
        }

        public function set headerTextAlign(value:String):void
        {
            labelDisplay.setStyle("textAlign",value);
            labelDisplay.styleChanged("textAlign");
        }
    }
}

Variables Available to Your Columns...

[Bindable] private var leftFactory:ClassFactory = new ClassFactory(CustomGridHeader);
[Bindable] private var rightFactory:ClassFactory = new ClassFactory(CustomGridHeader);
[Bindable] private var centerFactory:ClassFactory = new ClassFactory(CustomGridHeader);

On initialize or preinitialize...

leftFactory.properties = {headerTextAlign: "left"};
rightFactory.properties = {headerTextAlign: "right"};
centerFactory.properties = {headerTextAlign: "center"};

For Each Column...

<s:GridColumn headerText="..." headerRenderer="{centerFactory}"/>
Sam DeHaan
  • 10,246
  • 2
  • 40
  • 48
  • Thanks Sam, I'm nervous about using `setStyle` after reading in several places warning about performance (http://livedocs.adobe.com/flex/3/html/help.html?content=styles_08.html). Is there a way to avoid `setStyle`? Perhaps by overriding a function somewhere? – ggkmath May 02 '12 at 23:41
  • @ggkmath If you take a look at the blog post I linked, I think that does it without setStyle. – Sam DeHaan May 03 '12 at 12:27
  • Thanks Sam, really appreciate your input. I (finally) got it working with just a few lines of code (see my answer). – ggkmath May 03 '12 at 16:30