You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@flex.apache.org by Deepak MS <me...@gmail.com> on 2014/07/09 14:11:34 UTC
MobileGrid - Row text overlapping
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!
RE: MobileGrid - Row text overlapping
Posted by Maurice Amsellem <ma...@systar.com>.
Looking again at MDG code, it seems that it actually support dynamic assignment of columns.
So this is a bug.
Can you please raise a ticket, thanks.
Maurice
-----Message d'origine-----
De : Maurice Amsellem [mailto:maurice.amsellem@systar.com]
Envoyé : mercredi 9 juillet 2014 14:25
À : users@flex.apache.org
Objet : RE: MobileGrid - Row text overlapping
Hi Deepak,
MobileGrid is not a full-featured DataGrid like spark DataGrid and does not support dynamic columns assignment , to keep the code as simple as possible.
You can raise a ticket for an enhancement, I will check if it's not too complicated to do (no promise).
Maurice
-----Message d'origine-----
De : Deepak MS [mailto:megharajdeepak@gmail.com] Envoyé : mercredi 9 juillet 2014 14:12 À : users@flex.apache.org Objet : MobileGrid - Row text overlapping
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!
Re: MobileGrid - Row text overlapping
Posted by Deepak MS <me...@gmail.com>.
Hi Maurice,
I have raised a ticket:
https://issues.apache.org/jira/browse/FLEX-34404
Sure, you can look into it when you get free time. Meanwhile, it would be
great if you can provide some tips on where can this change be done, so
that I'll give it a try. By extending\overriding the component\any function
may be?
I was using spark datagrid, but scrolling has become a big problem as it is
not smooth. Hence I'm planning to completely move to MobileGrid for ipad
app.
SortCompareFunction was another function which wasn't there and hence I
tried to use custom sort on sortChange event(event like a headerRelease),
but no luck there too.
Thanks for all the help...
Cheers!
On Wed, Jul 9, 2014 at 5:54 PM, Maurice Amsellem <
maurice.amsellem@systar.com> wrote:
> Hi Deepak,
>
> MobileGrid is not a full-featured DataGrid like spark DataGrid and does
> not support dynamic columns assignment , to keep the code as simple as
> possible.
>
> You can raise a ticket for an enhancement, I will check if it's not too
> complicated to do (no promise).
>
> Maurice
>
> -----Message d'origine-----
> De : Deepak MS [mailto:megharajdeepak@gmail.com]
> Envoyé : mercredi 9 juillet 2014 14:12
> À : users@flex.apache.org
> Objet : MobileGrid - Row text overlapping
>
> 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!
>
RE: MobileGrid - Row text overlapping
Posted by Maurice Amsellem <ma...@systar.com>.
Hi Deepak,
MobileGrid is not a full-featured DataGrid like spark DataGrid and does not support dynamic columns assignment , to keep the code as simple as possible.
You can raise a ticket for an enhancement, I will check if it's not too complicated to do (no promise).
Maurice
-----Message d'origine-----
De : Deepak MS [mailto:megharajdeepak@gmail.com]
Envoyé : mercredi 9 juillet 2014 14:12
À : users@flex.apache.org
Objet : MobileGrid - Row text overlapping
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!