MobileGrid - Row text overlapping

[Deepak MS]

Hi Maurice,

I ran into this issue while creating columns dynamically.

Basically, I am calling a query which gives me a result
set(ArrayCollection). Based on the columns I receive in this AC, I am
dynamically creating MobileGridColumns and storing this a model's array
variable. This variable is binded to MobileGrid's columns property in my
view.

When I do that, the text in each row overlaps. I created a simple case
below:
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009";
        xmlns:s="library://ns.adobe.com/flex/spark" title="Home" xmlns:ns="
http://flex.apache.org/experimental/ns";
creationComplete="view1_creationCompleteHandler(event)">

    <s:layout>
        <s:VerticalLayout verticalAlign="top" horizontalAlign="left"/>
    </s:layout>
    <fx:Declarations>

    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.events.FlexEvent;

            import spark.components.supportClasses.MobileGridColumn;
            private var serviceData:ArrayCollection = new ArrayCollection([
                {geo:'Geo1', sales:123342, target:12324},
                {geo:'Geo2', sales:3423342, target:384324},
                {geo:'Geo3', sales:3234342, target:12324},
                {geo:'Geo4', sales:673342, target:34324},
                {geo:'Geo5', sales:853342, target:72324},
            ]);
            [Bindable]private var dp:ArrayCollection = new
ArrayCollection();
            [Bindable]private var cols:Array = [];

            protected function
view1_creationCompleteHandler(event:FlexEvent):void
            {
                var newCols:Array = [];
                if(serviceData.length > 0)
                {
                    for(var colName:String in serviceData[0])
                    {
                        var mgc:MobileGridColumn = new MobileGridColumn();
                        mgc.dataField = colName;
                        mgc.width = 300;
                        newCols.push(mgc);
                    }

                    cols = newCols;
                }

                for each(var item:Object in serviceData)
                {
                    dp.addItem(item);
                }
            }

        ]]>
    </fx:Script>


    <ns:MobileGrid width="100%" height="100%" dataProvider="{dp}"
columns="{cols}"/>
</s:View>

It would be great there is an way out to display columns dynamically.

Screenshot for reference:

http://snag.gy/WUOHG.jpg


Cheers!