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 AMlinkNS Staff Editor Workgroups
4Jovkub194.213.192.93mbtb0dApr 13, 2016 9:47:36 AMlinkresources
index.zulzul<?xml version="1.0"?>
<zk>
<style dynamic="true">.z-toolbar a, .z-toolbar a:visited, .z-toolbar a:hover { background-color:transparent; border:0 none; } .actionsToolBar { background-color:transparent; color:transparent; padding-top:0px; background-color:transparent; border:0 none; border-bottom: 0 none; } .p-vista .z-panel-children { background-color: #008BB6; border-bottom: 0 none; }</style>
<div height="720px" width="100%">
<hlayout>
<div width="300px" height="100%">
<!-- tree -->
<style>.h-inline-block { display: inline-block; _display: inline; }</style>
<include src="tree.zul"/>
</div>
<div width="1000px">
<vlayout>
<div>
<grid width="100%">
<auxhead>
<auxheader colspan="4" label="Workgroup Details" />
</auxhead>
<columns>
<column width="150px"></column>
<column width="155px"></column>
<column width="50px"/>
<column hflex="1"/>
</columns>
<rows sclass="narrow">
<row>
<label value="Name" />
<textbox value="Staff Editor" width="100%" />
</row>
<row>
<label value="Description" />
<cell valign="top" colspan="3">
<textbox rows="5" width="100%" value="Software developement project done together with CN Group." />
</cell>
</row>
<row>
<label value="Type" />
<cell colspan="3">
<combobox value="IT Project" width="230px" />
</cell>
</row>
<row>
<label value="Folder" />
<cell colspan="3"><combobox value="IT Projects" /></cell>
</row>
<row>
<label value="Exists From" />
<datebox cols="12" width="140px" format="medium" onCreate="self.value = new Date()" />
<cell align="right"> <label value="until" /></cell>
<datebox width="140px" cols="12" format="medium" onCreate="self.value = new Date()" />
</row>
<row>
<label value="Active Leader(s)" />
<cell colspan="3"><label value="Bob Builder" /></cell>
</row>
</rows>
</grid>
<div height="10px" width="100%"></div>
</div>
<div>
<tabbox id="tb" height="304px" width="1000px">
<tabs id="tabs">
<tab label="Group Members (4)" />
<tab label="Leaders (1)" />
<tab label="Companies (2)" />
<tab label="Notes (2)" />
</tabs>
<tabpanels>
<tabpanel>
<div width="100%">
<grid>
<columns>
<column width="24px"></column>
<column>Member Name</column>
<column width="150px">Role</column>
<column width="80px">FTE</column>
<column width="150px">Assigned From</column>
<column width="150px">Assigned Until</column>
<column width="80px">Actions</column>
</columns>
<rows sclass="narrow">
<row>
<image src="http://www.antenneduesseldorf.de/web/media/standards/icon-profile.png" />
<label value="Bob Builder" />
<label value="Scrum Master" />
<label value="0.3" />
<label value="2015-JAN-01" />
<label value="2015-JUL-20" />
<hbox>
<toolbarbutton image="http://www.orlybaram.com/_ee/img/icons/edit/edit-icon.gif" tooltiptext="Update" />
<toolbarbutton image="http://fast1.onesite.com/resources/images/icons/16-removeUser.png?ver=14.07.30" tooltiptext="Unassign" disabled="true" />
<toolbarbutton image="http://www.stmarks.net/stmsys/extensions/fieldtypes/ngen_file_field/images/trash-icon.gif" tooltiptext="Remove" />
</hbox>
</row>
<row>
<image src="http://findicons.com/files/icons/1686/led/16/user_silhouette.png" />
<label value="Frank Newmaster" />
<label value="Scrum Master" />
<label value="0.3" />
<label value="2015-AUG-01" />
<label value="" />
<hbox>
<toolbarbutton image="http://www.orlybaram.com/_ee/img/icons/edit/edit-icon.gif" tooltiptext="Update" />
<toolbarbutton image="http://fast1.onesite.com/resources/images/icons/16-removeUser.png?ver=14.07.30" tooltiptext="Unassign" disabled="false" />
<toolbarbutton image="http://www.stmarks.net/stmsys/extensions/fieldtypes/ngen_file_field/images/trash-icon.gif" tooltiptext="Remove" />
</hbox>
</row>
<row>
<image src="http://www.antenneduesseldorf.de/web/media/standards/icon-profile.png" />
<label value="Sue Second" />
<label value="Developer" />
<label value="1.0" />
<label value="2015-JAN-01" />
<label value="2015-JUL-20" />
<hbox>
<toolbarbutton image="http://www.orlybaram.com/_ee/img/icons/edit/edit-icon.gif" tooltiptext="Update" />
<toolbarbutton image="http://fast1.onesite.com/resources/images/icons/16-removeUser.png?ver=14.07.30" tooltiptext="Unassign" disabled="true" />
<toolbarbutton image="http://www.stmarks.net/stmsys/extensions/fieldtypes/ngen_file_field/images/trash-icon.gif" tooltiptext="Remove" />
</hbox>
</row>
<row>
<image src="http://findicons.com/files/icons/1686/led/16/user_silhouette.png" />
<label value="Sue Second" />
<label value="Developer" />
<label value="0.5" />
<label value="2015-JUL-01" />
<label value="" />
<hbox>
<toolbarbutton image="http://www.orlybaram.com/_ee/img/icons/edit/edit-icon.gif" tooltiptext="Update" />
<toolbarbutton image="http://fast1.onesite.com/resources/images/icons/16-removeUser.png?ver=14.07.30" tooltiptext="Unassign" disabled="false" />
<toolbarbutton image="http://www.stmarks.net/stmsys/extensions/fieldtypes/ngen_file_field/images/trash-icon.gif" tooltiptext="Remove" />
</hbox>
</row>
<row>
<image src="http://findicons.com/files/icons/1686/led/16/user_silhouette.png" />
<label value="Johnny Depka" />
<label value="Developer" />
<label value="1.0" />
<label value="2015-FEB-01" />
<label value="" />
<hbox>
<toolbarbutton image="http://www.orlybaram.com/_ee/img/icons/edit/edit-icon.gif" tooltiptext="Update" />
<toolbarbutton image="http://fast1.onesite.com/resources/images/icons/16-removeUser.png?ver=14.07.30" tooltiptext="Unassign" disabled="false" />
<toolbarbutton image="http://www.stmarks.net/stmsys/extensions/fieldtypes/ngen_file_field/images/trash-icon.gif" tooltiptext="Remove" />
</hbox>
</row>
<row>
<image src="http://findicons.com/files/icons/1686/led/16/user_silhouette.png" />
<label value="Dummy Ragdoll" />
<label value="Tester" />
<label value="0.5" />
<label value="2015-SEP-01" />
<label value="" />
<hbox>
<toolbarbutton image="http://www.orlybaram.com/_ee/img/icons/edit/edit-icon.gif" tooltiptext="Update" />
<toolbarbutton image="http://fast1.onesite.com/resources/images/icons/16-removeUser.png?ver=14.07.30" tooltiptext="Unassign" disabled="false" />
<toolbarbutton image="http://www.stmarks.net/stmsys/extensions/fieldtypes/ngen_file_field/images/trash-icon.gif" tooltiptext="Remove" />
</hbox>
</row>
<row>
<cell colspan="4" align="left">
<checkbox label="Hide History" />
</cell>
<cell colspan="3" align="right">
<button label="Add Member" image="http://quan-li-resort.googlecode.com/svn/QLKS/QLKS/Images/addIcon.gif" width="110px" />
</cell>
</row>
</rows>
</grid>
</div>
</tabpanel>
<tabpanel>
<div width="100%">
<grid>
<columns>
<column width="24px"></column>
<column>Leader Name</column>
<column width="50px">Primary</column>
<column width="150px">Assigned From</column>
<column width="150px">Assigned Until</column>
<column width="80px">Actions</column>
</columns>
<rows sclass="narrow">
<row>
<image src="http://www.antenneduesseldorf.de/web/media/standards/icon-profile.png" />
<label value="Bob Builder" />
<label value="Yes" />
<label value="2015-JAN-01" />
<label value="2015-JUL-20" />
<hbox>
<toolbarbutton image="http://www.orlybaram.com/_ee/img/icons/edit/edit-icon.gif" tooltiptext="Edit History" />
<toolbarbutton image="http://fast1.onesite.com/resources/images/icons/16-removeUser.png?ver=14.07.30" tooltiptext="Unassign" disabled="true" />
<toolbarbutton image="http://www.stmarks.net/stmsys/extensions/fieldtypes/ngen_file_field/images/trash-icon.gif" tooltiptext="Remove" />
</hbox>
</row>
<row>
<image src="http://www.antenneduesseldorf.de/web/media/standards/icon-profile.png" />
<label value="Sue Second" />
<label value="No" />
<label value="2015-APR-21" />
<label value="2015-JUL-20" />
<hbox>
<toolbarbutton image="http://www.orlybaram.com/_ee/img/icons/edit/edit-icon.gif" tooltiptext="Edit History" />
<toolbarbutton image="http://fast1.onesite.com/resources/images/icons/16-removeUser.png?ver=14.07.30" tooltiptext="Unassign" disabled="true" />
<toolbarbutton image="http://www.stmarks.net/stmsys/extensions/fieldtypes/ngen_file_field/images/trash-icon.gif" tooltiptext="Remove" />
</hbox>
</row>
<row>
<image src="http://findicons.com/files/icons/1686/led/16/user_silhouette.png" />
<label value="Sue Second" />
<label value="Yes" />
<label value="2015-JUL-21" />
<label value=" - " />
<hbox class="actionsToolBar">
<toolbarbutton image="http://www.orlybaram.com/_ee/img/icons/edit/edit-icon.gif" tooltiptext="Edit History" />
<toolbarbutton image="http://fast1.onesite.com/resources/images/icons/16-removeUser.png?ver=14.07.30" tooltiptext="Unassign" />
<toolbarbutton image="http://www.stmarks.net/stmsys/extensions/fieldtypes/ngen_file_field/images/trash-icon.gif" tooltiptext="Remove" />
</hbox>
</row>
<row>
<cell colspan="3" align="left">
<checkbox label="Hide History" />
</cell>
<cell colspan="3" align="right">
<button label="Add Leader" image="http://quan-li-resort.googlecode.com/svn/QLKS/QLKS/Images/addIcon.gif" width="110px" />
</cell>
</row>
</rows>
</grid>
</div>
</tabpanel>
<tabpanel>
<div width="100%">
<include src="companiesTab.zul"/>
</div>
</tabpanel>
<tabpanel>
<div width="100%">
<grid>
<columns>
<column width="100%">Note</column>
<column width="120px">Author</column>
<column width="50px">Public</column>
<column width="120px">Created</column>
<column width="120px">Last Edit</column>
<column width="60px">Actions</column>
</columns>
<rows sclass="narrow">
<row>
<textbox rows="4" value="orem ipsum dolor sit amet, nullam complectitur nec id, in prima omnesque quaerendum vim. Velit nemore deserunt ei cum, debet nonumy eam te. Veri tempor dignissim ei usu. Ei odio tale option sit, molestie complectitur consequuntur in est, alia cibo integre ius te." width="100%" readonly="true" />
<cell align="left" valign="top">
<label value="Barbara Connanie" />
</cell>
<cell align="center" valign="top">
<checkbox disabled="true" />
</cell>
<cell align="left" valign="top">
<label value="2014-JAN-05 11:20" />
</cell>
<cell align="left" valign="top">
<label value="2015-APR-20 16:47" />
</cell>
<cell align="right" valign="top">
<hbox>
<toolbarbutton image="http://icons.iconseeker.com/png/fullsize/aspnet/edit-9.png" tooltiptext="Edit Details" disabled="true" />
<toolbarbutton image="http://www.stmarks.net/stmsys/extensions/fieldtypes/ngen_file_field/images/trash-icon.gif" tooltiptext="Delete" disabled="true" />
</hbox>
</cell>
</row>
<row>
<textbox rows="4" value="Some remarks about the emoloyee added by the user Dan Brown. Maybe the employee has something to do with Da Vinci. Maybe he is coder or something like that. We shall be aware about him." width="100%" readonly="true" />
<cell align="left" valign="top">
<label value="Dan Brown" />
</cell>
<cell align="center" valign="top">
<checkbox value="true" />
</cell>
<cell align="left" valign="top">
<label value="2014-JAN-01 11:20" />
</cell>
<cell align="left" valign="top">
<label value="2015-JUL-20 16:47" />
</cell>
<cell align="right" valign="top">
<hbox>
<toolbarbutton image="http://icons.iconseeker.com/png/fullsize/aspnet/edit-9.png" tooltiptext="Edit Details" />
<toolbarbutton image="http://www.stmarks.net/stmsys/extensions/fieldtypes/ngen_file_field/images/trash-icon.gif" tooltiptext="Delete" />
</hbox>
</cell>
</row>
<row>
<cell align="right" valign="bottom" colspan="6">
<button label="Add Note" image="http://quan-li-resort.googlecode.com/svn/QLKS/QLKS/Images/addIcon.gif" />
</cell>
</row>
</rows>
</grid>
</div>
</tabpanel>
</tabpanels>
</tabbox>
<div height="10px" width="100%"></div>
<div align="right" height="20" width="1000px">
<button label="Cancel Changes" image="http://www.veryicon.com/icon/ico/System/Silk/cancel.ico" />
<button label="Submit Changes" image="https://www.w3.org/Amaya/images/floppy.gif" />
</div>
</div>
</vlayout>
</div>
</hlayout>
</div>
</zk>TestComposer.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 TestComposer extends GenericForwardComposer{
public void doAfterCompose(Component comp) throws Exception {
super.doAfterCompose(comp);
}
public void onClick$btn(Event e) throws InterruptedException{
Messagebox.show("Hi btn");
}
}
tree.zulzul <tree id="tree" width="100%" height="585px">
<treecols>
<treecol label="Teams / Groups" />
</treecols>
<treechildren>
<treeitem>
<treerow>
<treecell label="Projects" />
</treerow>
<treechildren>
<treeitem>
<treerow>
<treecell label="IT Projects" />
</treerow>
<treechildren>
<treeitem>
<treerow>
<treecell label="Sales Portal" />
</treerow>
</treeitem>
<treeitem>
<treerow>
<treecell label="Staff Editor" />
</treerow>
</treeitem>
<treeitem>
<treerow>
<treecell label="Web Migration" />
</treerow>
</treeitem>
</treechildren>
</treeitem>
<treeitem>
<treerow>
<treecell label="Other Projects" />
</treerow>
<treechildren>
<treeitem>
<treerow>
<treecell label="Teambuilding 2016" />
</treerow>
</treeitem>
</treechildren>
</treeitem>
</treechildren>
</treeitem>
<treeitem>
<treerow>
<treecell label="Training Groups" />
</treerow>
<treechildren>
<treeitem>
<treerow>
<treecell label="Pharma Training" />
</treerow>
</treeitem>
<treeitem>
<treerow>
<treecell label="Social Training" />
</treerow>
</treeitem>
</treechildren>
</treeitem>
</treechildren>
</tree>
companiesTab.zulzul <grid>
<columns>
<column width="60px">Status</column>
<column>Company Name</column>
<column width="150px">Company Valid From</column>
<column width="150px">Company Valid Until</column>
<column width="60px">Enabled</column>
</columns>
<rows sclass="narrow">
<row>
<label value="Active" />
<label value="NonStop Recruitment" />
<label value="2010-JAN-01" />
<label value=" " />
<cell align="center">
<checkbox />
</cell>
</row>
<row>
<label value="Active" />
<label value="Oliver Hartman" />
<label value="2013-AUG-01" />
<label value=" " />
<cell align="center">
<checkbox />
</cell>
</row>
<row>
<label value="Active" />
<label value="Another Company" />
<label value="2016-JAN-01" />
<label value=" " />
<cell align="center">
<checkbox />
</cell>
</row>
<row>
<label value="Closed" />
<label value="Former Company" />
<label value="2012-JAN-01" />
<label value="2014-DEC-31 " />
<cell align="center">
<checkbox />
</cell>
</row>
<row>
<cell colspan="5" align="left">
<checkbox label="Hide Closed Companies" />
</cell>
</row>
</rows>
</grid>