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 AMlinkprint certain portion of a page
27guest71.204.2.1871om8m4eJul 30, 2018 9:13:17 PMlinkresources
index.zulzul<<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c" ?>
<zk >
<window mode="modal" contentStyle="overflow:auto;" id="orderPackingSlipWinId"
border="normal" onCreate="self.focus()" closable="true"
title="" ><caption><div>
<button label="Print" mold="trendy" onClick="printme(this,'orderPackingSlipWinId',800,500)">
</button>
</div></caption>
<script><![CDATA[
function printme(obj,id,height,width) {
DispWin = window.open('', '', 'toolbar=no,memubar=no,status=no,width='+width+'px,height='+height+"px'");
DispWin.document.write('<html><head><title>Print Preview</title>');
for(var i=0;i<document.styleSheets.length;i++){
if(document.styleSheets[i].href != null) {
DispWin.document.write('<link rel="stylesheet" type="text/css" href="'+document.styleSheets[i].href+'">');
}
}
DispWin.document.write('</head>');
DispWin.document.write('<body>');
DispWin.document.write($(obj.$f(id)).formhtml());
DispWin.document.write('<p><input type="button" value="Print This Page" onclick="print()"/></p>');
DispWin.document.write('</body></html>');
DispWin.document.close();
}
(function($) {
var oldHTML = $.fn.html;
$.fn.formhtml = function() {
if (arguments.length) return oldHTML.apply(this,arguments);
$("input,button", this).each(function() {
this.setAttribute('value',this.value);
this.setAttribute('readonly',true);
});
$("textarea", this).each(function() {
// updated - thanks Raja!
this.innerHTML = this.value;
});
$("input:radio,input:checkbox", this).each(function() {
// im not really even sure you need to do this for "checked"
// but what the heck, better safe than sorry
if (this.checked) this.setAttribute('checked', 'checked');
else this.removeAttribute('checked');
});
$("option", this).each(function() {
// also not sure, but, better safe...
if (this.selected) this.setAttribute('selected', 'selected');
else this.removeAttribute('selected');
});
return oldHTML.apply(this);
};
//optional to override real .html() if you want
// $.fn.html = $.fn.formhtml;
})(jQuery);
]]></script>
<style>
div.z-column-cnt, div.z-row-cnt {
color: #262626;
font-family: arial;
font-size: 12px;
font-weight: bold;
}
div.z-grid-header tr.z-columns, div.z-grid-header tr.z-auxhead {
background: #f5f5f5;
background-repeat: repeat-x;
}
tr.z-grid-odd td.z-row-inner, tr.z-grid-odd .z-cell, tr.z-grid-odd {
background: none repeat scroll 0 0 #FFFFFF;
}
tr.z-grid-odd td.z-row-inner, tr.z-grid-odd .z-cell {
background-color: #ffffff;
border-bottom: 0px solid #262626;
border-top: 0px solid #262626;
}
tr.z-row td.z-row-inner, tr.z-row .z-cell {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: white transparent #262626 #262626;
border-style: solid;
border-width: 1px;
padding: 4px 4px 4px 6px;
}
tr.z-row-over > tr.z-row-inner,tr.z-row-over > .z-cell {
background-image:url();
}
div.z-grid {
background: url(" ") repeat scroll 0 0 #FFFFFF;
border-top: 0px solid #262626;
border-left: 0px solid #262626;
border-right: 1px solid #262626;
overflow: hidden;
}
div.z-grid-header tr.z-columns, div.z-grid-header tr.z-auxhead {
background: none repeat-x scroll 0 0 #f5f5f5;
}
div.z-grid-header tr.z-columns, div.z-grid-header tr.z-auxhead {
background-color: #f5f5f5;
background-image: url();
background-repeat: repeat-x;
}
div.z-grid-header, div.z-grid-header tr, div.z-grid-footer {
border: 1px solid #262626;
width: 100%;
}
div.z-grid-header th.z-column, div.z-grid-header th.z-auxheader {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: -moz-use-text-color #CFCFCF #CFCFCF white;
border-style: none solid solid;
border-width: medium 1px 1px;
border-bottom: 1px solid #CFCFCF;
border-left: 1px solid white;
border-right: 1px solid #262626;
border-top: medium none;
font-size: 12px;
font-weight: normal;
overflow: hidden;
padding: 0 0 0 1px;
white-space: nowrap;
}
</style>
<listbox style="border:0px none;">
</listbox>
<zk forEach="${requestScope['orderViewBeans']}">
<separator height="40px"></separator>
<hbox align="center" pack="center" style="background-color:#333333;width:1100px;height:30px;">
<label value="${c:l('text.packinglist')}" style="color:#ffffff;font-size: 20px;"/>
</hbox>
<separator height="20px"></separator>
<hlayout style="bgcolor:#333333;width:1100px;">
<hbox align="start" pack="start" style="bgcolor:#333333;width:550px;">
<label value="Company Name:" style="font-weight:bold"/>
<label value="${each.companyName}" style="padding-left:3px;"/>
</hbox>
<hbox align="end" pack="end" style="bgcolor:#333333;width:460px;">
<label value="Order Date:" style="font-weight:bold"/>
<label value="${each.orderDate}" style="padding-left:3px;"/>
</hbox>
</hlayout>
<separator height="10px"/>
<label value="${c:l('text.ordernumber')}:"/> <label value="${each.orderNr}" style="padding-left:3px;"/>
<separator height="10px"/>
<label value="${c:l('text.orderthanks')}"/>
<separator height="10px"/>
<vlayout>
<label value="${c:l('text.orderproblem')}"/>
<label value="${each.custSvcName}"/>
<a href="mailto:${each.custSvcEmail}" label="${each.custSvcEmail}"></a>
<label value="${each.custSvcPhone}"/>
</vlayout>
<separator height="10px"></separator>
<grid width="1100px">
<columns>
<column label="${c:l('text.billingaddress')}"/>
<column label="${c:l('text.deliveryaddress')}"/>
</columns>
<rows>
<row>
<cell>
<vlayout if="${each.billingAddress.orderAddress != null}">
<label value="${each.billingAddress.addressName}" />
<label value="${each.billingAddress.addressLine1}" />
<label value="${each.billingAddress.addressLine2}" />
<label value="${each.billingAddress.addressLine3}" />
<label value="${each.billingAddress.city}" />
<label value="${each.billingAddress.state}" />
<label value="${each.billingAddress.zipcode}" />
<label value="${each.billingAddress.phone}" />
<label value="${each.billingAddress.email}" />
</vlayout>
</cell>
<cell>
<vlayout if="${each.shippingAddress.orderAddress != null}">
<label value="${each.shippingAddress.addressName}" />
<label value="${each.shippingAddress.addressLine1}" />
<label value="${each.shippingAddress.addressLine2}" />
<label value="${each.shippingAddress.addressLine3}" />
<label value="${each.shippingAddress.city}" />
<label value="${each.shippingAddress.state}" />
<label value="${each.shippingAddress.zipcode}" />
<label value="${each.shippingAddress.phone}" />
<label value="${each.shippingAddress.email}" />
</vlayout>
</cell>
</row>
</rows>
</grid>
<zk forEach="${each.orderVendorViewBeans}">
<zk if="${each.vendorViewable}">
<grid width="1100px" >
<columns>
</columns>
<rows>
<row >
<cell>
<label value="${c:l('text.vendornumber')} " />
<label value="${each.vendorNr}" />
</cell>
<cell>
<label value="${c:l('text.shippingtype')} " />
<label value="${each.shippingType}" />
</cell>
</row>
</rows>
</grid>
<grid width="1100px">
<columns>
<column label="${c:l('text.skunumber')}"/>
<column label="${c:l('text.itemname')}" />
<!-- <column label="${c:l('text.options')}" /> -->
<column label="${c:l('text.qty')}" width="110px"/>
<column label="${c:l('text.qtyacknowledged')}" />
<column label="${c:l('text.qtyshipped')}" width="110px"/>
<column label="${c:l('text.qtylefttoship')}"/>
</columns>
<rows>
<zk forEach="${each.orderItemViewBeans}">
<row>
<cell>
<label value="${each.itemSkuNumber}" />
</cell>
<cell>
<label value="${each.itemName}"/><label value="${each.variation}"/>
<label value="${each.optionText}"/>
</cell>
<!-- <cell>
<label value="," />
</cell> -->
<cell>
<label value="${each.qty}" />
</cell>
<cell>
<label value="${each.qtyAcknowledged}" />
</cell>
<cell>
<label value="${each.qtyShipped}" />
</cell>
<cell>
<label value="${each.qtyLeftToShip}" />
</cell>
</row>
</zk>
</rows>
</grid>
</zk>
</zk>
</zk>
<separator height="20px"></separator>
</window>
</zk>