I want to use the onSelect event of a ZK tree which is rendered through MVVM

Question

Here is the zul file for reference

<?page title="MVVM Tree POC"?>
<zk>
    <borderlayout height="800px">
        <west size="25%"></west>
        <center>
            <window apply="org.zkoss.bind.BindComposer"
                viewModel="@id('vm') @init('com.nagarro.viewmodel.TreeViewModel')"
                title="Dynamic Tree" border="normal">
                <tree checkmark="true" model="@bind(vm.treeModel)"
                    onSelect="@command('select')" >
                    <template name="model" var="node" status="s">
                        <treeitem checkable="@load(node.checkable)"
                            open="true">
                            <treerow style="text-align:center;">
                                <treecell
                                    label="@bind(node.data.firstName)" style="text-align:left;">
                                </treecell>
                            </treerow>
                        </treeitem>
                    </template>
                </tree>

            </window>
        </center>
    </borderlayout>
</zk>

There is a "onSelect" event in the tree tag and there are checkboxes for some treeItems only. Now, I want to create certain components like a combobox for the corresponding tree row when its checkbox is selected. I am trying to do it with the onSelect event of the tree but the problem is I need to pass the reference of the selected checkbox which I am unable to pass as the onSelect event is kept outside the scope of the template through which treeItems are getting rendered. Is there any other way out to do what I want

This is the page which I get through the above zul file.

I want to know which checkbox is selected ?

score 3 · Answer 1 · answered Feb 13 '13 at 11:38

You can pass any parameter on every event like that (from ZK docs):

<button label="Delete" onClick="@command('delete', item=item)"/>

and use this parameter in your java code:

@Command
public void delete(@BindingParam("item") Item item ) {
    //do some stuff based on what item you've picked
}

In your case I would move onSelect-Event from Tree-Component to Treeitem, like this:

<tree checkmark="true" model="@bind(vm.treeModel)">
                        <template name="model" var="node" status="s">
                            <treeitem checkable="@load(node.checkable)"
                                open="true" onSelect="@command('select', nameParameter=node.data.firstName">
                                <treerow style="text-align:center;">
                                    <treecell
                                        label="@bind(node.data.firstName)" style="text-align:left;">
                                    </treecell>
                                </treerow>
                            </treeitem>
                        </template>
                    </tree>

and use parameter in your @Command-method:

@Command
public void select(@BindingParam("nameParameter") String nameParameter ) {
    System.out.println(nameParameter + " selected");
}

See ZK MVVM > Advance > Parameter Docs for more information

I have completed it by adding the onSelect event to the `treeRow` component. Thanks anyway. — Jatin Sehgal, Feb 13 '13 at 16:05

score 0 · Answer 2 · answered Jan 31 '13 at 12:48

This is an issue I often run into. My solution has always been to attach data to the component itself; keep a database entity's id or an object itself on the checkbox for retrieval during the event.

checkbox.setAttribute("myAttributeName", myAttributeValue);

This requires a cast to retrieve, which is unfortunate, but with some best practices you can do so confidently.

I want to use the onSelect event of a ZK tree which is rendered through MVVM

2 Answers2