This demo uses annotated databinding to associate a collection of "Contributor" data objects with the Listbox and Grid components. Updates to the data model are reflected on the UI components instantly.

<window sclass="cardSys" border="none"
	apply="org.zkoss.bind.BindComposer"
	viewModel="@id('vm') @init('demo.grid.data_binding.ContributorViewModel')">
	<style src="/widgets/grid/data_binding/style.css" />
	<hlayout spacing="0" height="400px">
		<listbox sclass="employee-list" vflex="true" hflex="1"
			model="@load(vm.contributorList)" selectedItem="@bind(vm.selectedContributor)" >
			<auxhead>
				<auxheader colspan="3" class="topic">Contributor List</auxheader>
			</auxhead>
			<listhead>
				<listheader label="Title" width="80px" align="center" />
				<listheader label="Full Name" align="center" />
				<listheader label="Extension" width="80px" align="center" />
			</listhead>
			<template name="model" var="contributor">
				<listitem>
					<listcell label="@load(contributor.title)" />
					<listcell label="@load(contributor.fullName)" />
					<listcell label="@load(contributor.extension)" />
				</listitem>
			</template>

		</listbox>
		<window sclass="card-pre" title="Name Card Preview" hflex="1" vflex="true" border="normal">
			<div sclass="card">
				<image sclass="logo" src="/images/ZK-Logo.gif" />
				<vlayout sclass="title">
					<label sclass="name" value="@load(vm.selectedContributor.fullName)" />
					<hlayout sclass="dept">
						<label value="@load(vm.selectedContributor.title)" />
						Contributor
					</hlayout>
				</vlayout>
				<div sclass="number">
					Tel:+1-23-456-789 ext
					<label value="@load(vm.selectedContributor.extension)" />
				</div>
			</div>
		</window>
	</hlayout>
	<grid>
		<auxhead>
			<auxheader colspan="5" class="topic">Edit Data</auxheader>
		</auxhead>
		<columns>
			<column label="Title" align="center" />
			<column label="First Name" align="center" />
			<column label="Last Name" align="center" />
			<column label="Extension" align="center" />
			<column label="Full Name" align="center" />
		</columns>
		<rows>
			<row>
				<combobox model="@load(vm.contributorTitles)" 
					selectedItem="@bind(vm.selectedContributor.title)" width="99%" />
				<textbox value="@bind(vm.selectedContributor.firstName)" width="95%" />
				<textbox value="@bind(vm.selectedContributor.lastName)" width="95%" />
				<intbox value="@bind(vm.selectedContributor.extension)" width="95px" />
				<label value="@load(vm.selectedContributor.fullName)" />
			</row>
		</rows>
	</grid>
</window>

package demo.grid.data_binding;

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

import org.zkoss.bind.annotation.Init;

import demo.data.ContributorData;
import demo.data.pojo.Contributor;

public class ContributorViewModel {
	private Contributor selected;
	private List<String> titles = new ArrayList<String>(new ContributorData().getTitles());
	private List<Contributor> contributors = new ArrayList<Contributor>(new ContributorData().getContributors());

	@Init
	public void init() {	// Initialize
		selected = contributors.get(0); // Selected First One
	}

	public List<String> getContributorTitles() {
		return titles;
	}

	public List<Contributor> getContributorList() {
		return contributors;
	}

	public void setSelectedContributor(Contributor selected) {
		this.selected = selected;
	}

	public Contributor getSelectedContributor() {
		return selected;
	}
}

package demo.data;

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

import demo.data.pojo.Contributor;
import demo.data.pojo.LanguageContribution;

public class ContributorData {

	private List<String> titles = new ArrayList<String>();
	private List<Contributor> contributors = new ArrayList<Contributor>();
	private List<LanguageContribution> languageContributions = new ArrayList<LanguageContribution>();

