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 :
menubar focus
190guest162.158.134.243126pn69Apr 3, 2025 7:38:57 AMlinkmenubar focus
189guest162.158.134.117126pn69Apr 3, 2025 7:37:04 AMlinkmenubar focus
188guest162.158.134.117126pn69Apr 3, 2025 7:36:47 AMlinkmenubar focus
187guest162.158.134.116126pn69Apr 3, 2025 7:36:36 AMlinkwindow
186guest162.158.134.117126pn69Apr 3, 2025 7:36:16 AMlinkwindow
185guest162.158.134.116126pn69Apr 3, 2025 7:34:52 AMlinkpre-process onkeydown event of decimalbox
6guest188.114.111.238id6omeApr 2, 2025 11:07:38 AMlinkTextbox Constraint
1kevinLin172.70.211.21123plmq0Apr 2, 2025 7:35:06 AMlinkRadiogroup line break with CSS
6guest172.70.115.1091iu7kdApr 1, 2025 4:38:34 PMlinkAnother new ZK fiddle
5guest172.70.115.1091iu7kdApr 1, 2025 4:38:26 PMlinkHide Auxhead
1guest92.56.175.1341sjecrjMar 18, 2014 4:09:02 PMlinkresources
index.zulzul<?xml version="1.0" encoding="UTF-8"?>
<zk xmlns="http://www.zkoss.org/2005/zul" xmlns:n="native">
<div
vflex="true" width="100%"
apply="org.zkoss.bind.BindComposer"
viewModel="@id('vm') @init('pkg$.test.DynamicColumnModel')">
<borderlayout id="BLContenedor" width="100%" style="height:100%">
<north border="none" collapsible="false" splittable="false" height="50px"/>
<west width="380px" splittable="true" collapsible="true" style="border-left:0px" open="true" autoscroll="true"/>
<center>
<div hflex="true" vflex="true">
<tabbox vflex="true" width="100%">
<tabs>
<tab label="Tab 1" />
<tab label="Tab 2" />
<tab label="Tab 3"/>
</tabs>
<toolbar style="padding-top:5px; height:19px;">
<label value="03/12/2013 10:25" style="vertical-align:bottom;color:#ACACAC"/>
</toolbar>
<tabpanels>
<tabpanel></tabpanel>
<tabpanel>
<borderlayout>
<north border="none" height="230px" collapsible="true" title="North"/>
<center border="none">
<n:div style="width:100%;height:100%;">
<listbox id="LB" mold="paging" autopaging="true" vflex="true" sizedByContent="true" width="99%" span="0" model="@bind(vm.data)">
<listhead sizable="true">
<listheader label="Listheader 1"/>
<listheader label="Listheader 2"/>
<listheader label="Listheader 3"/>
<listheader label="Listheader 4"/>
<listheader label="Listheader 5"/>
<listheader label="Listheader 6"/>
<listheader label="Listheader 7"/>
<listheader label="Listheader 8"/>
</listhead>
<auxhead id="auxh" visible="false">
<auxheader align="center" colspan="2" label="Auxheader 1"/>
<auxheader align="center" colspan="2" label="Auxheader 2"/>
<auxheader align="center" colspan="2" label="Auxheader 3"/>
<auxheader align="center" colspan="2" label="Auxheader 4"/>
</auxhead>
<template name="model" var="line">
<listitem children="@bind(line)" >
<template name="children" var="cell">
<listcell label="@load(cell)" style="text-align: center"/>
</template>
</listitem>
</template>
<listfoot>
<listfooter label="LF"/>
</listfoot>
</listbox>
<toolbar>
<toolbarbutton label="Load data" onClick="@command('loadData')"/>
<toolbarbutton label="Show/Hide auxhead" onClick="@command('switchAuxhead')"/>
</toolbar>
</n:div>
</center>
</borderlayout>
</tabpanel>
<tabpanel></tabpanel>
</tabpanels>
</tabbox>
</div>
</center>
</borderlayout>
</div>
</zk>DynamicColumnModel.javajavaimport java.util.ArrayList;
import java.util.List;
import org.zkoss.bind.BindContext;
import org.zkoss.bind.BindUtils;
import org.zkoss.bind.Converter;
import org.zkoss.bind.annotation.AfterCompose;
import org.zkoss.bind.annotation.BindingParam;
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.ContextParam;
import org.zkoss.bind.annotation.ContextType;
import org.zkoss.bind.annotation.GlobalCommand;
import org.zkoss.bind.annotation.NotifyChange;
import org.zkoss.bind.annotation.Init;
import org.zkoss.zk.ui.select.Selectors;
import org.zkoss.zk.ui.select.annotation.Listen;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zk.ui.select.annotation.WireVariable;
import org.zkoss.zk.ui.Component;
import org.zkoss.zul.Auxhead;
import org.zkoss.zul.Listbox;
public class DynamicColumnModel {
private List<List<String>> data = new ArrayList<List<String>>();
private List<String> columns = new ArrayList<String>();
private List<String> headers = new ArrayList<String>();
@Wire
private Auxhead auxh;
@Wire
private Listbox LB;
@AfterCompose
public void init(@ContextParam(ContextType.VIEW) Component view){
//enlaza los componentes
Selectors.wireComponents(view, this, false);
//enlaza eventos
Selectors.wireEventListeners(view, this);
Selectors.wireVariables(view, this, null);
for (int i = 0; i< 4; i++) {
headers.add("Header "+i);
for (int j = 0; j< 2; j++) {
columns.add("Dynamic Col "+i+"/"+j);
}
}
LB.getPagingChild().setAutohide(false);
}
@Command("loadData")
@NotifyChange("data")
public void loadData(){
data.clear();
for (int i = 0; i< 20; i++) {
ArrayList<String> dataLine = new ArrayList<String>();
for (int j = 0; j< 8; j++) {
dataLine.add("Data "+i+"/"+j);
}
data.add(dataLine);
}
}
@Command("switchAuxhead")
public void switchAuxhead(){
auxh.setVisible(!auxh.isVisible());
LB.invalidate();
}
public List<String> getHeaders() {
return headers;
}
public void setHeadList(List<String> headers) {
this.headers = headers;
}
public List<String> getColumns() {
return columns;
}
public void setColumns(List<String> columns) {
this.columns = columns;
}
public List<List<String>> getData() {
return data;
}
public void setData(List<List<String>> dataList) {
this.data = dataList;
}
}