Theme:
Description & Source Code

With the load on demand feature, data in grid is not loaded until the requested data is needed in view. The grouping of grid data is achieved using org.zkoss.zul.SimpleGroupsModel, which supports the load on demand feature.

This feature requires ZK EE.
<zk>
	<div apply="demo.grid.load_on_demand.LoadOnDemandController">
		<grid id="lb1" height="400px"
			model="${$composer.mailData}">
			<columns>
				<column label="From" width="100px" />
				<column label="Subject" />
				<column label="Received" width="150px" />
				<column label="Size" width="100px" />
			</columns>
			<template name="model:group">
				<group label="${each}" />
			</template>
			<template name="model">
				<row>
					<div>
						<image style="padding: 0px 10px"
							src="/img/Centigrade-Widget-Icons/EnvelopeOpen-16x16.png" />
						<label value="${each.index}" />
					</div>
					<label value="${each.subject}" />
					<label value="${each.date}" />
					<label value="${each.size}" />
				</row>
			</template>
		</grid>
	</div>
</zk>
package demo.grid.load_on_demand;

import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zul.GroupsModel;
import org.zkoss.zul.SimpleGroupsModel;

import demo.data.Mail;
import demo.data.MailModel;

public class LoadOnDemandController extends SelectorComposer<Component> {

	/**
	 * 
	 */
	private static final long serialVersionUID = 6578363730535048992L;
	
	final GroupsModel<Mail, Object, Object> groupsModel = new SimpleGroupsModel<Mail, String, Object, Object>(MailModel.AllData, MailModel.headers);

	public GroupsModel<Mail, Object, Object> getMailData() {
		return groupsModel;
	}
	
	
}
package demo.data;

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

public class MailModel {
	
	public static final List<Mail> today = new ArrayList<Mail>() {
		/**
		 * 
		 */
		private static final long serialVersionUID = 1L;

		{
			add(new Mail(1, "[zk1 - Help] RE: Bandbox Autocomplete Problem", "2012/11/18 10:16:27", 16));
			add(new Mail(2, "[zk1 - Help] RE: Bandbox Autocomplete Problem", "2012/11/18 10:14:27", 18));
			add(new Mail(3, "[zk1 - Help] RE: Databinding with radiogroups", "2012/11/18 09:47:27", 12));
			add(new Mail(4, "[zk1 - Help] RE: It's not possible to navigate a listbox' ite", "2012/11/18 09:35:27", 12));
			add(new Mail(5, "[zk1 - Help] RE: ZK problem in dynamic menu", "2012/11/18 08:37:27", 12));
			add(new Mail(6, "[zk1 - Help] RE: FileUpload", "2012/11/18 08:27:57", 14));
			add(new Mail(7, "[zk1 - Help] RE: Datebox format", "2012/11/18 06:27:31", 11));
			add(new Mail(8, "[zk1 - Help] RE: Datebox format", "2012/11/18 06:17:22", 12));
			add(new Mail(9, "[zk1 - Help] FileUpload", "2012/11/18 05:07:25", 11));
			add(new Mail(10, "[zk1 - Help] FileUpload", "2012/11/18 05:07:25", 11));
			add(new Mail(11, "[zk1 - Help] FileUpload", "2012/11/18 05:07:25", 11));
			add(new Mail(12, "[zk1 - General] RE: Opening more than one new	browser window", "2012/11/18 04:44:17", 12));
			add(new Mail(13, "[zk1 - General] RE: Opening more than one new	browser window", "2012/11/18 04:44:17", 12));
			add(new Mail(14, "[zk1 - General] RE: Opening more than one new	browser window", "2012/11/18 04:44:17", 12));
			add(new Mail(15, "[zk1 - General] RE: Opening more than one new	browser window", "2012/11/18 04:44:17", 12));
			add(new Mail(16, "[zk1 - Help] RE: SelectedItemConverter Question", "2012/11/18 04:31:12", 14));
			add(new Mail(17, "Where is the demo?", "2012/11/18 04:31:12", 14));
			add(new Mail(18, "Where is your product page?", "2012/11/18 04:31:12", 14));
			add(new Mail(19, "ZK information required!", "2012/11/18 04:31:12", 14));
		}
	};
	
	
			
