ZK MVVM List Box Select All and Unselect all Records

I have a list box with multiple selection allowed and paging. Actually it means I have 'select all' checkbox in list box header, which allows me select all entries that shown on the current page.

Problem statement: I did not find a way how to catch events from 'select all' checkbox. Actually, I need select all entries (on all pages and not on displayed page!)  when 'select all' checked. And deselect all entries on all pages when 'select all' unchecked.
 
Since 6.5.5, The Select all checkbox on listheader now support onCheckSelectAll event that can determine whether it is checked or not.
ZK Reference

Note: Select all checkbox in list header is only available if ROD is false.

ZK Version : ZK 7.0.3
Project Name : zk7example4

Step 1:
Follow this post, to create ZK 7 Maven Project.

 

Step 2:
Create the Person Bean in the ZKExample4 Package

package ZKExample4;

public class Person {
	private String firstName;
	private String lastName;
	private String email;

	public Person(String firstName, String lastName, String email) {
		this.firstName = firstName;
		this.lastName = lastName;
		this.email = email;
	}

	public String getFirstName() {
		return firstName;
	}

	public void setFirstName(String firstName) {
		this.firstName = firstName;
	}

	public String getLastName() {
		return lastName;
	}

	public void setLastName(String lastName) {
		this.lastName = lastName;
	}

	public String getEmail() {
		return email;
	}

	public void setEmail(String email) {
		this.email = email;
	}

}

Step 3:
Create the Person ZUL Under the webapp folder as

<window title="Example for ZK MVVM List Box" width="500px"
	apply="org.zkoss.bind.BindComposer"
	viewModel="@id('vm') @init('ZKExample4.ViewModel.PersonVM')">
	<label value="You are using: ${desktop.webApp.version}" />
	<separator></separator>
	<listbox model="@load(vm.allPersons)" checkmark="true" mold="paging"
		pageSize="4" multiple="true"
		onCheckSelectAll="@command('onSelectAll')"
		selectedItems="@bind(vm.selectedPersons)">
		<listhead sizable="true">
			<listheader label="First Name" sortDirection="ascending"
				sort="auto(firstName)" />
			<listheader label="Last Name" sort="auto(lastName)" />
			<listheader label="Email" sort="auto(email)" />
		</listhead>
		<template name="model" var="p1">
			<listitem>
				<listcell label="@load(p1.firstName)" />
				<listcell label="@load(p1.lastName)" />
				<listcell label="@load(p1.email)" />
			</listitem>
		</template>
	</listbox>
	<label value="Total Selected" />
	<separator></separator>
	<label value="@load(vm.selectedPersons.size())" />
</window>

Step 4:
Now let us create the View Model for the above zul file as follows

package ZKExample4.ViewModel;

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

import org.zkoss.bind.BindUtils;
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.ContextParam;
import org.zkoss.bind.annotation.ContextType;
import org.zkoss.zk.ui.event.CheckEvent;

import ZKExample4.Person;

public class PersonVM {
	private List<Person> allPersons = new ArrayList<Person>();
	private List<Person> selectedPersons;


	public List<Person> getSelectedPersons() {
		return selectedPersons;
	}

	public void setSelectedPersons(List<Person> selectedPersons) {
		this.selectedPersons = selectedPersons;
	}

	public List<Person> getAllPersons() {
		return allPersons;
	}

	public void setAllPersons(List<Person> allPersons) {
		this.allPersons = allPersons;
	}

	public PersonVM()
	{
		 allPersons.add(new Person("John", "James", "JohnJames@yahoo.com"));
	     allPersons.add(new Person("Taylor", "Harris", "Harris@yahoo.com"));
	     allPersons.add(new Person("Allen", "Scott", "Scott@yahoo.com"));
	     allPersons.add(new Person("Minna", "Kristeen", "Kristeen@yahoo.com"));
	     allPersons.add(new Person("Abel", "Olive", "Olive@yahoo.com"));
	     allPersons.add(new Person("Kiley", "Renea", "Renea@yahoo.com"));
	     allPersons.add(new Person("Graciela", "Samira", "Samira@yahoo.com"));
	     allPersons.add(new Person("Cammy", "Jenelle", "Jenelle@yahoo.com"));
	     allPersons.add(new Person("Mattie", "Jerry", "Jerry@yahoo.com"));
	     allPersons.add(new Person("Meaghan", "Ozell", "Ozell@yahoo.com"));
	     allPersons.add(new Person("Gladys", "Whitley", "Whitley@yahoo.com"));
	     allPersons.add(new Person("Yuki", "Ligia", "Ligia@yahoo.com"));
	     allPersons.add(new Person("Chanel", "Erinn", "Erinn@yahoo.com"));
	     allPersons.add(new Person("Wilda", "Noah", "Noah@yahoo.com"));
	     allPersons.add(new Person("Rolland", "Gail", "Gail@yahoo.com"));
	     allPersons.add(new Person("Bok", "Mitzie", "Mitzie@yahoo.com"));
	}
	
	@Command
	public void onSelectAll(
			@ContextParam(ContextType.TRIGGER_EVENT) CheckEvent e) {
		this.selectedPersons = new ArrayList<Person>();
		if (e.isChecked())
			selectedPersons.addAll(allPersons);
		BindUtils.postNotifyChange(null, null, this, "selectedPersons");
	}
}

Here is the Complete Project Structure



Now you can select the person.zul file and run using tomcat. If you select the check box in the header, you can see that all the persons are selected not only in the current page



You can download the source here