Flex 4.5 position label in DefaultGridItemRenderer

Question

I need the label to be indented. Setting de properties top, bottom, left don't work.

<?xml version="1.0" encoding="utf-8"?>
<s:DefaultGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                           xmlns:s="library://ns.adobe.com/flex/spark" 
                           xmlns:mx="library://ns.adobe.com/flex/mx" top="10" bottom="10"
                           left="{data != null ? left = (data.niveau-1) * 20 : ''}">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[           
            override public function prepare(willBeRecycled:Boolean):void{
                if(data != null){
                    label = data.tekst;
                    styleName= 'niveau'+data.niveau;                    
                    toolTip=data.hulptekst;                 
                }
            }

        ]]>
    </fx:Script>
</s:DefaultGridItemRenderer>

Answer 1

I think the best way to take control over alignment is to integrate your components into a Group.

Here is an effect you can achieve:

Here is the code:

//App

<?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">
<fx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;

        [Bindable]private var myDP:ArrayCollection = new ArrayCollection([
            {myfield:"Hello", niveau:3},
            {myfield:"World", niveau:7},
            {myfield:"!!!", niveau:5}
        ]); 
    ]]>
</fx:Script>

<s:DataGrid id="myDG" x="20" y="20" height="120" dataProvider="{myDP}" editable="true">
    <s:columns>
        <s:ArrayList>
            <s:GridColumn dataField="myfield" headerText="My Field" width="170" itemRenderer="renderers.CustomRenderer"/>       
            <s:GridColumn dataField="myfield" headerText="My Field" width="170"/>
        </s:ArrayList> 
    </s:columns >
</s:DataGrid>

</s:Application>

//Renderer

<?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[
        override public function prepare(hasBeenRecycled:Boolean):void {
            lblData.text = data[column.dataField]
        }
    ]]>
</fx:Script>

<s:Group width="100%" height="100%">
    <s:Label id="lblData" top="9" left="{data != null ? (data.niveau - 1) * 20 : 0}"/>      
</s:Group>

</s:GridItemRenderer>