	public ContributorData() {
		titles.add("Code");
		titles.add("Bug");
		titles.add("Docs");
		titles.add("Arts");

		contributors.add(new Contributor("Kaleb", "Leonel", titles.get(0).toString(), 321));
		contributors.add(new Contributor("Balu", "Haben", titles.get(0).toString(), 321));
		contributors.add(new Contributor("Trey", "Wyatt", titles.get(0).toString(), 323));
		contributors.add(new Contributor("Balu", "Chen", titles.get(0).toString(), 324));
		contributors.add(new Contributor("Terry", "Tornado", titles.get(0).toString(), 711));
		contributors.add(new Contributor("Jesse", "Miles", titles.get(1).toString(), 712));
		contributors.add(new Contributor("Sadira", "Jobs", titles.get(1).toString(), 713));
		contributors.add(new Contributor("Jaquan", "Frederick", titles.get(2).toString(), 451));
		contributors.add(new Contributor("Avery", "Katrina", titles.get(2).toString(), 453));
		contributors.add(new Contributor("Heidi", "Nikolas", titles.get(2).toString(), 455));
		contributors.add(new Contributor("Katelyn", "Clara", titles.get(2).toString(), 457));
		contributors.add(new Contributor("Branden", "Shane", titles.get(2).toString(), 459));
		contributors.add(new Contributor("Dacey", "Obert", titles.get(2).toString(), 450));
		contributors.add(new Contributor("Julianna", "Allison", titles.get(3).toString(), 643));
		contributors.add(new Contributor("Rachel", "Elisabeth", titles.get(3).toString(), 644));
		contributors.add(new Contributor("Clarissa", "Francesca", titles.get(3).toString(), 645));
		contributors.add(new Contributor("Gabby", "Taffy", titles.get(3).toString(), 646));
		
		languageContributions.add(new LanguageContribution("Arabic (ar)", "Ayman Elgharabawy", "iso-8859-6"));
		languageContributions.add(new LanguageContribution("Hungarian (hu)", "Andreas Klein", "iso-8859-2"));
		languageContributions.add(new LanguageContribution("Italian (it)", "Matteo Barbieri", "iso-8859-1"));
		languageContributions.add(new LanguageContribution("Indonesian (id)", "James Liam Supangkat", "iso-8859-1"));
		languageContributions.add(new LanguageContribution("Japanese (ja)", "Poli Lee", " iso-2022-jp"));
		languageContributions.add(new LanguageContribution("Korean (ko)", "Deok-su Lee", "euc-kr"));
		languageContributions.add(new LanguageContribution("Dutch (nl)", "Wido Jansen", "iso-8859-1"));
		languageContributions.add(new LanguageContribution("Portuguese (pt)", "Airton Carrara", "iso-8859-1"));
		languageContributions.add(new LanguageContribution("Brazilian Portugese (pt_BR)", "Airton Carrara", "iso-8859-1"));
		languageContributions.add(new LanguageContribution("Romanian (ro)", "Calin Vaida", "iso-8859-2"));
		languageContributions.add(new LanguageContribution("Russian (ru)", "Denis Yarkovoy", "iso-8859-1"));
		languageContributions.add(new LanguageContribution("French (fr)", "Jêrôme Vergereau", "iso-8859-1"));
		languageContributions.add(new LanguageContribution("Spanish (es)", "Daniel Octavio Ruiz Rodriguez", "iso-8859-1"));
		languageContributions.add(new LanguageContribution("German (de)", "H.-Dirk Schmitt", "iso-8859-1"));
		languageContributions.add(new LanguageContribution("Czech (cs)", "Pavel Mica", "iso-8859-2"));
		languageContributions.add(new LanguageContribution("Catalan (ca)", "Xavier Covas O'Ryan", "iso-8859-1"));
		languageContributions.add(new LanguageContribution("Bulgarian (bg) ", "Boril Yonchev", "iso-8859-5"));
		languageContributions.add(new LanguageContribution("Ukrainian (uk)", "Denis Yarkovoy", "iso-8859-5"));
		languageContributions.add(new LanguageContribution("Turkish (tr)", "Kursat Kurt", "iso-8859-9"));
		languageContributions.add(new LanguageContribution("Swedish (sv)", "Easit AB", "iso-8859-1"));
		languageContributions.add(new LanguageContribution("Slovenian (sl) ", "Ziga", "iso-8859-2"));
	}

	public List<String> getTitles() {
		return titles;
	}

	public List<Contributor> getContributors() {
		return contributors;
	}

	public List<LanguageContribution> getLanguageContributors() {
		return languageContributions;
	}

}

package demo.data.pojo;

import org.zkoss.bind.annotation.DependsOn;

public class Contributor {
	private String title;
	private String firstName;
	private String lastName;
	private Integer extension;

	public Contributor(String firstName, String lastName, String title, Integer ext) {
		setFirstName(firstName);
		setLastName(lastName);
		setTitle(title);
		setExtension(ext);
	}

	public Contributor() {
		setFirstName("");
		setLastName("");
		setTitle("Code");
		setExtension(12345);
	}

	public String getFirstName() {
		return firstName;
	}

	public void setFirstName(String fn) {
		firstName = fn;
	}

	public String getLastName() {
		return lastName;
	}

	public void setLastName(String ln) {
		lastName = ln;
	}

	public String getTitle() {
		return title;
	}

	public void setTitle(String tl) {
		title = tl;
	}

	public Integer getExtension() {
		return extension;
	}

	public void setExtension(Integer ext) {
		extension = ext;
	}

	@DependsOn({ "firstName", "lastName" })
	public String getFullName() {
		return getFirstName() + " " + getLastName();
	}
}