Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 513
  • Last Modified:

How do you get the data grid to display data vertically

Maybe its not the data grid I am looking for but I have a XML file that would output the following

http://www.p3x984.com/dgrid/

If the data count reaches 4 then it would return and display the second row.  How would i do this in flex.  I was trying it with the dbgrid but not sure if that is the correct way of doing this.

So basically when the XML file is parsed the data would be displayed like this


Item 1 Item 2 Item 3 Item4
Item 5 Item 6 Item7 Item8
0
stargateatlantis
Asked:
stargateatlantis
  • 6
  • 4
1 Solution
 
evcrCommented:
Hi,

There are a few standard Flex components that can achieve this:
HBox
Grid
Tile
Repeater

Component Explorer Here:
http://examples.adobe.com/flex3/componentexplorer/explorer.html

Repeater seems like the best option in your case but depends on your application

HTH
0
 
stargateatlantisAuthor Commented:
So how would you display the data in a Repeater with the following XML data


<ansum>
<anrec>
<dimg>1.gif</dimg>
<percentage>Blogs: 404</percentage>
</anrec>
<anrec>
<dimg>2.gif</dimg>
<percentage>Consumer Site: 13</percentage>
</anrec>
<anrec>
<dimg>4.gif</dimg>
<percentage>Forums: 136</percentage>
</anrec>
<anrec>
<dimg>5.gif</dimg>
<percentage>Gripe: 3</percentage>
</anrec>
<anrec>
<dimg>8.gif</dimg>
<percentage>Image: 10</percentage>
</anrec>
 
<anrec>
<dimg>3.gif</dimg>
<percentage>News: 148</percentage>
</anrec>
<anrec>
<dimg>6.gif</dimg>
<percentage>Other: 26</percentage>
</anrec>
<anrec>
<dimg>9.gif</dimg>
<percentage>Video: 59</percentage>
</anrec>
</ansum>

Open in new window

0
 
evcrCommented:
Save your xml in data.xml and try this:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:comps="*" layout="absolute"	creationComplete="xmlData.send()" >
<mx:Script>
<![CDATA[
	import mx.controls.Alert;
	import flash.events.*
]]>
</mx:Script>
<mx:HTTPService id="xmlData" resultFormat="e4x" makeObjectsBindable="true" url="../assets/data.xml" fault="Alert.show('Data Error','Data Error')"/>
 
	<mx:TileList width="400" id="myTile" columnCount="4" dataProvider="{xmlData.lastResult.anrec}">
		<mx:itemRenderer>
			<mx:Component>
			<mx:Canvas horizontalScrollPolicy="off" verticalScrollPolicy="off" height="100" width="100">
			<mx:Image width="20" height="20" source="{data.dimg}"/>
			<mx:Label width="100" text="{data.percentage}"/>				
			</mx:Canvas>
			</mx:Component>
		</mx:itemRenderer>
	</mx:TileList>
</mx:Application>

Open in new window

0
NEW Veeam Agent for Microsoft Windows

Backup and recover physical and cloud-based servers and workstations, as well as endpoint devices that belong to remote users. Avoid downtime and data loss quickly and easily for Windows-based physical or public cloud-based workloads!

 
stargateatlantisAuthor Commented:
Does the result have to be in resultFormat="e4x"? can I just leave that blank?
0
 
evcrCommented:
I Assume you tried that and it didn't work any more.

Well e4x works in this case, e4x automagically tries to parse xml files, quite nice, if it works.

Just setting it to xml may work though, what's the problem using e4x?
0
 
stargateatlantisAuthor Commented:
I got it to work but the problem is that.  If i have a image size of 5 pixels by 5 pixels the canvas stretches it out.  Also how would i be able to add padding between each item so that they are spaced out and not close to each other.

0
 
evcrCommented:
just copy the canvas part:

 <mx:Canvas horizontalScrollPolicy="off" verticalScrollPolicy="off" height="100" width="100">
                        <mx:Image width="20" height="20" source="{data.dimg}"/>
                        <mx:Label width="100" text="{data.percentage}"/>                                
 </mx:Canvas>

....to somewhere else in the appication, so that you can visually adjust what each tile will look like, then replace the canvas . You use the tilelists rowheight and columnwidth to adjust the gaps between the tiles.
0
 
evcrCommented:
is this sorted now?
0
 
stargateatlantisAuthor Commented:
I tired all that but the problem is when yo have the following

<mx:Image width="20" height="20" source="{data.dimg}"/>
<mx:Label width="100" text="{data.percentage}"/>                  

I need spacing between those two components.  Then it will work    
0
 
evcrCommented:
a couple of way to do this:

//add 10px vertical padding between image and label
<mx:Label paddingTop="10" width="100" text="{data.percentage}"/>
//add 10px horizontal padding between image and label
<mx:Label paddingLeft="10" width="100" text="{data.percentage}"/>

or encapsulate both image and label inside a vBox or HBox and adjust it's e.g.

<mx:Canvas horizontalScrollPolicy="off" verticalScrollPolicy="off" height="100" width="100">
<mx:VBox horizontalGap="10" verticalGap="10">
<mx:Image width="20" height="20" source="{data.dimg}"/>
<mx:Label width="100" paddingTop="20"  text="{data.percentage}"/>                                
</mx:VBox>
</mx:Canvas>
0

Featured Post

Veeam and MySQL: How to Perform Backup & Recovery

MySQL and the MariaDB variant are among the most used databases in Linux environments, and many critical applications support their data on them. Watch this recorded webinar to find out how Veeam Backup & Replication allows you to get consistent backups of MySQL databases.

  • 6
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now