Question

The onSelect event is present for the component only and I want to show/hide my comboboxes for selected checkboxes only.

Here is my 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')">
                    <treecols>
                        <treecol label="Name" align="center" />
                        <treecol label="Value" align="center" />
                        <treecol label="IP" align="center" />
                    </treecols>
                    <template name="model" var="node" status="s">
                        <treeitem checkable="@load(node.checkable)">
                            <treerow style="text-align:center;">
                                <treecell
                                    label="@bind(node.data.firstName)" style="text-align:left;">

                                </treecell>
                                <treecell style="text-align:center;">
                                    <combobox>
                                        <comboitem label="Fixed" />
                                        <comboitem label="System" />
                                        <comboitem label="Parameter" />
                                    </combobox>
                                </treecell>
                                <treecell style="text-align:center;">
                                    <combobox>
                                        <comboitem label="IP" />
                                    </combobox>
                                </treecell>
                            </treerow>

                        </treeitem>
                    </template>
                </tree>

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

snapshot of the issue
In the image I want to show the combo boxes only for the components which have checked checkboxes. There should not be any combobox shown for component without checkbox or unchecked checkbox. Thanks

Here is the mvvm file

public class TreeViewModel {


    private Request request;
    private AdvancedTreeModel treeModel;

    /**
     * @return the treeModel
     */
    public AdvancedTreeModel getTreeModel() {
        if(treeModel == null){
            TreeNode<Tree> treeNode = new TreeList(request).getRoot();
            treeModel = new AdvancedTreeModel(treeNode);
            treeModel.setMultiple(true);
        }
        return treeModel;
    }

    /**
     * @param treeModel the TreeModel to set
     */
    public void setTreeModel(AdvancedTreeModel treeModel) {
        this.treeModel = treeModel;
    }
    @Init
    public void init(){
        try {
            File file = new File("C:\\Users\\jatin1937\\Desktop\\XML files\\Request.xml");
            JAXBContext jaxbContext = JAXBContext.newInstance(Request.class);
            Unmarshaller jaxbUnmarshaller = jaxbContext.createUnmarshaller();
            request = (Request) jaxbUnmarshaller.unmarshal(file);
        }catch (JAXBException e) {
            e.printStackTrace();
        }
    }

    /**
     * @return the request
     */
    public Request getRequest() {
        return request;
    }

    /**
     * @param request the request to set
     */
    public void setRequest(Request request) {
        this.request = request;
    }
    @Command
    public void select(){
        System.out.println("onSelect method entered");
    }
}

Tree data is prepared through some helper classes but thats not important to describe here.

Answer 1

I also tried it and found a way out. Now, instead of using onSelect event on tree component I am using onClick event on treeRow component. I kept a field isChecked with my class which is referred by node.data in the zul file. According to the value of that boolean isChecked I show/hide the combobox.

Below 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)">
                    <template name="model" var="node" status="s">
                        <treeitem
                            checkable="@load(node.data.isCheckable)" open="true">
                            <treerow style="text-align:center;"
                                onClick="@command('select', treeNode = node.data)">
                                <treecell
                                    label="@bind(node.data.firstName)" style="text-align:left;">
                                </treecell>
                                <treecell style="text-align:center;"
                                    if="${node.data.isChecked == true}">
                                    <combobox>
                                        <comboitem label="Fixed" />
                                        <comboitem label="System" />
                                        <comboitem label="Parameter" />
                                    </combobox>
                                </treecell>
                                <treecell style="text-align:center;"
                                    if="${node.data.isChecked == true}">
                                    <combobox>
                                        <comboitem label="Fixed" />
                                        <comboitem label="System" />
                                        <comboitem label="Parameter" />
                                    </combobox>
                                </treecell>
                            </treerow>
                        </treeitem>
                    </template>
                </tree>

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

Here is the select method in ViewModel for reference

@NotifyChange("treeModel")
@Command
public void select(@BindingParam("treeNode") final Tree tree){
    if(tree.getIsCheckable()){
        if(tree.getIsChecked() == true){
            tree.setIsChecked(false);
        }else{
            tree.setIsChecked(true);
        }
    }

}

Please note that Tree is a custom class through which I prepare tree
data. isCheckable is also a boolean field in the Tree class. If
true then checkbox will appear in a treeRow else not.
isChecked is another Boolean field in Tree class. If true then
corresponding checkbox is checked else not