@BindingParam issue

asked 2017-03-22 04:12:23 +0800

pafi gravatar image pafi
11 1

updated 2017-03-27 02:23:42 +0800

cor3000 gravatar image cor3000
5384 2 7
ZK Team

Hello everyone,

I'm trying to make a simple tree like the example in ZkDemo : "Getting Started > Tree"

Everything is going fine from here until I tried to add a button at the end of each line in the resultGrid line.

I just try to get the click event on the "add cart button" but no matter what I do, in the @Command method "addToCart", "article" is always null !...

My zul :

    <window apply="org.zkoss.bind.BindComposer"
        viewModel="@id('vm') @init('nc.noumea.mairie.appock.viewmodel.ListeCatalogueServiceViewModel')"
        border="none" hflex="1"
        vflex="1" contentStyle="overflow:auto">
    <vlayout vflex="1">
        <hbox hflex="1" vflex="1">
            <tree id="catalogueServiceTree" model="@bind(vm.catalogueTree)"
                  itemRenderer="@bind(vm.catalogueTreeitemRenderer)" width="400px" vflex="1">
                    <treecol label="Libellé"/>
                    <treecol label="Nombre" align="center" width="80px"/>
            <listbox id="resultCatalogueServiceTreeGrid" width="100%" vflex="1">
                <listhead menupopup="auto" sizable="true">
                    <listheader label="Photo" width="100px" align="center"/>
                    <listheader label="Référence" sort="auto(reference)" width="150px"/>
                    <listheader label="Libellé" sort="auto(libelle)" hflex="1"/>
                    <listheader label="Colisage" sort="auto(quantiteColisage)" width="80px"/>
                    <listheader label="" width="55px" align="center"/>
                <template name="model">
                            <image src="${each.photoSrc}"/>
                            <label value="${each.reference}"/>
                            <label value="${each.libelle}"/>
                            <label value="${each.libelleColisage}"/>
                            <button iconSclass="z-icon-cart-plus" onClick="@command('addToCart', article=each)"/>

And my View :

public class ListeCatalogueServiceViewModel extends AbstractListeViewModel<Catalogue> implements Serializable {
    private static final long                   serialVersionUID    = 1L;

    CatalogueService                            catalogueService;

    private TreeModel<CatalogueTreeNode>        catalogueTree;

    private TreeitemRenderer<CatalogueTreeNode> catalogueTreeitemRenderer;

    private Listbox                             resultGrid;

    public void afterCompose(@ContextParam(ContextType.VIEW) Component view) {
        Selectors.wireComponents(view, this, false);

    @Init(superclass = true)
    public void initTree() throws IOException {

        Catalogue catalogue = catalogueService.findActif();
        if (catalogue == null) {
            Messagebox.show("Il n'existe pas de catalogue actif à afficher", "Erreur", Messagebox.OK, Messagebox.ERROR);


    public TreeModel<CatalogueTreeNode> getCatalogueTree() {
        return catalogueTree;

    public void setCatalogueTree(TreeModel<CatalogueTreeNode> catalogueTree) {
        this.catalogueTree = catalogueTree;

    private void initCatalogueTreeModel(Catalogue catalogue) throws IOException {
        setCatalogueTree(new CatalogueTreeModel(getCatalogueTreeRoot(catalogue)));

    private CatalogueTreeNode getCatalogueTreeRoot(Catalogue catalogue) throws IOException {
        return catalogueService.getCatalogueTreeRoot(catalogue);

    public TreeitemRenderer<CatalogueTreeNode> getCatalogueTreeitemRenderer() {
        if (catalogueTreeitemRenderer == null) {
            catalogueTreeitemRenderer = new TreeitemRenderer<CatalogueTreeNode>() {
                public void render(Treeitem treeitem, CatalogueTreeNode catalogueTreeNode, int i) throws Exception {
                    Treerow dataRow = new Treerow();

                    Treecell treecellLabel = new Treecell(catalogueTreeNode.getLibelle());
                    dataRow.addEventListener(Events.ON_CLICK, new EventListener<Event>() {
                        public void onEvent(Event event) throws Exception {
                            CatalogueTreeNode selectedNodeValue = ((Treeitem) event.getTarget().getParent()).getValue();

                            if (selectedNodeValue.getTypeCatalogueNode() == TypeCatalogueNode.FAMILLE) {
                                resultGrid.setModel(new ListModelList<>(((SousFamille) selectedNodeValue.getEntity()).getListeArticle()));

                    Treecell treecellNombreArticle = new Treecell(String.valueOf(catalogueTreeNode.getNombreArticle()));

        return catalogueTreeitemRenderer;

    public void setCatalogueTreeitemRenderer(TreeitemRenderer<CatalogueTreeNode> catalogueTreeitemRenderer) {
        this.catalogueTreeitemRenderer = catalogueTreeitemRenderer;

    public void addToCart(@BindingParam("article") Article article) {
        if (article == null) {

I'm not new to ZK and I usually find what is wrong but here I'm stuck for hours looking on forum and so...:(

Thank you for your help !

delete flag offensive retag edit


as much as I"d like to help the problem is that your example is not runnable without the dependent classes. Can you please simplify the problem and post a runnable example on zkfiddle. I can then have a look and give advice more quickly. Robert

cor3000 ( 2017-03-27 02:29:20 +0800 )edit

1 Answer

Sort by » oldest newest most voted

answered 2017-03-27 02:37:59 +0800

cor3000 gravatar image cor3000
5384 2 7
ZK Team

updated 2017-03-27 02:41:44 +0800

out of my head I'd say you are mixing the mvvm and mvc patterns. When using mvc some mvvm mechanisms don't initialize and I assume that's why the each variable resolves to null when used in a dynamic command binding inside a listitem generated without any mvvm bindings.

Usually there should be a model="@init(vm.somemodel)" to initialize the model binding which I am missing here (I see you are setting this manually in your code... in the MVC way, not wrong - just not doing the extra bits).

If you can't switch to pure MVVM you can store the each variable in a custom-attribute at listitem scope and use this during the command binding.

            <template name="model">
                    <custom-attribute myarticle="${each}"/>
                        <button iconSclass="z-icon-cart-plus"
                                onClick="@command('addToCart', article=myarticle)"/>

As said just out-of-my-head ... if this doesn't help, please provide a running example on zkfiddle.

link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

1 follower



Asked: 2017-03-22 04:12:23 +0800

Seen: 37 times

Last updated: Mar 27 '17

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More