Solved

Displaying multi-line data in DataGrid using 5000 objects

Posted on 2008-06-26
2
810 Views
Last Modified: 2012-05-05
Sometimes learning too much is a bad thing I think.  In the past, if I needed to create a dataGrid which uses 3 lines of output for each object in my dataprovider, I would just use an item renderer (probably an hbox with vboxes in it or whatever) and add pagination if it were slow.  But since I read chapter 4 in Adobe's "Buildin and Deploying Adobe Flex 3 Applications" I'm hesitant to put containers in containers 4 levels deep, etc.

Essentially, I need to display a report in the dataGrid where each line will always be three lines high.  It needs to resemble a Crystal Report output file that will eventually be generated, but with extra functionality.  So let's say column 1 contains the ID and name of the object.  Column 2 contains the Height on line one, the width on two, and the depth on three.  The real app has 10 columns and a lot more info, but always three lines.

The arrayCollection can have 5000 items in it.  So I figure my options are:
create an item renderer with an HBox containing ten VBoxes as the item renderer and load the sucker up and throw all 5000 items in it, or
do the same item renderer but create pagination or
same item renderer with "continuous scrolling"  (like: http://ui-patterns.com/pattern/ContinuousScrolling) which would beg the question, has this been done in reusable form already?

Or else I could do a different item renderer with some other data grabbing method.

My original plan had been to get the objects to the users application instance on an as-needed basis and then keep them there.  But these are fairly large objects and I'm wondering if this is the best idea.  We could end up with an object containing an arrayCollection of about 10 objects, with each of them having 4 arraycollections of objects, with each of those having 5,000 objects... (kind of a state->city->person data model)

And unfortunately since this is geared to be a legacy system replacement, the users are used to being able to see the data continuously without really having to stop/wait or pagination.

Anyway, I hope this all makes sense... I really just need the most efficient, or best practice, method for displaying way too much data in way too small a space.  Easy, right?
0
Comment
Question by:adobe116
2 Comments
 
LVL 19

Accepted Solution

by:
Gary Benade earned 500 total points
Comment Utility
I would do it like this:
<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">

	<mx:Script>

		<![CDATA[

			import mx.messaging.AbstractConsumer;

			[Bindable] private var d:Array = [];

			private function init():void

			{

				for( var i:int=0; i<5000; i++)

				{

					d.push( {one:'1 ' + i, two:'2 ' + i, three:'3 ' + i, four:'4 ' + i, five:'5 ' + i, six:'6 ' + i, seven:'7 ' + i, eight:'8 ' + i, nine:'9 ' + i, ten:'10 ' + i, eleven:'11 ' + i, twelve:'12 ' + i});		

				}

				dg.dataProvider = d;

			}

		]]>

	</mx:Script>

	<mx:DataGrid id="dg" x="211" y="162" width="464">

		<mx:columns>

			<mx:DataGridColumn headerText="Column 1" dataField="col1" itemRenderer="BusyItemRenderer"/>

		</mx:columns>

	</mx:DataGrid>
 

</mx:Application>
 

//save as BusyItemRenderer.as

package

{

	import mx.containers.Canvas;

	import mx.controls.Label;
 

	public class BusyItemRenderer extends Canvas

	{

		private var l1:Label;

		private var l2:Label;

		private var l3:Label;

		private var l4:Label;

		private var l5:Label;

		private var l6:Label;

		private var l7:Label;

		private var l8:Label;

		private var l9:Label;

		private var l10:Label;

		private var l11:Label;

		private var l12:Label;

		public function BusyItemRenderer()

		{

			super();

		}	

		override public function set data(value:Object):void

		{

			super.data = value;

			l1.text = data.one;

			l2.text = data.two;			

			l3.text = data.three;

			l4.text = data.four;			

			l5.text = data.five;

			l6.text = data.six;			

			l7.text = data.seven;

			l8.text = data.eight;			

			l9.text = data.nine;

			l10.text = data.ten;			

			l11.text = data.eleven;			

			l12.text = data.twelve;			

		}

		override protected function createChildren():void

		{

			l1 = new Label();

			l1.x = 0;

			l1.y = 0;

			l1.width=150;

			this.addChild(l1);

			l2 = new Label();

			l2.x = 0;

			l2.y = 10;

			l2.width=150;

			this.addChild(l2);

			l3 = new Label();

			l3.x = 0;

			l3.y = 20;

			l3.width=150;

			this.addChild(l3);

			l4 = new Label();

			l4.x = 100;

			l4.y = 0;

			l4.width=150;

			this.addChild(l4);

			l5 = new Label();

			l5.x = 100;

			l5.y = 10;

			l5.width=150;

			this.addChild(l5);

			l6 = new Label();

			l6.x = 100;

			l6.y = 20;

			l6.width=150;

			this.addChild(l6);

			l7 = new Label();

			l7.x = 150;

			l7.y = 0;

			l7.width=150;

			this.addChild(l7);

			l8 = new Label();

			l8.x = 150;

			l8.y = 10;

			l8.width=150;

			this.addChild(l8);

			l9 = new Label();

			l9.x = 150;

			l9.y = 20;

			l9.width=150;

			this.addChild(l9);

			l10 = new Label();

			l10.x = 200;

			l10.y = 0

			l10.setStyle("textAlign", "right");

			l10.setStyle("right", 0);

			this.addChild(l10);

			l11 = new Label();

			l11.x = 200;

			l11.y = 10

			l11.setStyle("textAlign", "right");

			l11.setStyle("right", 0);

			this.addChild(l11);

			l12 = new Label();

			l12.x = 200;

			l12.y = 20

			l12.setStyle("textAlign", "right");

			l12.setStyle("right", 0);

			this.addChild(l12);

			

		}

	}

}

Open in new window

0
 
LVL 2

Author Closing Comment

by:adobe116
Comment Utility
Hey Hobbit, thanks a lot.  You went above and beyond in answering the question.  Thank you so much.
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

First things first - Preparation We need all the part for this install and it's much nicer to have them all on hand when you need them so here's what's required. Download Eclipse 3.5 32 bit (I like the Classic flavour) from here. (http://www.e…
Possible fixes for Windows 7 and Windows Server 2008 updating problem. Solutions mentioned are from Microsoft themselves. I started a case with them from our Microsoft Silver Partner option to open a case and get direct support from Microsoft. If s…
It is a freely distributed piece of software for such tasks as photo retouching, image composition and image authoring. It works on many operating systems, in many languages.
This video demonstrates how to create an example email signature rule for a department in a company using CodeTwo Exchange Rules. The signature will be inserted beneath users' latest emails in conversations and will be displayed in users' Sent Items…

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now