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 AMlinkMedList Manager
83okspry134.68.31.2272mbh4b5Dec 10, 2012 4:20:06 PMlinkresources
index.zulzul<zk>
<style>
.z-menubar-hor {
background-image:none;
background-color:#f3f3ff;
border:1px solid #bbb;
}
.z-menu {
background-image:none;
background-color:#f3f3ff;
}
.z-menu-body-over .z-menu-inner-m, .z-menu-body-seld .z-menu-inner-m, .z-menu-item-body-over .z-menu-item-inner-m {
background-image:none;
background-color:#f3f3ff;
}
.z-menu-body-over .z-menu-inner-l, .z-menu-body-seld .z-menu-inner-l, .z-menu-item-body-over .z-menu-item-inner-l {
background-image:none;
background-color:#f3f3ff;
}
.z-menu-body-over .z-menu-inner-r, .z-menu-body-seld .z-menu-inner-r, .z-menu-item-body-over .z-menu-item-inner-r {
background-image:none;
background-color:#f3f3ff;
}
-btn-seld {
background-image:none;
background-color:#f3f3ff;
border:1px solid #bbb;
}
.z-menu-body .z-menu-inner-m div {
padding-left:3px;
}
div.z-grid {
background-image:none;
background-color:#fff;
border-bottom:1px solid #bbb;
}
div.z-grid-header th.z-column {
background-image:none;
background-color:#fff;
border-bottom:1px solid #bbb;
border-top:1px solid #bbb;
border-right:none;
border-left:none;
}
div.z-grid-header th.z-auxheader {
background-image:none;
background-color:#f4f4f4;
border-bottom:none;
border-top:none;
border-right:none;
border-left:none;
}
div.z-grid-header tr.z-columns, div.z-grid-header tr.z-auxhead,
div.z-grid-body, div.z-grid-footer, div.z-grid-header, div.z-grid-header tr, div.z-grid-footer, {
background-image:none;
background-color:#fff;
border-bottom:none;
border-top:none;
border-right:none;
border-left:none;
}
.z-rows, .z-row, .z-cell, div.z-row-cnt, div.z-row-cnt,
tr.z-row td.z-row-inner, div.z-row-cnt, td.z-row-inner,
tr.z-grid-odd td.z-row-inner, tr.z-grid-odd {
background-image:none;
border:none;
background-color:#fff;
padding-top:4px;
}
.DC.z-button .z-button-tl, .DC.z-button .z-button-tr,
.DC.z-button .z-button-bl, .DC.z-button .z-button-br,
.DC.z-button .z-button-tm, .DC.z-button .z-button-bm,
.DC.z-button .z-button-cl, .DC.z-button .z-button-cr {
background-image:none;
}
.DC.z-button .z-button-cm {
background-image:none;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ddd), to(#b6b6b6)) !important;
border:1px solid #bbb;
padding-top:4px;
padding-bottom:4px;
padding-left:5px;
padding-right:5px;
border-radius:8px;
color:#777;
font-size:1.2em;
text-shadow:-1px 1px #ddd;
font-weight:bold;
font-family:helvetica;
}
.DC.z-button:hover .z-button-cm {
background-image:none;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ddd), to(#b6b6b6)) !important;
border:1px solid #bbb;
padding-top:4px;
padding-bottom:4px;
padding-left:5px;
padding-right:5px;
border-radius:8px;
color:#fff;
font-size:1.2em;
text-shadow:-1px 1px #777;
font-weight:bold;
font-family:helvetica;
}
.cart.z-button .z-button-tl, .cart.z-button .z-button-tr,
.cart.z-button .z-button-bl, .cart.z-button .z-button-br,
.cart.z-button .z-button-tm, .cart.z-button .z-button-bm,
.cart.z-button .z-button-cl, .cart.z-button .z-button-cr {
background-image:none;
}
.cart.z-button .z-button-cm {
background-image:none;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ddd), to(#b6b6b6)) !important;
border:1px solid #bbb;
padding-top:4px;
padding-bottom:4px;
padding-left:5px;
padding-right:5px;
border-radius:8px;
color:#777;
font-size:1.2em;
text-shadow:-1px 1px #ddd;
font-weight:bold;
font-family:helvetica;
}
.cart.z-button:hover .z-button-cm {
background-image:none;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ddd), to(#b6b6b6)) !important;
border:1px solid #bbb;
padding-top:4px;
padding-bottom:4px;
padding-left:5px;
padding-right:5px;
border-radius:8px;
color:#fff;
font-size:1.2em;
text-shadow:-1px 1px #777;
font-weight:bold;
font-family:helvetica;
}
.blue {
color:#295169;
text-shadow:1px 1px 2px #E8F6FF;
border:1px solid #99D5F7;
height:45px;
font-size:10pt;
background: rgb(220,237,248); /* Old browsers */
background: -moz-linear-gradient(top, rgba(220,237,248,1) 0%, rgba(170,219,248,1) 50%, rgba(151,212,247,1) 52%, rgba(185,224,247,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(220,237,248,1)), color-stop(50%,rgba(170,219,248,1)), color-stop(52%,rgba(151,212,247,1)), color-stop(100%,rgba(185,224,247,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(220,237,248,1) 0%,rgba(170,219,248,1) 50%,rgba(151,212,247,1) 52%,rgba(185,224,247,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(220,237,248,1) 0%,rgba(170,219,248,1) 50%,rgba(151,212,247,1) 52%,rgba(185,224,247,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(220,237,248,1) 0%,rgba(170,219,248,1) 50%,rgba(151,212,247,1) 52%,rgba(185,224,247,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(220,237,248,1) 0%,rgba(170,219,248,1) 50%,rgba(151,212,247,1) 52%,rgba(185,224,247,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dcedf8', endColorstr='#b9e0f7',GradientType=0 ); /* IE6-9 */
}
.red {
color:#fff;
text-shadow:1px 1px 2px #9B0F1D;
border:1px solid #B92D3D;
height:45px;
font-size:10pt;
background: rgb(255,69,91); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,69,91,1) 0%, rgba(220,0,26,1) 50%, rgba(211,10,27,1) 52%, rgba(213,5,26,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,69,91,1)), color-stop(50%,rgba(220,0,26,1)), color-stop(52%,rgba(211,10,27,1)), color-stop(100%,rgba(213,5,26,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,69,91,1) 0%,rgba(220,0,26,1) 50%,rgba(211,10,27,1) 52%,rgba(213,5,26,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,69,91,1) 0%,rgba(220,0,26,1) 50%,rgba(211,10,27,1) 52%,rgba(213,5,26,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,69,91,1) 0%,rgba(220,0,26,1) 50%,rgba(211,10,27,1) 52%,rgba(213,5,26,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,69,91,1) 0%,rgba(220,0,26,1) 50%,rgba(211,10,27,1) 52%,rgba(213,5,26,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff455b', endColorstr='#d5051a',GradientType=0 ); /* IE6-9 */
}
.encourage.z-button .z-button-tl, .encourage.z-button .z-button-tr,
.encourage.z-button .z-button-bl, .encourage.z-button .z-button-br,
.encourage.z-button .z-button-tm, .encourage.z-button .z-button-bm,
.encourage.z-button .z-button-cl, .encourage.z-button .z-button-cr {
background-image:none;
}
.encourage.z-button .z-button-cm {
background-image:none;
background: rgb(191,210,85); /* Old browsers */
background: -moz-linear-gradient(top, rgba(191,210,85,1) 0%, rgba(142,185,42,1) 50%, rgba(114,170,0,1) 51%, rgba(158,203,45,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(191,210,85,1)), color-stop(50%,rgba(142,185,42,1)), color-stop(51%,rgba(114,170,0,1)), color-stop(100%,rgba(158,203,45,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfd255', endColorstr='#9ecb2d',GradientType=0 ); /* IE6-9 */
border:1px solid #517700;
padding-top:1px;
padding-bottom:1px;
padding-left:2px;
padding-right:2px;
border-radius:8px;
color:#fff;
font-size:.8em;
text-shadow:-1px 1px #517700;
font-weight:normal;
font-family:helvetica;
}
.encourage.z-button:hover .z-button-cm {
background-image:none;
background: rgb(107,153,0); /* Old browsers */
background: -moz-linear-gradient(top, rgba(107,153,0,1) 0%, rgba(114,170,0,1) 21%, rgba(114,170,0,1) 52%, rgba(191,210,85,1) 96%, rgba(114,170,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(107,153,0,1)), color-stop(21%,rgba(114,170,0,1)), color-stop(52%,rgba(114,170,0,1)), color-stop(96%,rgba(191,210,85,1)), color-stop(100%,rgba(114,170,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(107,153,0,1) 0%,rgba(114,170,0,1) 21%,rgba(114,170,0,1) 52%,rgba(191,210,85,1) 96%,rgba(114,170,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(107,153,0,1) 0%,rgba(114,170,0,1) 21%,rgba(114,170,0,1) 52%,rgba(191,210,85,1) 96%,rgba(114,170,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(107,153,0,1) 0%,rgba(114,170,0,1) 21%,rgba(114,170,0,1) 52%,rgba(191,210,85,1) 96%,rgba(114,170,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(107,153,0,1) 0%,rgba(114,170,0,1) 21%,rgba(114,170,0,1) 52%,rgba(191,210,85,1) 96%,rgba(114,170,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6b9900', endColorstr='#72aa00',GradientType=0 ); /* IE6-9 */
border:1px solid #517700;
padding-top:1px;
padding-bottom:1px;
padding-left:2px;
padding-right:2px;
border-radius:8px;
color:#fff;
font-size:.8em;
text-shadow:-1px 1px #517700;
font-weight:normal;
font-family:helvetica;
}
.medName {
font-weight:bold;
color:#666;
}
.comment {
height:33px;
padding:10px;
border:1px solid #bbb;
overflow-y:auto;
overflow-x:hidden;
box-shadow:0 0 3px 1px #ccc inset;
}
.sig {
color:#666;
}
.warning {
color:#E8770D;
padding:2px;
}
</style>
<borderlayout>
<north border="0">
<div>
<menubar id="menubar">
<menu label="All Meds">
<menupopup>
<menuitem label="Poor Adherence"
onClick="alert(self.label)" />
<menuitem label="Recently changed"
onClick="alert(self.label)" />
<menuseparator />
<menu label="Other">
<menupopup>
<menuitem/>
</menupopup>
</menu>
</menupopup>
</menu>
<menu label="Any Indication">
<menupopup>
<menu label="Chronic">
<menupopup>
<menuitem label="Diabetes"/>
<menuitem label="Hypertension"/>
</menupopup>
</menu>
<menu label="Acute">
<menupopup>
<menuitem label="Strep Throat"/>
<menuitem label="Broken wrist"/>
</menupopup>
</menu>
</menupopup>
</menu>
<menu label="All Prescribers">
<menupopup>
<menuitem label="Bills, Julia" onClick="alert(self.label)" />
<menuitem label="Crank, Webster" onClick="alert(self.label)" />
</menupopup>
</menu>
<menu label="Tags">
<menupopup>
<menuitem label="textbox" />
</menupopup>
</menu>
<menu label="All Dates">
<menupopup>
<menu label="Start Date">
<menupopup>
<menuitem label="One month ago"/>
<menuitem label="Two months ago"/>
<menuitem label="One year ago"/>
</menupopup>
</menu>
<menu label="Last Filled">
<menupopup>
<menuitem label="One month ago"/>
<menuitem label="Two months ago"/>
<menuitem label="One year ago"/>
</menupopup>
</menu>
</menupopup>
</menu>
</menubar>
<div style="padding:5px;">
<label value="Your Cart (0)" style="float:right;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ddd), to(#b6b6b6)) !important;
border:1px solid #bbb;
padding-top:4px;
padding-bottom:4px;
padding-left:5px;
padding-right:5px;
margin-bottom:5px;
border-radius:8px;
color:#fff;
font-size:1.1em;
text-shadow:-1px 1px #777;
font-weight:bold;
font-family:helvetica;"/>
</div>
</div>
</north>
<center style="border:1px solid #bbb;">
<div height="80%" >
<grid height="100%" style="border:none; overflow-y:auto;">
<auxhead>
<auxheader colspan="6">
<button label="D/C" sclass="DC"/>
<button label="Renew" sclass="cart"/>
</auxheader>
</auxhead>
<columns>
<column id="check" width="6%">
<div style="background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#d6d6d6)) !important;
border:1px solid #bbb;
margin-left:5px;
margin-top:5px;
margin-bottom:5px;
margin-right:0px;
border-radius:8px;
color:#fff;
font-size:1.1em;
text-shadow:-1px 1px #777;
font-weight:bold;
font-family:helvetica;">
<checkbox style="padding-left:5px;"/>
<image src="http://www.famfamfam.com/lab/icons/silk/icons/bullet_arrow_down.png"/>
</div>
</column>
<column width="9%"/>
<column label="Medication" width="30%" style="color:#888; font-weight:bold; font-size:10pt;"/>
<column label="Patient Reports" width="15%" align="center" style="color:#888; font-weight:bold; font-size:10pt;"/>
<column label="Rx Records" width="15%" align="center" style="color:#888; font-weight:bold; font-size:10pt;"/>
<column label="Comments" width="25%" style="color:#888; font-weight:bold; font-size:10pt;"/>
</columns>
<rows style="line-height:20px;">
<row>
<checkbox style="padding-left:5px;"/>
<button label="Urge to take" sclass="encourage"/>
<vlayout>
<label value="Acetaminophen 85MG" sclass="medName" style="color:#E8770D;"/>
<hlayout>
<hlayout sclass="warning">
<image src="http://www.famfamfam.com/lab/icons/silk/icons/error.png"/>
<label value="Dose Changed" style="font-size:8pt;"/>
</hlayout>
<label sclass="sig" value="Take 30MG daily until you die"/>
</hlayout>
</vlayout>
<vlayout sclass="blue">
<label value="Patient confirms taking"/>
<label value="Today"/>
</vlayout>
<vlayout sclass="red">
<label value="Adherence 60%"/>
<label value="Refills remaining: 2"/>
</vlayout>
<div sclass="comment">
<label value="Patient reports being a total weirdo. Interpret today's results with caution. -- Nurse Jackie"/>
</div>
</row>
<row>
<checkbox style="padding-left:5px;"/>
<button label="Urge to take" sclass="encourage"/>
<div/>
<vlayout>
<label value="Lisinopril 30MG" sclass="medName"/>
<label sclass="sig" value="Take 30MG daily until you die"/>
</vlayout>
<vlayout sclass="blue">
<label value="Patient confirms taking"/>
<label value="Today"/>
</vlayout>
<vlayout sclass="blue">
<label value="Adherence 85%"/>
<label value="Refills remaining: 1"/>
</vlayout>
</row>
<row>
<checkbox style="padding-left:5px;"/>
<button label="Urge to take" sclass="encourage"/>
<div/>
<vlayout>
<label value="Acetaminophen 85MG" sclass="medName"/>
<label sclass="sig" value="Take 30MG daily until you die"/>
</vlayout>
<vlayout sclass="blue">
<label value="Patient confirms taking"/>
<label value="Today"/>
</vlayout>
<vlayout sclass="red">
<label value="Adherence 60%"/>
<label value="Refills remaining: 2"/>
</vlayout>
</row>
<row>
<checkbox style="padding-left:5px;"/>
<button label="Urge to take" sclass="encourage"/>
<div/>
<vlayout>
<label value="Acetaminophen 85MG" sclass="medName"/>
<label sclass="sig" value="Take 30MG daily until you die"/>
</vlayout>
<vlayout sclass="blue">
<label value="Patient confirms taking"/>
<label value="Today"/>
</vlayout>
<vlayout sclass="red">
<label value="Adherence 60%"/>
<label value="Refills remaining: 2"/>
</vlayout>
</row>
<row>
<checkbox style="padding-left:5px;"/>
<button label="Urge to take" sclass="encourage"/>
<div/>
<vlayout>
<label value="Acetaminophen 85MG" sclass="medName"/>
<label sclass="sig" value="Take 30MG daily until you die"/>
</vlayout>
<vlayout sclass="blue">
<label value="Patient confirms taking"/>
<label value="Today"/>
</vlayout>
<vlayout sclass="red">
<label value="Adherence 60%"/>
<label value="Refills remaining: 2"/>
</vlayout>
</row>
</rows>
</grid>
</div>
</center>
<east border="0">
</east>
<south border="0" style="border-right:1px solid #bbb; border-bottom:1px solid #bbb; border-left:1px solid #bbb; background:#f8f8f8; box-shadow:0px 2px 7px 4px #bbb;">
<hlayout style="padding:5px;">
<button label="Save" sclass="cart"/>
<div>
<a label="Cancel"/>
</div>
</hlayout>
</south>
</borderlayout>
</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");
}
}