Flex 4.5 position label in DefaultGridItemRenderer - actionscript-3

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>