Description & Source Code

The Auto Paging feature determines the page size based on the dynamic height of the Grid component; ridding developers the need to specify the page size for the Grid. This feature is also built-in in the Listbox component.

<panel id="container" height="400px" apply="demo.grid.auto_paging.AutoPagingController">
		<grid id="demoGrid" mold="paging" pagingPosition="both"
			model = "${$composer.allPurchases}"
			autopaging="true" vflex="true">
				<column width="80px" label="Order #" align="left" />
				<column label="Item Purchased" align="center" />
				<column label="Purchased Time" align="center" />
				<column width="80px" label="Paid" align="center" />
			<template name="model">
					<label value="${}" />
					<label value="${each.item}" />
					<timebox value="${each.time}" 
						disabled="true" cols="12" format="a hh:mm:ss" mold="rounded" />
					<checkbox checked="${each.paid}" disabled="true"/>
		void changeHeight(String height){
			container.height = height;
		void changeMold(String mold){
			demoGrid.pagingChild.mold = mold;
		<radiogroup onCheck="changeHeight(self.selectedItem.label)">
			<label value="Select Container's Height"/>
			<radio label="200px" />
			<radio label="300px" />
			<radio label="400px" checked="true" />
			<radio label="500px" />
			<radio label="600px" />
	<separator height="10px"/>
	<radiogroup onCheck="changeMold(self.selectedItem.label)">
			<label value="Select a Mold for the Paging:"/>
			<radio label="default" checked="true" />
			<radio label="os" />
package demo.grid.auto_paging;

import org.zkoss.zk.ui.Component;
import org.zkoss.zul.ListModelList;


public class AutoPagingController extends SelectorComposer<Component>{
	private static final long serialVersionUID = 1L;
	private PurchaseData data = new PurchaseData();
	private ListModelList<String> availableItems;
	public AutoPagingController(){
		availableItems = new ListModelList<String>(data.getAvailableItems());
	public ListModelList<Purchase> getAllPurchases() {
		return new ListModelList<Purchase>(data.getAllPurchases());
	public ListModelList<String> getAvailableItems() {
		return availableItems;

import java.util.ArrayList;
import java.util.Date;
import java.util.List;
import java.util.Random;

public class PurchaseData {
	private final List<String> availableItems = new ArrayList<String>();
	private List<Purchase> allPurchases = new ArrayList<Purchase>();
	private int TOTAL_PURCHASES = 25;
	private Random randomGenerator = new Random();
	public PurchaseData() {
	public List<Purchase> getAllPurchases() {
		return this.allPurchases;
	public List<String> getAvailableItems() {
		return availableItems;
	private void generatePurchases() {
		for(int i=0; i<TOTAL_PURCHASES; i++) {
			int id = (i + 101);
			String purchasedItem = availableItems.get(randomGenerator.nextInt(availableItems.size()));
			Date randomDate = new Date(Math.abs(System.currentTimeMillis() - randomGenerator.nextInt(1000000)));
			boolean paid = randomGenerator.nextBoolean();
			allPurchases.add(new Purchase(id, purchasedItem, randomDate, paid));

import java.util.Date;

public class Purchase {
	private int id;
	private String item;
	private Date time;
	private boolean paid;
	public Purchase(int orderId, String orderItem, Date purchaseTime, boolean paid) { = orderId;
		this.item = orderItem;
		this.time = purchaseTime;
		this.paid = paid;

	public int getId() {
		return id;

	public void setId(int orderId) { = orderId;

	public String getItem() {
		return item;

	public void setItem(String orderedItem) {
		this.item = orderedItem;

	public Date getTime() {
		return time;

	public void setTime(Date purchaseTime) {
		this.time = purchaseTime;

	public boolean isPaid() {
		return paid;

	public void setPaid(boolean paid) {
		this.paid = paid;