Suggested case list:
Using timer to refresh a grid
383guest172.69.33.12125nk0uiMay 7, 2020 7:23:47 AMlinkuser model to move item to another listbox
120guest162.158.193.148d0n3krApr 2, 2020 5:28:28 AMlinkDisabled list item row passed to VM-1981
296fatih123160.83.36.13025nk0uiFeb 13, 2018 4:25:44 PMlinkDisabled list item row passed to VM-1981
295fatih123160.83.36.13025nk0uiFeb 13, 2018 4:25:16 PMlinkDisabled list item row passed to VM-1981
294fatih123160.83.36.13225nk0uiFeb 13, 2018 3:30:44 PMlinkgrid sample with ListModel/RowRenderer
816guest80.82.2.1312vah9ajFeb 21, 2017 11:42:21 AMlinkgrid sample with ListModel/RowRenderer
809guest175.98.113.1622vah9ajJan 26, 2017 9:19:33 AMlinkgrid sample with ListModel/RowRenderer
196guest79.185.142.402vah9ajApr 26, 2014 10:53:57 PMlinkgrid sample with ListModel/RowRenderer
195guest79.185.142.402vah9ajApr 26, 2014 10:53:54 PMlinkgrid sample with ListModel/RowRenderer
194guest79.185.142.402vah9ajApr 26, 2014 10:53:51 PMlinkgrid sample with ListModel/RowRenderer
193guest79.185.142.402vah9ajApr 26, 2014 10:53:48 PMlinkgrid sample with ListModel/RowRenderer
192guest79.185.142.402vah9ajApr 26, 2014 10:53:44 PMlinkgrid sample with ListModel/RowRenderer
191guest79.185.142.402vah9ajApr 26, 2014 10:53:40 PMlinkHierarchy table without using ZK PE/EE
1aaknai151.28.135.2131s871daJul 29, 2013 11:02:46 PMlinkgrid sample with ListModel/RowRenderer
128aaknai151.28.135.2132vah9ajJul 29, 2013 7:20:00 PMlinkuser model to move item to another listbox
1TonyQ114.25.109.94d0n3krApr 21, 2012 10:43:27 AMlinkUsing timer to refresh a grid
1TonyQ220.133.44.3725nk0uiFeb 17, 2012 3:17:34 AMlinkFire a event from child iframe
1TonyQ220.133.44.372eupjotFeb 3, 2012 5:04:52 AMlinkTextbox input restriction sample
1TonyQ72.21.245.2431b3nlr0Dec 20, 2011 10:09:10 AMlinkTest web core taglib in ZUL
1TonyQ198.203.175.175ofqkemDec 17, 2011 3:36:08 AMlinkLatest 10 Fiddles :
constraint binding textbox
3guest172.68.151.16220peldaDec 5, 2025 5:08:19 PMlinkAnother new ZK fiddle
2guest172.68.151.16320peldaDec 5, 2025 5:07:51 PMlinkAnother new ZK fiddle
1guest172.68.151.16220peldaDec 5, 2025 5:07:32 PMlinkAnother new ZK fiddle
1peggypeng172.71.154.99364f4neDec 5, 2025 9:24:31 AMlinktooltip example
2guest104.22.23.13rc1ntoDec 4, 2025 2:23:45 PMlinkAnother new ZK fiddle
1guest172.69.134.2277t7602Dec 4, 2025 1:40:46 PMlinkAnother new ZK fiddle
1peggypeng104.22.17.1802df6e3oDec 4, 2025 8:41:29 AMlinkonClose
1peggypeng172.68.87.248j8kd8aDec 3, 2025 4:10:26 AMlinkAnother new ZK fiddle
1peggypeng172.69.134.2271rm7f4eNov 26, 2025 3:31:24 AMlinkZK-5912-Suggestion
2rebeccalai104.22.20.1442qrmiiuNov 26, 2025 2:07:15 AMlinkAnother new ZK fiddle
1guest195.239.158.62v0vckdJul 6, 2015 9:10:14 AMlinkresources
index.zulzul
<zk>
<style src="/widgets/grid/hierarchy/style.css" />
<div apply="pkg$.HierarchyController">
<grid id="hGrid" model="${$composer.stocks }">
<columns>
<column width="40px" />
<column label="Stock Name" sort="auto(name)" />
<column label="Avg. High" sort="auto(averageHigh)" align="center"/>
<column label="Avg. Low" sort="auto(averageLow)" align="center"/>
<column label="Avg. Volume" sort="auto(averageVolume)" align="center"/>
</columns>
<template name="model">
<row>
<!-- use custom-attributes to store quarters and stock in row,
so it can be accessed later when detail onOpen -->
<custom-attributes quarters="${each.quarters}" stock="${each}" />
<detail open="false" fulfill="onOpen">
<include src="season.zul"
stock="${stock}" quarters="${quarters}" />
</detail>
<label value="${each.name}" />
<label value="${(each.averageHigh)}" style="color:red;"/>
<label value="${(each.averageLow)}" style="color:green;"/>
<label value="${(each.averageVolume)}" style="font-weight:bold;"/>
</row>
</template>
</grid>
</div>
</zk>HierarchyController.javajavaimport org.zkoss.zk.ui.*;
import org.zkoss.zk.ui.event.*;
import org.zkoss.zk.ui.util.*;
import org.zkoss.zk.ui.ext.*;
import org.zkoss.zk.au.*;
import org.zkoss.zk.au.out.*;
import org.zkoss.zul.*;
public class HierarchyController extends GenericForwardComposer{
private static final long serialVersionUID = 1L;
final StockModel stockData = new StockModel();
public ListModel<Stock> getStocks() {
return new ListModelList<Stock>(stockData.getStocks());
}
}
StockModel.javajavaimport org.zkoss.zk.ui.*;
import org.zkoss.zk.ui.event.*;
import org.zkoss.zk.ui.util.*;
import org.zkoss.zk.ui.ext.*;
import org.zkoss.zk.au.*;
import org.zkoss.zk.au.out.*;
import org.zkoss.zul.*;
import java.util.ArrayList;
import java.util.List;
public class StockModel extends GenericForwardComposer{
private List<Stock> stock = new ArrayList<Stock>();
public StockModel(){
stock.add(generateStock("Csco"));
stock.add(generateStock("Goog"));
stock.add(generateStock("Yhoo"));
stock.add(generateStock("Msft"));
stock.add(generateStock("Orcl"));
stock.add(generateStock("Amaz"));
stock.add(generateStock("Fabc"));
}
public List<Stock> getStocks() {
return stock;
}
private static Stock generateStock(String stockName) {
return new Stock(stockName, getValue(), getValue(), getVolume(), generateQuarters());
}
private static List<Quarter> generateQuarters() {
List<Quarter> quarters = new ArrayList<Quarter>();
//generate each quarter
for(int i =0; i<4; i++) {
quarters.add(generateQuarter(i * 3));
}
return quarters;
}
private static Quarter generateQuarter(int start) {
List<Month> months = new ArrayList<Month>();
for(int i=0;i<3;i++) {
months.add(new Month(start + i, getValue(), getValue(), getVolume()));
}
return new Quarter((start / 3) + 1, months);
}
private static double getValue() {
return Math.random() * 50 + 40;
}
private static double getVolume() {
return Math.random() * 50000 + 65536;
}public void doAfterCompose(Component comp) throws Exception {
super.doAfterCompose(comp);
}
public void onClick$btn(Event e) throws InterruptedException{
Messagebox.show("Hi btn");
}
}
Stock.javajavaimport org.zkoss.zk.ui.*;
import org.zkoss.zk.ui.event.*;
import org.zkoss.zk.ui.util.*;
import org.zkoss.zk.ui.ext.*;
import org.zkoss.zk.au.*;
import org.zkoss.zk.au.out.*;
import org.zkoss.zul.*;
import java.util.List;
import org.zkoss.zul.ListModel;
import org.zkoss.zul.ListModelList;
public class Stock extends GenericForwardComposer{
private String name;
private List<Quarter> quarters;
public Stock(String name, double high, double low,
double volume, List<Quarter> quarters) {
this.name = name;
this.quarters = quarters;
}
public String getName() {
return name;
}
public double getAverageHigh() {
double total = 0;
for (Quarter quarter : quarters) {
total += quarter.getAverageHigh();
}
return total / quarters.size();
}
public double getAverageLow() {
double total = 0;
for (Quarter quarter : quarters) {
total += quarter.getAverageLow();
}
return total / quarters.size();
}
public double getAverageVolume() {
double total = 0;
for (Quarter quarter : quarters) {
total += quarter.getAverageVolume();
}
return total / quarters.size();
}
public ListModel<Quarter> getQuarters() {
return new ListModelList<Quarter>(quarters);
} public void doAfterCompose(Component comp) throws Exception {
super.doAfterCompose(comp);
}
public void onClick$btn(Event e) throws InterruptedException{
Messagebox.show("Hi btn");
}
}
Quarter.javajavaimport org.zkoss.zk.ui.*;
import org.zkoss.zk.ui.event.*;
import org.zkoss.zk.ui.util.*;
import org.zkoss.zk.ui.ext.*;
import org.zkoss.zk.au.*;
import org.zkoss.zk.au.out.*;
import org.zkoss.zul.*;
import java.util.List;
import org.zkoss.zul.CategoryModel;
import org.zkoss.zul.ListModel;
import org.zkoss.zul.ListModelList;
import org.zkoss.zul.SimpleCategoryModel;
public class Quarter extends GenericForwardComposer{
private List<Month> months;
private int quarter;
public Quarter(int quarter, List<Month> months) {
this.months = months;
this.quarter = quarter;
}
public ListModel<Month> getMonths() {
return new ListModelList<Month>(this.months);
}
public int getQuarter() {
return quarter;
}
public double getAverageHigh() {
double total = 0;
for (Month month : months) {
total += month.getHigh();
}
return total / months.size();
}
public double getAverageLow() {
double total = 0;
for (Month month : months) {
total += month.getLow();
}
return total / months.size();
}
public double getAverageVolume() {
double total = 0;
for (Month month : months) {
total += month.getVolume();
}
return total / months.size();
}
public CategoryModel getChartModel() {
CategoryModel categoryModel = new SimpleCategoryModel();
for(Month month : months) {
categoryModel.setValue("Performance", month.getMonth(), month.getVolume());
}
return categoryModel;
}
}
Month.javajavaimport org.zkoss.zk.ui.*;
import org.zkoss.zk.ui.event.*;
import org.zkoss.zk.ui.util.*;
import org.zkoss.zk.ui.ext.*;
import org.zkoss.zk.au.*;
import org.zkoss.zk.au.out.*;
import org.zkoss.zul.*;
import java.text.SimpleDateFormat;
import java.util.Calendar;
public class Month extends GenericForwardComposer{
private final double high, low, volume;
private final Calendar month = Calendar.getInstance();
private final SimpleDateFormat monthFormat = new SimpleDateFormat("MMMM");
private final String stringMonth;
public Month(int month, double high, double low, double volume) {
this.high = high;
this.low = low;
this.volume = volume;
this.month.set(Calendar.MONTH, month);
this.stringMonth = monthFormat.format(this.month.getTime());
}
public double getHigh() {
return high;
}
public double getLow() {
return low;
}
public double getVolume() {
return volume;
}
public String getMonth() {
return stringMonth;
}
}
season.zulzul<grid model="${arg.quarters}" sclass="inner-grid">
<columns>
<column width="40px" />
<column label="Season" />
<column label="Avg. High" sort="auto(averageHigh)" align="center"/>
<column label="Avg. Low" sort="auto(averageLow)" align="center"/>
<column label="Avg. Volume" sort="auto(averageVolume)" align="center"/>
</columns>
<template name="model">
<row value="${forEachStatus.index}">
<!-- use custom-attributes to store quarter and months in row,
so it can be accessed later when detail onOpen -->
<custom-attributes quarter="${each}" months="${each.months}" />
<detail open="false" fulfill="onOpen">
<include src="month.zul"
quarter="${quarter}" months="${months}" />
</detail>
<label value="Q${each.quarter}" />
<label value="${(each.averageHigh)}" />
<label value="${(each.averageLow)}" />
<label value="${(each.averageVolume)}" />
</row>
</template>
<foot>
<footer width="40px" />
<footer label="Avg:" />
<footer label="${(arg.stock.averageHigh)}" />
<footer label="${(arg.stock.averageLow)}" />
<footer label="${(arg.stock.averageVolume)}" />
</foot>
</grid>month.zulzul<zk>
<grid model="${arg.months}">
<columns>
<column label="Month" />
<column label="High" sort="auto(high)" align="center"/>
<column label="Low" sort="auto(low)" align="center"/>
<column label="Volume" sort="auto(volume)" align="center"/>
</columns>
<template name="model">
<row sclass="last">
<label value="${each.month}" />
<label value="${(each.high)}" />
<label value="${(each.low)}" />
<label value="${(each.volume)}" />
</row>
</template>
</grid>
<chart type="line" width="600px" height="200px" bgColor="#fafafa"
model="${arg.quarter.chartModel}" />
</zk>