Flex tree control with array collection

Question

Ive been struggling with this for hours! i really need help

Im trying to populate a tree control with an external xml file brought in via arraycollection but i need to group the xml data to display in the tree

Okay my external xml file is called parts.xml and it looks like this:

<NewDataSet>
    <Parts>
        <PartGroup>51 Series</PartGroup>
        <PartType>20051</PartType>
        <PartNumber>20051-3</PartNumber>
        <PartDesc>Reusable Socket-51 SER</PartDesc>
        <PartImageFile />
    </Parts>
    <Parts>
        <PartGroup>51 Series</PartGroup>
        <PartType>20051</PartType>
        <PartNumber>20051-4</PartNumber>
        <PartDesc>Reusable Socket-51 SER</PartDesc>
        <PartImageFile />
    </Parts>
    <Parts>
        <PartGroup>51 Series</PartGroup>
        <PartType>20151</PartType>
        <PartNumber>20151-12-12</PartNumber>
        <PartDesc>Penis</PartDesc>
        <PartImageFile>20151-vi copy.jpg</PartImageFile>
    </Parts>
    <Parts>
        <PartGroup>90 Series</PartGroup>
        <PartType>090</PartType>
        <PartNumber>090-20B</PartNumber>
        <PartDesc>Replace Ferrule-90 SER</PartDesc>
        <PartImageFile>090 copy.jpg</PartImageFile>
    </Parts>
    <Parts>
        <PartGroup>90 Series</PartGroup>
        <PartType>090</PartType>
        <PartNumber>090-4B</PartNumber>
        <PartDesc>Replace Ferrule-90 SER</PartDesc>
        <PartImageFile>090 copy.jpg</PartImageFile>
    </Parts>
    <Parts>
        <PartGroup>90 Series</PartGroup>
        <PartType>20090</PartType>
        <PartNumber>20090-12</PartNumber>
        <PartDesc>Replacement Socket-FA</PartDesc>
        <PartImageFile>20090-vi copy.jpg</PartImageFile>
    </Parts>
    <Parts>
        <PartGroup>90 Series</PartGroup>
        <PartType>20090</PartType>
        <PartNumber>20090-12C</PartNumber>
        <PartDesc>Replacement Socket-FA, SS</PartDesc>
        <PartImageFile>20090-vi copy.jpg</PartImageFile>
    </Parts>
</NewDataSet>

This is only a sample (the actual xml is 7591 lines long)..

Next im using

<mx:HTTPService id="getPartsXml" url="assets/db/Parts_DB.xml" result="partsDB=getPFDXml.lastResult.NewDataSet.Parts"/>

to get the xml into flex. partsDB is an Array Collection that has been binded to a tree control.

what im having trouble with is getting the tree to display the data the way i need it without losing any of the the other data.

what i mean is, from the xml above i need the tree to display like this

+-51 series
|  +->20051
|  |  |->20051-3
|  |  |->20051-4
|  |
|  +->20151
|     |->20151-12-12
|
+-90 Series
   +->090
   |  |->090-20B
   |  |->090-4B
   |
   +->20090
      |->20090-12
      |->20090-12C

additionally what i intend is for the user to have huge tree of parts and they select a node at the partnumber level and drag an drop it on to a datagrid where all the other tags of the part gets displayed.

Ive tried and tried many things without any luck. even now im thinking maybe if i looped through the array-collection and created a new array just for the tree to get it to display the way i need it, then when the user dragged and drop a part onto the grid i would have code that would look for that part number in the original arraycollection and add it to a new array just for the datagrid... i still dont know how i would create that new array for the tree!! cause the xml data is grouped by partgroup and then grouped again by parttype before you get the individual part numbers :(

i hope this makes sense

Grigorash Vasilij · Answer 1 · 2012-04-09T12:32:41.937

You have 2 components. The first (tree) is not diplaying data properly:

Trees expect Hierarchial data. Your XML data is flat (but in an Array Collection). Group it with GroupingCollection2.
Or use the AdvancedDataGrid to simulate a tree control like this.

As concerns the datagrid, you're most likely to have it work with its own collection but fed with objects from your first component's collection:

double click/drag-n-drop from 1 to 2 causes an insert into 2's collection (with a check whether it's already there)
you'll need to include a way of removing from 2 probably as well, or you'll have a component that is always populated and never cleared.

Flex tree control with array collection

1 Answers1