So not too long ago we received an E-mail asking a question about Flex DataGrids. The E-mail was asking the best way to get to a DataGrid that is being used as a item renderer inside another DataGrid. Today's tutorial is going to show how to do this and use XML as the source. By the end of the tutorial I hope everyone has a better handle on DataGrids and item renderers.
First we can take a look at the example application below. This application shows a simple DataGrid with a couple columns. The first column has a category name and the second column has a DataGrid inside it. I turned off the headers on the second grid. Now if we select a category we notice the information at the bottom updates with the category and the description of the category. Also if we select an item from a DataGrid in the second column we will notice the information about the post will appear below. So go ahead play around with it for a moment.
The Data Behind the Scenes
As noted earlier, the application is built to show us some of the articles that have been written in several categories of this blog. The way we break down the data is fairly simplistic. We have a simple xml file that resides on the server which we will pull using an mx:HTTPService, this will be explained in further detail later in the tutorial.
Below we have the xml data that we are going to use. You can see that we open with a tutorials tag. This, our root tag, will never be explicitly used. Inside, we have several category tags that will describe a single category. These will be the data providers for the main DataGrid. Nested in the category, we have the description which is displayed on the lower half of the application and the posts that are in that category.
Each post tag has a couple attributes which we use: the title and author. A single post tag only has one child which is the excerpt of the post. Now you will notice that I use CDATA tags for the category name, description and post excerpt. This is to make sure that special characters do not mess up the xml markup.
<category>
<name><![CDATA[C#]]></name>
<description>
<![CDATA[Tutorials along about the fun inner workings of C#]]>
</description>
<post title="C# Tutorial - Serialize Objects to a File"
author="The Reddest">
<exerpt>
<![CDATA[This tutorial will guide you through serializing C# objects to a binary text file. This process is very useful when data needs to be saved to disk and then retrieved at a later time. Most data structures in .NET already have serialization implemented, but this tutorial will demonstrate how to serialize custom objects.]]>
</exerpt>
</post>
<post title="C# Tutorial - Image Editing: Saving, Cropping, and Resizing"
author="The Fattest">
<exerpt>
<![CDATA[In C# it can be tiresome to do certain image editing functions using GDI+. This post has some fun editing methods which can come in handy at times. I have also included a nice little C# program to show all the functionality of the methods below.]]>
</exerpt>
</post>
<post title="C# Operator Overloading - The Crazy Side - Part 1"
author="The Tallest">
<exerpt>
<![CDATA[Operator overloading in C# is pretty easy and extensible, and there is plenty of documentation out there on the internet for most kinds of operator overloading. In fact the MSDN docs <a href="http://msdn2.microsoft.com/en-us/library/aa288467(VS.71).aspx"> themselves</a> do a good job of explaining how to do basic operator overloading. But what is not covered anywhere are the fringe cases of operator overloading - how overloading interacts with inheritance, and other things even weirder than that.]]>
</exerpt>
</post>
<post title="C# Operator Overloading - The Crazy Side - Part 2"
author="The Tallest">
<exerpt>
<![CDATA[Welcome back to the world of psychotic things you should never do if you want readable code! And in this particular case, I'll be talking about what happens in C# when you mix operator overloading with inheritance and polymorphism. If you need a refresher on C# operator overloading, you should check out part 1 of this tutorial, at <a href="http://blog.paranoidferret.com/?p=20">Overloading Part 1</a>. Now, without further ado, lets jump right in.]]>
</exerpt>
</post>
<post title="Interprocess Communication using Named Pipes in C#"
author="The Reddest">
<exerpt>
<![CDATA[Named pipes are a great way to communicate between multiple processes. What's makes them even better is that the processes don't have to share the same language. If you'd like detailed information about named pipes, <a href="http://msdn2.microsoft.com/en-us/library/aa365590.aspx">MSDN</a> has a fairly in depth article. This tutorial is going to demonstrate how to implement communication over named pipes using C# and Interop Services.]]>
</exerpt>
</post>
</category>
<category>
<name><![CDATA[Flex]]></name>
<description>
<![CDATA[Some of the greatest Flex tutorials on the planet. (In my opinion anyway)]]>
</description>
<post title="Flex & PHP Tutorial - Transmitting data using JSON"
author="The Fattest">
<exerpt>
<![CDATA[To make sure we don't get too stuck in a rut with our tutorial posts I decided to branch out a little bit and talk about Adobe Flex 2.0. I recently spent a lot of time figuring out how to do this. Basically what I am going to go over here is how to use php and json to send data to your flex application, and then how to use that data in Flex.]]>
</exerpt>
</post>
<post title="Flex Friday Feature - Datagrid Component"
author="The Fattest">
<exerpt>
<![CDATA[Due to popular demand, we've got another flex tutorial here for you all. I am going to go over a Flex component that we get a lot of search traffic for, but I have not yet gone in depth about. The datagrid component is one of the most versatile and used UIComponents in the flex environment. After this tutorial you should have a good grasp on how to use the datagrid component and what can be done with it.]]>
</exerpt>
</post>we
<post title="Flex Snippet Tutorial - View Stack Component"
author="The Fattest">
<exerpt>
<![CDATA[The Flex framework has a few different components to modify the layout on the page. This small tutorial is going to go over one of those options, the ViewStack component. This component is a fairly simple component that lets the programmer have multiple ui layers on one panel, but flip between which one is visible cleanly and easily.]]>
</exerpt>
</post>
<post title="Using Flex, PHP, and JSON to Modify a MySQL Database"
author="The Fattest">
<exerpt>
<![CDATA[To follow-up on the <a href="http://blog.paranoidferret.com/?p=23">Flex and PHP tutorial</a> we did earlier I thought it would be nice to do a complete tutorial on php, mysql, flex, and json. This tutorial should show a decent way to send data in a database to and from flex to php using json.]]>
</exerpt>
</post>
</category>
<category>
<name><![CDATA[JavaScript]]></name>
<description>
<![CDATA[Great explanations of how to build cool stuff using the great language of JavaScript.]]>
</description>
<post title="Javascript and CSS Tutorial - How to make Sliding Panels"
author="The Reddest">
<exerpt>
<![CDATA[This tutorial provides a step-by-step guide to creating sliding panels (like the one on the left) using nothing but Javascript and CSS. We used these panels on <a href="http://www.gamingtextures.com">Gaming Textures</a> so the user could hide parts of the page when they weren't being used.]]>
</exerpt>
</post>
<post title="Javascript Tutorial - How to Auto Ellipse Text"
author="The Reddest">
<exerpt>
<![CDATA[This tutorial will demonstrate how to add ellipsis (...) to text when it exceeds a desired length using Javascript.]]>
</exerpt>
</post>
<post title="Javascript And CSS Tutorial - Dynamic Tabbed Panels"
author="The Tallest">
<exerpt>
<![CDATA[A classic user interface design element is the tabbed panel - in fact the browser you are using right now probably uses tabs. There are many styles and designs for tabbed panels on web pages as well, but tend to be static. Here, we are going to create a tabbed panel using javascript that you can add tabs to on the fly.]]>
</exerpt>
</post>
<post title="Javascript and CSS Tutorial - Generic Animation"
author="The Tallest">
<exerpt>
<![CDATA[We have talked about animation in javascript before (notably <a href="http://blog.paranoidferret.com/?p=4">Sliding Panels</a>), but here we are going to take the concept one step further. This tutorial is about writing a generic animation function - a function which, given an html element, can move and resize that element over a given time period. So, for instance, you could use this function to get sliding panel functionality, or to move some text around on the screen, or pretty much any dynamic movement that you would want to do to a single element on a webpage.]]>
</exerpt>
</post>
<post title="Secure Authentication Without SSL Using Javascript"
author="The Tallest">
<exerpt>
<![CDATA[Everybody loves the Web 2.0 style of no page loads and seamless transitions (almost everybody). But there are some security limitations placed on the xmlhttp callback objects that make life a little difficult sometimes. For instance, if your page originated on the server http://blog.paranoidferret.com/, you are only allowed to use the xmlhttp request object to request data from http://blog.paranoidferret.com/. If you try and request data from https://blog.paranoidferret.com/, the request will throw an exception and you'll get nowhere.]]>
</exerpt>
</post>
<post title="Javascript Objects - A Useful Example" author="The Tallest">
<exerpt>
<![CDATA[Today, we are going to take a look at how to work with simple (and not so simple) javascript objects. The javascript object is a very misunderstood beast - quite often people don't even know that javascript has objects. And of the people who do know about them, many think that it is a stripped down and weak object system, and so never bother to actually use it when writing any javascript. But actually the opposite of that is true - the javascript object model is extremely flexible, and allows you as the programmer to do things that can't be done without extreme contortions in languages like C++ and C#. Today, we will only scratch the surface of that flexibility, but it should give you ideas about how to use javascript objects in your own web applications.]]>
</exerpt>
</post>
</category>
</tutorials>
Crafting the Interface
We will start off by building the interface. Our interface is going to be a little more complicated than usual. This is simply because we are working with a DataGrid inside a DataGrid. But first we are going to create the first DataGrid and the simple formalities.
Beginning with the standard mx:Application tag we add the main DataGrid and the supporting labels and text areas. The main DataGrid has two columns: one for the the category of the post and one for the posts in that category. The second column will have a custom item renderer which we will add later. The labels and text areas are for displaying the category description and post title, author, and excerpt. The following code has these basics.
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" height="500"
width="500" layout="absolute">
<mx:Panel title="Tutorials" width="100%" height="100%" layout="absolute">
<mx:DataGrid id="dgTutorials" width="100%" height="300">
<mx:columns>
<mx:DataGridColumn headerText="Category" width="75" />
<mx:DataGridColumn headerText="Posts" />
</mx:columns>
</mx:DataGrid>
<mx:Label x="10" y="308" width="117"/>
<mx:TextArea x="10" y="334" height="116" width="117"
wordWrap="true" editable="false"/>
<mx:VRule x="135" y="308" height="142"/>
<mx:Label x="145" y="308" width="239"/>
<mx:Label x="392" y="308" width="78"/>
<mx:TextArea x="145" y="334" width="325" height="116"
wordWrap="true" editable="false"/>
</mx:Panel>
</mx:Application>
Next, we will begin building the last remaining piece of the interface: the item renderer for our posts column. We start by creating a new mxml component. This component will extend mx.controls.Datagrid. The one property we set for our DataGrid is showHeaders which I set to false. We have a single column which will show the post name. Below we have the entire starting code for the component which I named PostGrid.
<mx:DataGrid xmlns:mx="http://www.adobe.com/2006/mxml" showHeaders="false">
<mx:columns>
<mx:DataGridColumn />
</mx:columns>
</mx:DataGrid>
Getting the Data
Now that we have all the basics in place we start grabbing the data from the server. This is going to be pretty simple. First we are going to add an HTTPService as the first tag inside our application. Inside the tag we will set the url, return type, and result function. We are going to use e4x for the return type which will allow us to use a nice syntax for retrieving the data, check out this link for extra info. The function will be created next. Below we have our new tag.
resultFormat="e4x" result="{receiveTutorialData(event)}" />
The function we are going to create is going to be named receiveTutorialData as seen above. This function will take a ResultEvent and is going to set a local variable event to the result from our HTTPService. To get this going though, we need to add a Script tag to the top of our application as the first child of the Application tag. Inside the script we create a bindable private variable named tutorials of type XML. The function is also created at this time, which simply takes the result from the service and sets our private variable equal to it.
<![CDATA[
import mx.rpc.events.ResultEvent;
[Bindable]
private var tutorials:XML;
private function recieveTutorialData(event:ResultEvent):void
{
tutorials = event.result as XML;
}
]]>
</mx:Script>
Now we just make the application send for the xml. We are going to this in the creationComplete event of the application. So we add the init function to our script and this simply tells our HTTP service to send. The new application tag and function are below.
width="500" layout="absolute" creationComplete="init()">
The init function:
{
tutorialData.send();
}
The final piece for this section is setting the data provider for our main DataGrid. We are going to set this to the categories of the tutorials, which is tutorials.category. This leaves us with the opening DataGrid tag below.
dataProvider="{tutorials.category}" >
Building the Model
So you're asking yourself, the model, what does he mean by the model? Well we are going to use a singleton to keep a global object that we will use to keep track of the current sub DataGrid selected item. I am going to glaze over the details of the class some because I could write a entire tutorial on singletons. In fact, I actually already have, but it was for C#. We create a new class named MainModel. Our class is really only going to have one public variable which is going to be PostSelected of type generic Object. I also always set the entire class to [Bindable] to make sure I can safely bind to any of the properties in the class. This gives us the file below.
{
[Bindable]
public class MainModel
{
private static const model:MainModel = new MainModel(ModelLock);
public static function GetInstance():MainModel
{
return MainModel.model;
}
public function MainModel(lock:Class)
{
if(lock != ModelLock)
{
throw new Error("Invalid MainModel access. Use MainModel.getInstance()");
}
}
public var PostSelected:Object;
}
}
class ModelLock {}
Now we can update the application to have a copy of the MainModel. We will simply add some code to our script tag for our application to have a private variable called model which will simply be equal to MainModel.GetInstance. We do the same for our PostGrid component, which we now add a Script tag to. Inside both scripts we add the following variable:
private var model:MainModel = MainModel.GetInstance();
Passing the Data
The next step is getting all the data into the correct places. The first thing we are going to do is set the data for our custom item renderer. We are going to do this by overloading the set data function in our renderer. If you need more info on this you can check out one of our other tutorials here. In the set data function we are going to set the value and also set the data provider for the renderer. We set the data provider equal to this.data.post which will be the list of posts from our XML. This function goes into our script tag.
{
super.data = value;
this.dataProvider = this.data.post;
}
In order to show this information we are going to use another cool technique called a label function. A label function is a function that returns a string which can use the data to combine or create the string which will be shown in the DataGrid column. We use the e4x syntax to return the title attribute as the string. Right below we have label function which is added to the script tag. To use this we add the labelFunction property to our DataGridColumn and set it equal to our function title. The updated column is below also.
{
return item.@title;
}
Also the column.
Next we are going to hook into the change event of the item renderer. The event handler will set the public variable in our model equal to the data in our selected row. The function and updated DataGrid tag (from the item renderer) are below.
showHeaders="false" change="{postSelectedChange(event)}">
The function:
{
this.model.PostSelected = event.itemRenderer.data;
}
Ok well to make the example a little more complete we are going to hook into the main DataGrid to listen for the change event. This is going to be setup in our item renderer. This is started by grabbing the initialized event in our item renderer and also we setup a private variable to keep a reference to the main application. I setup a function named init which starts off by setting the private variable to our parent document and then can we add an event listener to the main DataGrid. Below we first have the updated DataGrid tag for our item renderer and then second is the added actionscript to put inside the new script tag.
initialize="init()" change="{postSelectedChange(event)}">
Actionscript.
private function init():void
{
this.parentGrid = DataGridSquared(this.parentDocument).dgTutorials;
this.parentGrid.addEventListener(ListEvent.CHANGE, updateSelectedPost);
}
Finally to finish up the item renderer file we have to add the updateSelectedPost function from the latest script addition. This function does something that is pretty cool - it will check to see if the selected item in the main DataGrid is this item renderer's data. If this is true we will select the first post and set the model; else we will unselect everything in the item renderer. This function is below.
{
if(this.parentGrid.selectedItem == this.data && event.columnIndex == 0)
{
this.selectedIndex = 0;
this.model.PostSelected = this.data.post[0];
}
else
{
this.selectedItem = null;
}
}
That finishes up our item renderer. Below we have entire file, PostGrid.mxml.
<mx:DataGrid xmlns:mx="http://www.adobe.com/2006/mxml" showHeaders="false"
initialize="init()" change="{postSelectedChange(event)}">
<mx:Script>
<![CDATA[
import mx.controls.dataGridClasses.DataGridColumn;
import mx.events.ListEvent;
private var model:MainModel = MainModel.GetInstance();
private var parentGrid:DataGrid;
private function init():void
{
this.parentGrid = DataGridSquared(this.parentDocument).dgTutorials;
this.parentGrid.addEventListener(ListEvent.CHANGE, updateSelectedPost);
}
private function updateSelectedPost(event:ListEvent):void
{
if(this.parentGrid.selectedItem == this.data && event.columnIndex == 0)
{
this.selectedIndex = 0;
this.model.PostSelected = this.data.post[0];
}
else
{
this.selectedItem = null;
}
}
override public function set data(value:Object):void
{
super.data = value;
this.dataProvider = this.data.post;
}
private function getTitle(item:Object, column:DataGridColumn):String
{
return item.@title;
}
private function postSelectedChange(event:ListEvent):void
{
this.model.PostSelected = event.itemRenderer.data;
}
]]>
</mx:Script>
<mx:columns>
<mx:DataGridColumn labelFunction="getTitle" />
</mx:columns>
</mx:DataGrid>
Display all the Data
The final thing we are going to do is setup all the labels and text fields in our application. This is pretty simply done. We will just update the bound data. The updated components are below.
text="{dgTutorials.selectedItem.name + ' Tutorials'}"/>
<mx:TextArea x="10" y="334" height="116" width="117" wordWrap="true"
editable="false" text="{dgTutorials.selectedItem.description}"/>
<mx:VRule x="135" y="308" height="142"/>
<mx:Label x="145" y="308" width="239" text="{model.PostSelected.@title}"/>
<mx:Label x="392" y="308" width="78" text="{model.PostSelected.@author}"/>
<mx:TextArea x="145" y="334" width="325" height="116"
wordWrap="true" editable="false" htmlText="{model.PostSelected.exerpt}"/>
Entire Code
All that is left is to give you the entire code for the main application.
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" height="500"
width="500" layout="absolute" creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.rpc.events.ResultEvent;
[Bindable]
private var tutorials:XML;
[Bindable]
private var model:MainModel = MainModel.GetInstance();
private function init():void
{
tutorialData.send();
}
private function recieveTutorialData(event:ResultEvent):void
{
tutorials = event.result as XML;
}
]]>
</mx:Script>
<mx:HTTPService id="tutorialData" url="/files/tutorials.xml"
resultFormat="e4x" result="{recieveTutorialData(event)}" />
<mx:Panel title="Tutorials" width="100%" height="100%" layout="absolute">
<mx:DataGrid id="dgTutorials" width="100%" height="300"
dataProvider="{tutorials.category}" >
<mx:columns>
<mx:DataGridColumn headerText="Category" width="75" dataField="name"/>
<mx:DataGridColumn headerText="Posts" itemRenderer="PostGrid" />
</mx:columns>
</mx:DataGrid>
<mx:Label x="10" y="308" width="117"
text="{dgTutorials.selectedItem.name + ' Tutorials'}"/>
<mx:TextArea x="10" y="334" height="116" width="117" wordWrap="true"
editable="false" text="{dgTutorials.selectedItem.description}"/>
<mx:VRule x="135" y="308" height="142"/>
<mx:Label x="145" y="308" width="239" text="{model.PostSelected.@title}"/>
<mx:Label x="392" y="308" width="78" text="{model.PostSelected.@author}"/>
<mx:TextArea x="145" y="334" width="325" height="116" wordWrap="true"
editable="false" htmlText="{model.PostSelected.exerpt}"/>
</mx:Panel>
</mx:Application>
Well I am glad to have this one out the door, I have been typing this up now on and off for two weeks. Anyway I hope everyone finds something in this tutorial to help them out. Let us know if you have questions.
03/13/2008 - 11:59
Excellent !
In terms of rendering of "grouped" data (it's not exactly that but...), I prefer your component than the AdvancedDataGrid in which grouped data are repeated. Here the datagrid is more readable.
Thank you very much.
Just one improvement suggestion : the sort on titles should be done inside the category level instead of at the whole datagrid level. From my own point of view.
03/18/2008 - 13:34
Arnaud, good suggestions I agree about the titles. I believe that that the AdvancedDataGrid would be a nice component for showing the data. I have yet to spend a lot of time on using the AdvancedDataGrid but will start playing with it soon. Also the AdvancedDataGrid is a Flex 3 professional feature not in the standard SDK. Thanks for the thoughts.
08/27/2009 - 11:57
Hi Fatty
Any idea about using custom operations for summary row in advance datagrid
08/28/2009 - 09:16
No I haven't played around with advanced datagrid very much.
03/23/2008 - 20:01
Hi,
It is nice. Very useful. Thanks.
But, can we put canvas in the datagrid columns? Do you have any idea how to make it?
03/27/2008 - 14:52
Hello, it is very cool,
but i have a problem...
what is DataGridSquared( in the init function ???
thanks...
03/27/2008 - 15:16
William, that is casting the parentDocument as a DataGridSquared, our main class/component, and then we grab the main datagrid out of it. So this would be whatever you named your main application component/class.
04/10/2008 - 16:56
Could yuo send my that example, because don´t run
please
04/18/2008 - 00:33
Hey friend
I need help. I'm a callow in the world of programming. I'm coming from a background asp.net
and c#.net.
I have a task to create a flash file as per the client interactions on a flex application.
Its just simple, I have created a creater where user makes 3 canvas with different Bgcolor n some text.
i have to create a flash of this 3 canvas where they will run 1 at a time in some time line
that I have to do at the asp/c#.net end by using the swfio.net library.
My question is, How could I send the 3 canvas objects to the asp.net page.
I donno much bout XML too
Pls help as soon as possible!!
07/07/2008 - 08:30
Hi I have one question related to Advanced Datagrid i would like insert the textbox in the header of the grid for filtering the data as well without breaking the sorting feature of the grid.
I have developed the grid filtering in the datagrid header with textbox now data is filtering but the normal functionality of the datagrid has been broken like as sorting.Now sorting is not working.Please provide me any suitable example
Thanks in advance.......
07/30/2008 - 00:26
hi thanks for such a grt post...
i am working on rich grid using flex but unable to find out how to apply filtering on each column of the grid as in the text which we enter shud match and return only the values which match wih it .... i am using advancedDataGrid
09/09/2008 - 03:07
this seems to be a great example but I ve got an error on the casting of the parentDocument as a DataGridSquared.
I m a beginner as Flex and I need to make something similar with this example(And I can t use advanced data grid ....)
would it be possible to get the source?
Thanx a lot in advance!
09/09/2008 - 04:02
Actually no need for the source code!
It works fine(i mystook the main application file name!!!!oops)
This code is so helpful!
Thanx a lot!!!
12/03/2008 - 10:38
I am attempting to use the concept of this example for creating fields that span columns.
Is there an example in just actionscript? (mxml is not useful to me in working with dynamic data). I tried creating two datagrids and add them as columns to another datagrid, and use DataGrid as the itemrenderer class. No data is being displayed in the final datagrid. I set the dataprovider of the final datagrid to an arraycollection containing the two smaller datagrids. Your example relies too much on an xml structure. I just want to span a few select rows with out knowing what my data is going to be, or how I will get it.
03/25/2009 - 00:46
Hey This is Devi.I want some information about the datagrid and how to display the datagrid with background image..
04/30/2009 - 09:02
Hi
I have a question related to datagrid inside grid.
Actually i have requirment in tha if to keep 2 columns in table .In one column need to put machine name.in other for status.
Now if i click on machine name a it should expand to that row showing a table that has 6-7 rows .Again if i click on machine it sholud collapse table.At a time i shold be able to see more then one table for different machine in row.
can u give me sample code or link .I have started to craete GUI on flex recently .
It will be appreciated for ur help .
Thanks in advance.
05/04/2009 - 02:36
Awesome code, I have a question with it though, why are all the rows in PostGrid of the same number? Is there a way to adjust them accordingly (depending on the number of titles) each time that DataGrid is rendered? Thanks.
08/28/2009 - 09:15
Yeah sure I don't see why not. Just set the row count on the inner datagrid to what ever you like.
07/27/2009 - 08:30
Great code!! It's been really usefull for me!!
But I have the same question as abumelt. Is there any way to show a dinamic number of rows on each DataGrid depending on its content??
Thanks a lot!!
09/10/2009 - 03:27
How to merge the rows as you did here.
Like all the Posts are merged to specific Category like Flex, C#..
Is it possible to do it using Arraycollection as datasource for Datagrid.
Any suggestions pls.
Thanks
02/09/2010 - 07:18
Great example...This is what i want exactly...thanks for the code.. But when i run the same code it giving me the following error message..I am unable to run this So could you please fix the following error .
Thanks in advance.
TypeError: Error #1010: A term is undefined and has no properties.
at mx.controls.listClasses::ListBase/setSelectionDataLoop()[C:\autobuild\3.4.0\frameworks\projects\framework\src\mx\controls\listClasses\ListBase.as:6473]
at mx.controls.listClasses::ListBase/commitSelectedItems()[C:\autobuild\3.4.0\frameworks\projects\framework\src\mx\controls\listClasses\ListBase.as:6364]
at mx.controls.listClasses::ListBase/commitSelectedItem()[C:\autobuild\3.4.0\frameworks\projects\framework\src\mx\controls\listClasses\ListBase.as:6329]
at mx.controls.listClasses::ListBase/adjustSelectionSettings()[C:\autobuild\3.4.0\frameworks\projects\framework\src\mx\controls\listClasses\ListBase.as:4014]
at mx.controls.listClasses::ListBase/updateDisplayList()[C:\autobuild\3.4.0\frameworks\projects\framework\src\mx\controls\listClasses\ListBase.as:3748]
at mx.controls.dataGridClasses::DataGridBase/updateDisplayList()[C:\autobuild\3.4.0\frameworks\projects\framework\src\mx\controls\dataGridClasses\DataGridBase.as:581]
at mx.controls::DataGrid/updateDisplayList()[C:\autobuild\3.4.0\frameworks\projects\framework\src\mx\controls\DataGrid.as:1444]
at mx.controls.listClasses::ListBase/validateDisplayList()[C:\autobuild\3.4.0\frameworks\projects\framework\src\mx\controls\listClasses\ListBase.as:3348]
at mx.managers::LayoutManager/validateClient()[C:\autobuild\3.4.0\frameworks\projects\framework\src\mx\managers\LayoutManager.as:880]
at mx.core::UIComponent/validateNow()[C:\autobuild\3.4.0\frameworks\projects\framework\src\mx\core\UIComponent.as:5679]
at mx.controls.dataGridClasses::DataGridBase/updateRendererDisplayList()[C:\autobuild\3.4.0\frameworks\projects\framework\src\mx\controls\dataGridClasses\DataGridBase.as:1184]
at mx.controls.dataGridClasses::DataGridBase/drawItem()[C:\autobuild\3.4.0\frameworks\projects\framework\src\mx\controls\dataGridClasses\DataGridBase.as:1154]
at mx.controls.dataGridClasses::DataGridBase/drawVisibleItem()[C:\autobuild\3.4.0\frameworks\projects\framework\src\mx\controls\dataGridClasses\DataGridBase.as:1127]
at mx.controls.dataGridClasses::DataGridBase/makeRows()[C:\autobuild\3.4.0\frameworks\projects\framework\src\mx\controls\dataGridClasses\DataGridBase.as:708]
at mx.controls.dataGridClasses::DataGridBase/makeRowsAndColumns()[C:\autobuild\3.4.0\frameworks\projects\framework\src\mx\controls\dataGridClasses\DataGridBase.as:593]
at mx.controls::DataGrid/makeRowsAndColumns()[C:\autobuild\3.4.0\frameworks\projects\framework\src\mx\controls\DataGrid.as:1545]
at mx.controls.listClasses::ListBase/makeRowsAndColumnsWithExtraRows()[C:\autobuild\3.4.0\frameworks\projects\framework\src\mx\controls\listClasses\ListBase.as:1380]
at mx.controls.listClasses::ListBase/updateDisplayList()[C:\autobuild\3.4.0\frameworks\projects\framework\src\mx\controls\listClasses\ListBase.as:3726]
at mx.controls.dataGridClasses::DataGridBase/updateDisplayList()[C:\autobuild\3.4.0\frameworks\projects\framework\src\mx\controls\dataGridClasses\DataGridBase.as:581]
at mx.controls::DataGrid/updateDisplayList()[C:\autobuild\3.4.0\frameworks\projects\framework\src\mx\controls\DataGrid.as:1444]
at mx.controls.listClasses::ListBase/validateDisplayList()[C:\autobuild\3.4.0\frameworks\projects\framework\src\mx\controls\listClasses\ListBase.as:3348]
at mx.managers::LayoutManager/validateDisplayList()[C:\autobuild\3.4.0\frameworks\projects\framework\src\mx\managers\LayoutManager.as:622]
at mx.managers::LayoutManager/doPhasedInstantiation()[C:\autobuild\3.4.0\frameworks\projects\framework\src\mx\managers\LayoutManager.as:695]
at Function/http://adobe.com/AS3/2006/builtin::apply()
at mx.core::UIComponent/callLaterDispatcher2()[C:\autobuild\3.4.0\frameworks\projects\framework\src\mx\core\UIComponent.as:8733]
at mx.core::UIComponent/callLaterDispatcher()[C:\autobuild\3.4.0\frameworks\projects\framework\src\mx\core\UIComponent.as:8673]