Vertically Align Text in Spark DataGrid Row

0
votes

One would think that these kinds of things are easy - and maybe they are.

I would like to make the height of my DataGrid rows a bit larger than the default. The problem is that the text is vertically align to the top of the row. I would like to vertically align it to the middle of the row.

Is there a way of doing that via CSS or Skinning in Flex 4.6? Please note that I am using a Spark DataGrid and not an MX version.

Thanks,

-Vic

2
actionscriptflex4mxmlflex-spark

2 Answers

1
votes

You need to create custom grid item renderer:

CustomGridItemRenderer.mxml:

<?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">

<s:Label id="rendererLabel"
    verticalCenter="0"
    text="{data[column.dataField]}"/>

</s:GridItemRenderer>

And assign it to datagrid's property "itemRenderer". That's it:)

1
votes

In my case I also created a custom grid item renderer, but instead a GridItemRenderer I used the DefaultGridItemRenderer:

<?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" textAlign="right">

</s:DefaultGridItemRenderer>

The trick here is to play with the textAlign.