Friday, December 21, 2007

HierarchicalData from Flat XMLList data where nodes have parent info

This example shows how to make ADG display data in a Treeview or HierarchicalView when the source data is flat XMLList of nodes and each node has information about its parent node. Sample data is shown below:

<?xml version="1.0" encoding="utf-8"?>

<tasks>

<task id="1" name="Advanced Data Grid" type="parent" parentTask="0"/>

<task id="2" name="Collections" type="parent" parentTask="0"/>

<task id="3" name="OLAP" type="parent" parentTask="0"/>

<task id="4" name="Treeview" type="parent" parentTask="1"/>

<task id="5" name="Column grouping" type="parent" parentTask="1"/>

<task id="6" name="IHierarhcicalData, IGroupingCollection" type="child" parentTask="2"/>

<task id="7" name="Concrete classes" type="child" parentTask="2"/>

<task id="8" name="OLAP Interfaces" type="child" parentTask="3"/>

<task id="9" name="OLAP DataGrid" type="child" parentTask="3"/>

<task id="10" name="Charts" type="parent" parentTask="0"/>

<task id="11" name="Region selection" type="child" parentTask="10"/>

<task id="12" name="Drag drop support" type="child" parentTask="10"/>

<task id="13" name="Tree items display" type="child" parentTask="4"/>

<task id="14" name="Drag drop support" type="child" parentTask="4"/>

<task id="15" name="Column spec" type="child" parentTask="5"/>

<task id="16" name="Column drag drop" type="child" parentTask="5"/>

<task id="16" name="Column Ressize" type="child" parentTask="5"/>

</tasks>

Here each node has a parentTask attribute which specifies the parent task id. The top most nodes have parent task attribute set to zero. The nodes can be in any order.

We use the FlatXMLHD class which implements the IHierarchicalData interface to hide the XMLList parsing details. The result :

The source is available here.

4 comments:

Rahul Mainkar said...

Sreenivaas,
Nice blog and nice examples.. I think Flex 3 is far better that Flex 2. at this moment we have been using Flex 2 as 3 is in Beta, but kudos to you for a nice blog and examples.

Larry said...

This is great! Is there a way to enable drag and drop between the folders? I have tried various things but can't get that to work.

Larry

Sreenivas said...

If we set dragEnabled, dropEnabled and dragMoveEnabled to true on ADG we should be able to drag drop items between folders. But we also need to add a event listener to the drop event and adjust the parentTask attribute etc to cater for the drag-drop.

Larry said...

Do you have an example of that? I have tried but I cannot get it to work.