notify change of grid/list/tree inside a grid/list

Question

I saw multiple questions of people who wants to update a part of a grid/list/tree with mvvm but they didn't wanted to refresh the whole list.

For all the people who has this problem I made the following example.

Hope this can be use for you.

Answer 1

This is a simpel example. The most important of the whole code is this :

BindUtils.postNotifyChange(null, null, person, "childs");

First simple pojo class :

package be.chillworld;

import java.util.ArrayList;
import java.util.List;

/**
 *
 * @author chillworld
 */
public class Person {
    private int id;
    private String naam;
    private List<Person> childs = new ArrayList<Person>();

    public Person(int id) {
        this.id = id;
        naam = "test " + id;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public void setNaam(String naam) {
        this.naam = naam;
    }

    public String getNaam() {
        System.out.println("asked getter (naam) of "+ id);
        return naam;
    }

    public List<Person> getChilds() {
        System.out.println("asked getter (childs) of "+ id);
        return childs;
    }

    public void setChilds(List<Person> childs) {
        this.childs = childs;
    }

    public boolean addChild(Person person) {
        return childs.add(person);
    }

    @Override
    public String toString() {
        return "Person{" + "id=" + id + ", name=" + getNaam() + '}';
    }
}

then the IndexVM:

package be.chillworld;

import java.util.ArrayList;
import java.util.List;
import org.zkoss.bind.BindUtils;
import org.zkoss.bind.annotation.BindingParam;
import org.zkoss.bind.annotation.Command;

/**
 *
 * @author chillworld
 */
public class IndexVm {

    private List<Person> persons;
    int i;

    public IndexVm() {
        System.out.println("starting creating list");
        persons = new ArrayList<Person>();
        for (i = 0; i < 100; i++) {
            Person person = new Person(i);
            person.addChild(new Person(++i));
            persons.add(person);
        }
        System.out.println("ending creating list");

    }

    public List<Person> getPersons() {
        return persons;
    }

    public void setPersons(List<Person> persons) {
        this.persons = persons;
    }

    @Command
    public void showIndex(@BindingParam("person") Person person) {
        System.out.println("changed name");
        person.setNaam("Chillworld");
        BindUtils.postNotifyChange(null, null, person, "naam");
    }

    @Command
    public void addChild(@BindingParam("person") Person person) {
        System.out.println("add child");
        Person child = new Person(++i);
        child.setNaam("new child");
        person.addChild(child);
        BindUtils.postNotifyChange(null, null, person, "childs");
    }
}

and at last the index.zul :

<?xml version="1.0" encoding="UTF-8"?>
<zk xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://www.zkoss.org/2005/zul"
xsi:schemaLocation="http://www.zkoss.org/2005/zul
                   http://www.zkoss.org/2005/zul/zul.xsd">
<window border="normal" closable="false"
        apply="org.zkoss.bind.BindComposer"
        viewModel="@id('vm') @init('be.chillworld.IndexVm')">
    <grid width="1000px" model="@load(vm.persons)">        
        <columns>            
            <column label="naam" /> 
            <column label="add child" />            
            <column label="childs" />        
        </columns>        
        <template name="model" >            
            <row>                
                <textbox value="@bind(each.naam)" /> 
                <button onClick="@command('addChild',person = each)" label="add child"/>                       
                <grid width="400px" model="@load(each.childs)">        
                    <columns>            
                        <column label="naam" />            
                        <column label="button" />        
                    </columns>        
                    <template name="model" var="item">            
                        <row>                
                            <textbox value="@bind(item.naam)" /> 
                            <button onClick="@command('showIndex',person = item)" label="change value"/>        
                        </row>        
                    </template>    
                </grid>           
            </row>        
        </template>    
    </grid>
</window>
</zk>