How to stop AdvancedDataGrid with HierarchicalData from moving child elements with multiple parents to different levels?

Question

I'm having a problem where my child element is moved together with itself in the chart where it has multiple parents at different levels. This is kind of odd and I think it might be intended functionality to illustrate that it's the same element but it looks off in my data grids and it sometimes detaches itself from the grid!

EDIT : I'm aware that this is because I'm using the same object but I want to use the same object in both locations so that when I click either one I'm getting the same dg.selectedItem. I'm looking for a way to prevent the in-tree movement from happening on both objects instead of one (IF POSSIBLE), not use different objects.

I've simplified it down to this code to illustrate the issue:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
               creationComplete="init()">

    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;

            [Bindable] var ac:ArrayCollection;

            public function init():void
            {
                ac = new ArrayCollection();
                var objWithMultipleParents:Object = {name:"Awkward family tree"};
                ac.addItem({
                    name:"Parent 1",
                    children:[
                        objWithMultipleParents,
                        {name:"Child of Parent 1"}  
                    ]
                });
                ac.addItem({
                    name:"Parent 2",
                    children:[
                        {name:"Child of Parent 2",children:[objWithMultipleParents]},
                        {name:"Child #2 of Parent 2"}
                    ]
                });
            }

        ]]>
    </fx:Script>

    <mx:AdvancedDataGrid id="dg" width="100%" height="100%">
        <mx:dataProvider>
            <mx:HierarchicalData source="{ac}" />
        </mx:dataProvider>
        <mx:columns>
            <mx:AdvancedDataGridColumn dataField="name" headerText="Groups"/>
        </mx:columns>
    </mx:AdvancedDataGrid>
</s:Application>

Before expanding child 1 of parent 2:

Before expanding Child 1 of Parent 2

After expanding child 1 of parent 2:

After expanding Child 1 of Parent 2

Is there a way to prevent this?

The expansion of "child of parent 2" folder. Notice at the red arrow that it scooted forward to match itself under the parent folder "child of parent 2". — buddyp450, Apr 17 '12 at 17:52
So let me get this straight. When you click on the parent node folder the child folder(s) scoot to the right a tad? — The_asMan, Apr 17 '12 at 18:20
Ok look at screenshot 1. All I've done from screenshot 1 to screenshot 2 is expand the Child of Parent 2 folder. Both "Awkward Family Tree" nodes scoot. My expected functionality was the "Awkward Family Tree" node under Child of Parent 2 to appear correctly (which it did) and the one under Parent 1 to stay put (which it did not). — buddyp450, Apr 17 '12 at 18:28
I think your problem occurs because the same node appears in the tree more than once. As a test, create a different object that has the same data. It's likely that this element is getting "formatted" twice, and as such it "scoots" over to the right when you make the tree render it the 2nd time. Just a hunch... — Sunil D., Apr 17 '12 at 18:50
@SunilD. it's come to my intention that I seem to have left off that it's important to me to still have a reference at either click-point to the same object. I've since updated the question. Thanks. — buddyp450, Apr 17 '12 at 19:25

Sam DeHaan · Accepted Answer · 2012-04-17T19:42:10.377

The answer is no. You can't display the same item in multiple places like you want. You're going to run into little UI quirks like the one you've stated above. You can, however, show flat copies of the item, and then access the item using some form of unique identifier.

//store item reference in accessible object
obj = new Object();
obj[itemRef.uid] = itemRef;

//copy enough information to display and re-access correctly
copy1.name = itemRef.name;
copy1.uid = itemRef.uid;
parent1.add(copy1);

copy2.name = itemRef.name;
copy2.uid = itemRef.uid;
parent2.add(copy2);

//on item selection, access it through uid
itemRef = obj[dg.selectedItem.uid];

If you don't have any kind of UID, and don't want to create one, you could also use the flat copies as item keys.

//make copies
copy1.name = itemRef.name;
copy2.name = itemRef.name;
parent1.add(copy1);
parent2.add(copy2);

//map references
obj[copy1] = itemRef;
obj[copy2] = itemRef;

//re-access
itemRef = obj[dg.selectedItem];

This is exactly what I wound up doing. Thanks. – buddyp450 Apr 17 '12 at 20:05 — buddyp450, Apr 17 '12 at 20:05

score 1 · Answer 2 · answered May 29 '18 at 13:43

Any node in a tree may only appear once in the tree. Period. The reference (obnject ID) of a node identifies the place where it is in the tree. Adding it multiple times will break all mechanisms that need to know where in a tree a node is. Only the opposite way will work (knowing which node is at a certain position). One of the side-effect is the wrong indentation. When a child of a node is shown, the required indentation is calculated and applied to its appearance - at all occurrences in the tree, no matter whether they are on a totally different indent level.

If you need to present the same data at various places, make your tree nodes just wrappers to an object that holds the data. The tree ndoes are independent objects but fetch their name, icon, tooltip, whoatever from an object they reference. And this 'data object' can be referenced by any number of tree nodes. Even when needing to know which data was clicked, you can take the reference to the tree node from the message and fetch from it the reference to the data object for further processing.

score 0 · Answer 3 · answered Apr 17 '12 at 19:03

Ok so here is your problem.

var objWithMultipleParents:Object = {name:"Problem"};

You are creating one object and using in multiple spots.
In AS3 objects are passed by reference.
With that being said if you change the object in one element you are changing it in "all" of them.
Notice in my sample I use a function to create a new object instead of referencing the same one over and over.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    minWidth="955" minHeight="600"
               creationComplete="init()">
<mx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;

        [Bindable]
        public var ac:ArrayCollection;

        public function init():void
        {
            ac = new ArrayCollection();
            var objWithMultipleParents:Object = createObject( );
            ac.addItem({
                name:"Parent 1",
                children:[
                    objWithMultipleParents,
                    {name:"Child of Parent 1"}  
                ]
            });
            ac.addItem({
                name:"Parent 2",
                children:[
                    {name:"Child of Parent 2",children:[createObject( )]},
                    {name:"Child #2 of Parent 2"}
                ]
            });
        }
        public function createObject( ):Object{
            return {name:"Problem"}
        }

    ]]>
</mx:Script>

<mx:AdvancedDataGrid id="dg" width="100%" height="100%">
    <mx:dataProvider>
        <mx:HierarchicalData source="{ac}" />
    </mx:dataProvider>
    <mx:columns>
        <mx:AdvancedDataGridColumn dataField="name" headerText="Groups"/>
    </mx:columns>
</mx:AdvancedDataGrid>

Also you might want to look into HierarchicalData

Wasn't really my goal to create new objects. I'm aware that that is the problem though. Edited my original question to reflect this. — buddyp450, Apr 17 '12 at 19:24

How to stop AdvancedDataGrid with HierarchicalData from moving child elements with multiple parents to different levels?

3 Answers3