Dynamically Populating two Lists

[tdesbarres]

Hi all. I have two lists the first one has a set of items. When the user clicks on a item I then want the applicaiton to do a hit out to retrieve data that can be used to populate the second list.

I am new to Laszlo so I am not quite sure how I am going to achieve this. I know that my back end will be a jsp page that will be looking for the id of the selected item in the first list. That jsp will return a list of items for the second list I am just not sure how I am going to get the second list populated with that data.

Any ideas?

thanks

[vernid]

hi,

It should be ok if you use two datasets, the first one for to retreive get from your back end the first list of items. Once you select an item on the first list (onselect event), populate the params for the second dataset and launch the request by calling doRequest() on it and then the second list will be populated with the feedback of your second request.

Of course, you have to set the datapath attribute of your two lists with the correct path in the xml returned by each jsp.

Regards
Dominique

[tdesbarres]

That sounds like a great idea. Thanks so much.

[vernid]

Hi,

It should be another possibility by receiving at once all the list from the backend. The solution should be something like, but I still have a problem to display the second list :(

You backend must return this kind of dataset.
<canvas>
<dataset name="dynamiclist">
<dynamiclist>
<firstlistitem name="item1">
<secondlistitem name="subitem11"/>
<secondlistitem name="subitem12"/>
<secondlistitem name="subitem13"/>
<secondlistitem name="subitem14"/>
</firstlistitem>
<firstlistitem name="item2">
<secondlistitem name="subitem21"/>
<secondlistitem name="subitem22"/>
</firstlistitem>
<firstlistitem name="item3">
<secondlistitem name="subitem31"/>
<secondlistitem name="subitem32"/>
<secondlistitem name="subitem33"/>
</firstlistitem>
</dynamiclist>
</dataset>
<list>
<textlistitem datapath="dynamiclist:/dynamiclist/firstlistitem" text="$path{'@name'}" onselected="sublist.updateSublist(this.datapath);">
</textlistitem>
</list>

<list height="50">
<textlistitem id="sublist" text="$path{'@name'}">
<datapath/>
<method name="updateSublist" args="dp">
this.datapath.setFromPointer(dp.xpathQuery('second listitem'));
Debug.write(dp);
Debug.write(dp.xpathQuery('secondlistitem'));
</method>
</textlistitem>
</list>
<simplelayout axis="x" spacing="10"/>
</canvas>

[eyegony]

How about this?


<list>
<textlistitem datapath="dynamiclist:/dynamiclist/firstlistitem" text="$path{'@name'}"
onselected="if (this.selected)
secondlist.updateSublist(this.datapath);">
</textlistitem>
</list>

<list id="secondlist" height="50">
<textlistitem name="sublist" text="$path{'@name'}"/>

<method name="updateSublist" args="dp">
var itemPath = dp.xpath;
var itemName = dp.getNodeAttribute('name');
var subitemPath = itemPath + "[@name = '" + itemName + "']/secondlistitem";
Debug.write(subitemPath);
this.sublist.setDatapath(subitemPath);
</method>
</list>

[eyegony]

An alternative:


<list id="list1">
<attribute name="selectedItemName" type="string" value=""/>
<textlistitem datapath="dynamiclist:/dynamiclist/firstlistitem" text="$path{'@name'}"/>
<handler name="onselect" args="selection">
this.setAttribute( 'selectedItemName', selection.datapath.getNodeAttribute('name') );
</handler>
</list>

<list id="list2" height="50">
<textlistitem datapath="${'dynamiclist:/dynamiclist/firstlistitem[@name=\''+list1.selectedItemName+'\']/secondlistitem'}"
text="$path{'@name'}"/>
</list>

[vernid]

Every day we learn something :)