	public static final List<Mail> yesterday = new ArrayList<Mail>() { 
		/**
		 * 
		 */
		private static final long serialVersionUID = 371699318882942469L;

		{
		add(new Mail(1, "[zk1 - General] RE: Opening more than one new browser window", "2012/11/17 19:44:17", 39));
			add(new Mail(2, "[zk1 - General] RE: Opening more than one new browser window", "2012/11/17 19:42:17", 35));
			add(new Mail(3, "[zk1 - General] RE: Opening more than one new browser window", "2012/11/17 19:40:17", 26));
			add(new Mail(4, "[zk1 - General] RE: Opening more than one new browser window", "2012/11/17 18:14:17", 27));
			add(new Mail(5, "[zk1 - General] RE: Opening more than one new browser window", "2012/11/17 17:05:17", 18));
			add(new Mail(6, "[zk1 - General] RE: Opening more than one new browser window", "2012/11/17 16:44:17", 19));
			add(new Mail(7, "[zk1 - Help] RE: SelectedItemConverter Question", "2012/11/17 13:31:12", 14));
			add(new Mail(8, "[zk1 - Help] RE: SelectedItemConverter Question", "2012/11/17 13:31:12", 14));
			add(new Mail(9, "[zk1 - Help] RE: SelectedItemConverter Question", "2012/11/17 13:31:12", 14));
			add(new Mail(10, "[zk1 - Help] RE: SelectedItemConverter Question", "2012/11/17 13:31:12", 14));
			add(new Mail(11, "[zk1 - Help] RE: Times_Series Chart help", "2012/11/17 13:26:37", 14));
			add(new Mail(12, "[zk1 - Help] RE: Times_Series Chart help", "2012/11/17 13:26:37", 14));
			add(new Mail(13, "[zk1 - Help] RE: Times_Series Chart help", "2012/11/17 13:26:37", 14));
			add(new Mail(14, "[zk1 - Help] RE: Times_Series Chart help", "2012/11/17 10:41:33", 14));
			add(new Mail(15, "[zk1 - Help] RE: SelectedItemConverter Question", "2012/11/17 10:14:27", 14));
			add(new Mail(16, "[zk1 - Help] RE: Bandbox Autocomplete Problem", "2012/11/18 10:16:27", 16));
			add(new Mail(17, "[zk1 - Help] RE: Bandbox Autocomplete Problem", "2012/11/18 10:14:27", 18));
			add(new Mail(18, "[zk1 - Help] RE: Databinding with radiogroups", "2012/11/18 09:47:27", 12));
			add(new Mail(19, "[zk1 - Help] RE: It's not possible to navigate a listbox' ite", "2012/11/18 09:35:27", 12));
	
		}};
					
					
					
		public static final List<Mail> lastweek = new ArrayList<Mail>() { 
			/**
			 * 
			 */
			private static final long serialVersionUID = 6828086728135254421L;
			

			{
			add(new Mail(1, "[zk1 - Help] RE: SelectedItemConverter Question", "2012/11/15 04:31:12", 14));
			add(new Mail(2, "[zk1 - Help] RE: SelectedItemConverter Question", "2012/11/15 04:31:12", 14));
			add(new Mail(3, "[zk1 - Help] RE: SelectedItemConverter Question", "2012/11/15 04:31:12", 14));
			add(new Mail(4, "[zk1 - Help] RE: Times_Series Chart help", "2012/11/15 03:26:37", 14));
			add(new Mail(5, "[zk1 - Help] RE: Times_Series Chart help", "2012/11/15 03:26:37", 14));
			add(new Mail(6, "[zk1 - Help] RE: Times_Series Chart help", "2012/11/15 03:26:37", 14));
			add(new Mail(7, "[zk1 - Help] RE: Times_Series Chart help", "2012/11/14 12:41:33", 14));
			add(new Mail(8, "[zk1 - Help] RE: Times_Series Chart help", "2012/11/14 02:41:33", 14));
			add(new Mail(9, "[zk1 - Help] RE: Times_Series Chart help", "2012/11/14 02:41:33", 14));
			add(new Mail(10, "[zk1 - Help] RE: Times_Series Chart help", "2012/11/14 02:41:33", 14));
			add(new Mail(11, "[zk1 - Help] RE: SelectedItemConverter Question", "2012/11/13 02:14:27", 14));
			add(new Mail(12, "[zk1 - Help] RE: SelectedItemConverter Question", "2012/11/13 02:14:27", 14));
			add(new Mail(13, "[zk1 - Help] RE: SelectedItemConverter Question", "2012/11/13 02:14:27", 14));
			add(new Mail(14, "[zk1 - Help] RE: SelectedItemConverter Question", "2012/11/13 02:14:27", 14));
			add(new Mail(15, "[zk1 - Help] RE: Bandbox Autocomplete Problem", "2012/11/18 10:16:27", 16));
			add(new Mail(16, "[zk1 - Help] RE: Bandbox Autocomplete Problem", "2012/11/18 10:14:27", 18));
			add(new Mail(17, "[zk1 - Help] RE: Databinding with radiogroups", "2012/11/18 09:47:27", 12));
			add(new Mail(18, "[zk1 - Help] RE: It's not possible to navigate a listbox' ite", "2012/11/18 09:35:27", 12));
		}
	};
	
	public static final List<List<Mail>> AllData = new ArrayList<List<Mail>>() { 
		/**
		 * 
		 */
		private static final long serialVersionUID = 4336909445387178760L;

		{
			add(today);
			add(yesterday);
			add(lastweek);
		}
	};
	
	public static final List<String> headers = new ArrayList<String>() {
		/**
		 * 
		 */
		private static final long serialVersionUID = 1944639986396108213L;

		{
			add("Date: Today");
			add("Date: Yesterday");
			add("Date: Last Week");
		}
	};
}