Second Tree Depending on First Tree Selection

[Aady]

I am working on a design that involes two views.

Each view needs to display data in tree format. The data is fetched from two different xml files, one for each tree.

When the application loads, only the first view should be visible showing the first tree. The second view must be empty/invisible.

When the user clicks on a node of the first tree, then only second tree should be displayed in the second view. The data represented by second tree is dependant on the value of the node on the first tree, clicked by the user.

Each time the user selects a node in the first view, the second tree must get refreshed and a tree with new data should be drawn, satisfying the user selection in the first tree.


In the following example, I have used two data files.

1. FirstTree - contains the names of a number animals and birds.

2. SecondTree - contains the name of favorite food of those animals and birds.

If I click "Elephant" in the first tree, Second Tree data must be read from the "Foods" file, and a tree with two nodes "Coconut" and "Cake" must be displayed in the second view.






FirstTree.xml

<zoo>
<Group name="Animals" isopen="true">
<species name="Tiger" isleaf="true" />
<species name="Cow" isleaf="true" />
<species name="Rabbit" isleaf="true" />
<species name="Elephant" isleaf="true" />
</Group>
<Group name="Birds" isopen="true">
<species name="Parrot" isleaf="true" />
<species name="Peacock" isleaf="true" />
<species name="Cocoo" isleaf="true" />
</Group>
</zoo>

SecondTree.xml

<Foods>
<food name="Carrot" isleaf="true" selectionName="Tiger"/>
<food name="Cabbage" isleaf="true" selectionName="Cow"/>
<food name="Deer" isleaf="true" selectionName="Rabbit"/>
<food name="Coconut" isleaf="true" selectionName="Elephant" />
<food name="Cauliflower" isleaf="true" selectionName="Parrot" />
<food name="Potato" isleaf="true" selectionName="Peacock" />
<food name="Tomato" isleaf="true" selectionName="Cocoo" />
<food name="Pizza" isleaf="true" selectionName="Tiger" />
<food name="Noodles" isleaf="true" selectionName="Cow" />
<food name="Rice" isleaf="true" selectionName="Rabbit" />
<food name="Cake" isleaf="true" selectionName="Elephant" />
<food name="Chocolate" isleaf="true" selectionName="Parrot" />
<food name="Nuts" isleaf="true" selectionName="Peacock" />

</Foods>



I plan to use XPath expression to achieve this. I have not succeeded in completing this.


If I use the following code with XPath expression, with hard-coded value "Elephant", the second tree will show the right data:



<dataset name="dset_zoo" src="/FirstTree.xml"/>
<dataset name="dset_food" src="/SecondTree.xml"/>

<view y="80" width="200" height="200" >
<tree datapath="dset_food:/" icon="null" showroot="false">
<tree id="ctree2" datapath="Foods[@selectionName='Elephant']" icon="null" text="$path{'@name'}" isleaf="$path{'@isleaf'}"/> </tree>
</view>



How can I make it dynamic ?

The first tree selection could be captured through "onactivate" method of the tree



<method event="onactivate">
if (this.isleaf) {
var selectedSpecies = this.datapath.xpathQuery('@name');
if (selectedSpecies!= null) {
Debug.write('Selection: ' + selectedSpecies);
}
}
</method>



How can I pass this selection as a variable to the second tree Expression, before the second tree is being loaded?

Any help is appreciated.

[senshi]

Dynamic data and the standard tree-component aren't best friends. You could consider the usage of opttree (in the incubator-folder, but it isn't that well documented; if you search in the forum you can find also two other opttree-versions...)

Here is a workaround using the standard tree-component:

<canvas>

<dataset name="dset_zoo" src="First.xml"/>
<dataset name="dset_food" src="Second.xml"/>

<class name="foodtreeclass" extends="tree" datapath="dset_food:/Foods" icon="null" showroot="false" >
<attribute name="species" type="string" />
<tree datapath="${'food[@selectionName=\'' + this.parent.species + '\']'}"
text="$path{'@name'}" icon="null" isleaf="true" />
</class>

<view y="0" width="200" height="200" >
<tree datapath="dset_zoo:/zoo/" icon="null" showroot="false" >

<tree datapath="*" icon="null" text="$path{'@name'}"
isleaf="${this.datapath.xpathQuery('@isleaf') == 'true'}"
open="${this.datapath.xpathQuery('@isopen') == 'true'}" >
<handler name="onselect" >
if (this.selected &amp;&amp; this.isleaf){
var selectedSpecies = this.datapath.xpathQuery('@name');
if (selectedSpecies != null) {
if (foodView["foodTree"] != null)
foodView.foodTree.destroy();
new foodtreeclass( foodView, {name:"foodTree", species:selectedSpecies} );
}
}
</handler>
</tree>

</tree>
</view>

<view id="foodView" y="250" width="200" height="200" />

</canvas>

[Aady]

Thanks for the idea and code help.

It works fine.

Regards