Monday, January 28, 2008

Using AdvancedDataGrid as a tree control with sorting

The AdvancedDataGrid control can be configured and used as a simple Tree control with sorting support (which is not available in the Tree control).

The following example shows how.

When hierarchical XML (or Object based) data is fed into a HierachicalData (which implements IHierachicalData) and set as dataProvider to ADG it internally converts it into a HierarchicalCollectionView (implementing IHierarchicalCollectionView). The good news is that HierarchicalCollectionView provides the sort and filtering APIs which can be used to sort and filter the data very similar to flat data.

Click on the "Simple sort" button to see how the data gets sorted recursively. It doesn't do a good job as it mixes up parent and leaf items. If you are one those who expects everything according to the alphabetical order you may like it !

Click on the "Custom sort" button to see how the sorting can be customized to show the parent items at the top and leaf items at the bottom. The custom sort function uses the IHierarchicalData.canHaveChildren API to move the parent items up the ladder.

"Remove sort" does the obvious.

The source and data used for example.

20 comments:

Campbell said...

it took me so long to find the treeColumn property on the AdvancedDataGrid. I realize its a commercial offering from Adobe but not having access to the source leaves me guessing what I am overriding when I extend it. There are all sorts of cool things you can do with the ADG and the DataViews but It takes alot of digging to get your head around whats going on.

pluba said...

Hello!
In this short example I found exactly what I was looking for :-)
Thanks a lot and good job :-)

Sreenivas said...

1.treeColumn property was added late in the cycle as we found that users want to customize the tree column position.

2. If you buy the FB Pro version ADG source would be available to you very similar to charts source which used to get unzipped into the source directory when valid license key is entered.

Campbell said...

Wicked im just waiting for release and Im there mate :)

Ozzy OG Kush said...

Thanks, this really helped me out. Flex is great but the designers chose some odd ways of doing stuff, and omitted some useful functions that are pretty standard for other types of data display.

seo expert said...

nice post


web design company, web designer,
web design India,website design,web design

Mr.Trickster said...

Dear Mr. Sreenivas, thank you for your work and for this blog.

Please, would you give me some advice how to (if possible) set EventListeners directly to those Tree icons (defaultLeafIcon, folderClosedIcon, folderOpenIcon, disclosureClosedIcon and disclosureOpenIcon)?

I'm still trying to found this information in web and in Adobe help, but results doesn't seems to be helpful at the moment.

Thank you very much again.

Sreenivas said...

The icons are created and used by the itemRenderers like ADGItemRenderer and ADGGroupItemRenderer. So you have to derive from these itemRenderers and add event handlers there OR create new itemRenderers by copying code and do the needful.

Mr.Trickster said...

Thank you for you attention, now everything works just fine. Flex rocks!

suparna said...
This comment has been removed by the author.
suparna said...

Very informative article, thank you very much for sharing this article with us. Web Design  |   Web Designer

jc said...

Thanks for this example. I notice in your code that you are building and refreshing the sort on the button clicks. If I perform those operations immediately after setting the dataProvider, things don't work. Is there an event I need to listen for that tells me the dataProvider is ready to be sorted and refreshed?

Sreenivas said...

One can use validateNow to force immediate validation of the dataProvider and do these operations.

Shopping Cart said...

Flex is a new tool which extends your website by embedding some stunning objects into your page. In Flex now you can use data grid as a hierarchical tree for your menus. It really makes a complex task very easy for everyone.

Shopping Cart

Savio Sebastian said...

Thank you for this post - helped me get my Advanced Datagrid up and running... I had a lot of issues with it though - I missed one crucial line which robbed me a couple of hours of sleep!

I had missed setting the result Format in the HttpService:




Thanks again!

the said...

Top website designing company in India, Nashik provding world class website design and solutions.
Nashik Website Designing, Nasik Webpage Design, Nashik Website Design, Nashik website company, SEO Company Nashik, Nashik Website Development Services

Melinda said...

I need detailed information about how to use google analytics due the lot of problems i have with it.

Melinda Robinson

knee anatomy

Girish said...

The AdvancedDataGrid seems to have a serious performance problems, we are using the grid with hierarchy and summary (sum, avg etc.). and managed dataset with Adobe LCDS.

The whole screen freezes when we get updates and have to recompute the SUMs and show the inline highlighting. have around 2000 rows with 4 levels of hierarchy (have SUM and AVG at each level)

Fakhruddin40 said...

It's available in Tree control?

Plastic Card

criticpapa said...

whoa!!!, you had a passion in blogging, thumbs up for your work of love.. Hehe very inspiring ideas,


anyway I'm william
mind if I put a link back to you?


(clickable) ------> Mens Suits