CODEWITHSUNDEEP
actionscript-3apache-flexflex4flex3flex4.5
Vijay Krishnan G
Vijay Krishnan G

Reputation: 49

Unable to Align data in Datagrid

Hi I have issue with alignment of data in the spark datagrid column after Rendering. All the headers are aligned towards left, however i would like to do the following 1. Middle the column header name. 2. Align the text to right. 3.Freeze the first column so that when i do horizontal scroll, the first column should not move horizontally.

Any help in this regard would be highly grateful.

Thanks and regards

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

    <fx:Script>
        <![CDATA[
            import flashx.textLayout.formats.BackgroundColor;

            import mx.controls.Alert;
            import mx.states.SetStyle;

            private const POSITIVE_COLOR:uint = 0x000000; // Black
            private const NEGATIVE_COLOR:uint = 0xFF0000; // Red

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

                if (this.data) {
                    if (column.labelFunction != null ) {
                        lblData.text = column.labelFunction( data, column );

                        setStyle("color", (parseInt(this.data.st1) < 0) ? NEGATIVE_COLOR : POSITIVE_COLOR);

                    } else {
                        lblData.text = data[column.dataField];
                    }
                }
            }
        ]]>
    </fx:Script>

    <s:Label id="lblData" top="9" left="7" textAlign="right"/>

</s:GridItemRenderer>

Upvotes: 0

Views: 641

Answers (1)

RIAstar
RIAstar

Reputation: 11912

2/ Align the text to right.

I'll start with the easiest one.
In your custom item renderer, you're still aligning to the left (left="7"). You have two options to fix this:

<s:Label id="lblData" top="9" right="7"/>

will align the Label to the right and cause text overflow to the left

<s:Label id="lblData" top="9" left="7" right="7" textAlign="right"/>

will make the Label take all the available space, align the text to the right and truncate the text if it's too big

1/ Middle the column header name.

I think the only way is to create a custom headerRenderer.

  • copy the entire DefaultGridHeaderRenderer
  • find the Label with id "labelDisplay"
  • change its textAlign property to center
  • assign the custom headerRenderer:
    <s:GridColumn headerRenderer="path.to.CenteredHeaderRenderer"/>

3/ Freeze the first column so that when i do horizontal scroll, the first column should not move horizontally.

I'm afraid this is going to require some serious hacking. If you don't want to dive in and create a customized DataGrid, I think your best bet is to fake it:

  • create a List to represent the fixed column
  • create a DataGrid to represent the other columns
  • turn off the List's vertical scrollbar: you wanna controll the scrolling through the grid
  • bind their vertical scrolling position: when the DataGrid is vertically scrolled, the List must follow and vice-versa
  • bind their selected items
  • do some skinning to make it look like one DataGrid

Upvotes: 2

Related Questions