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
1guest115.249.163.1702agqqvrAug 4, 2017 6:33:25 AMlinkresources
index.zulzul<?page id="p_createreport_report" title="Dynamic Reports" contentType="text/html;charset=UTF-8"?>
<window id="w_createreport" sclass="expstyle1" border ="normal" width="100%" height="100%" contentStyle="overflow:auto">
<style>
.expstyle1 .z-window-modal-tl, .expstyle1 .z-window-modal-tr, .expstyle1 .z-window-modal-tm,
.expstyle1 .z-window-modal-cl, .expstyle1 .z-window-modal-cr, .expstyle1 .z-window-modal-cm,
.expstyle1 .z-window-modal-bl, .expstyle1 .z-window-modal-br, .expstyle1 .z-window-modal-bm,
.expstyle1 .z-window-modal-hl, .expstyle1 .z-window-modal-hr, .expstyle1 .z-window-modal-hm
{
background: #007DC8;
}
.expstyle1 .z-window-modal-header
{
background: #007DC8;
}
.expstyle1 .z-textbox
{
text-transform:uppercase;
}
</style>
<caption id="index"><!--
<toolbarbutton id="english" label="English" width="50px"></toolbarbutton>
<toolbarbutton id="german" label="German" width="50px"></toolbarbutton>
--></caption>
<div id="detail_div" style="overflow:auto">
<groupbox id="template_group" width="100%" open="false" mold="3d" >
<caption id="load_caption" label="Load Template"/>
<grid>
<columns>
<column width="10%"></column>
<column></column>
</columns>
<rows>
<row>
<label id="template_label" value="Upload Template"></label>
<combobox id="template_combo"></combobox>
</row>
<row>
<label id="report_name" value="Report Name"></label>
<textbox id="rep_name_tb"></textbox>
</row>
</rows>
</grid>
</groupbox>
<groupbox id="create_group" width="100%" open="false" mold="3d" >
<caption id="create_caption" label="Create New"/>
<grid id="report_grid">
<columns>
<column width="10%"></column>
<column></column>
</columns>
<rows id="report_rows">
<row>
<label id="column_label" value="No of Columns"/><intbox id="no_of_columns" ></intbox>
</row>
<row id="table_row" visible="false">
<label id="tb_label" value="Table Name"></label>
<bandbox mold="rounded" id="table_band" text="Select Tables" readonly="true" autodrop="true">
<bandpopup height="null">
<listbox id="table_list" multiple="true" rows="8" width="275px" checkmark="true"></listbox>
</bandpopup>
</bandbox>
</row>
<row id="select_row" visible="false">
<label id="sel_label" value="SQL Select"></label>
<div id="select_div" >
</div>
</row>
<row id="wh_row" visible="false">
<label id="wh_label" value="SQL Where"></label>
<div id="where_div">
<div>
<combobox mold="rounded" readonly="true" id="where_combo"></combobox>
<combobox mold="rounded" readonly="true" id="compare_combo">
<comboitem label="="></comboitem>
<comboitem label="!="></comboitem>
<comboitem label="<"></comboitem>
<comboitem label=">"></comboitem>
<comboitem label="like"></comboitem>
<comboitem label="between"></comboitem>
<comboitem label="is"></comboitem>
<comboitem label="is not"></comboitem>
</combobox>
<textbox id="value_tb" visible = "false"></textbox>
<textbox id="value_tb2" visible = "false"></textbox>
<button id="add_button" label="+" visible = "false"></button>
</div>
</div>
</row>
<row id="order_row" visible="false">
<label id="ord_label" value="Order By"></label>
<bandbox mold="rounded" readonly="true" autodrop="true">
<bandpopup height="null">
<listbox id="order_list" multiple="true" rows="8" width="275px" checkmark="true" fixedLayout="true"></listbox>
</bandpopup>
</bandbox>
</row>
<row id="column_row" visible="false">
<label id="col_label" value="Column Details"></label>
</row>
<row id="date_row" visible="false">
<label id="date_label" value="Date Format"></label>
<combobox mold="rounded" id="date_format" readonly="true">
<comboitem label="dd/MM/yyyy"></comboitem>
<comboitem label="dd-MM-yyyy"></comboitem>
<comboitem label="MM/dd/yyyy"></comboitem>
<comboitem label="yyyy-MM-dd"></comboitem>
</combobox>
</row>
<row id="orientation_row" visible="false">
<label id="rep_or" value="Report Orientation"></label><div><combobox mold="rounded" id="rep_or_combo"><comboitem label="PORTRAIT"></comboitem><comboitem label="LANDSCAPE"></comboitem></combobox></div>
</row>
<row id="name_row" visible="false">
<label id="name_lbl" value="Report Name"></label><textbox id="name_tb"></textbox>
</row>
</rows>
</grid>
<groupbox id="view_columns" width="100%" open="false" visible="false">
<caption>
<checkbox id="chkb6" checked="false" label="Customize Column Headers"/>
</caption>
<attribute name="onOpen"><![CDATA[
chkb6.setChecked(self.isOpen());
]]></attribute>
<grid>
<columns>
<column width="10%"></column>
<column></column>
</columns>
<rows>
<row id="column_header_row" >
<label id="col_head_label" value="Column Header Detail"></label>
<div>
<label id="head_color" value="Background Color"></label>
<combobox mold="rounded" id="bg_combo" readonly="true">
<comboitem label="White"></comboitem>
<comboitem label="Blue"></comboitem>
<comboitem label="Red"></comboitem>
</combobox>
<label id="text_color" value="Text Color"></label>
<combobox mold="rounded" id="txt_combo" readonly="true">
<comboitem label="Black"></comboitem>
<comboitem label="Blue"></comboitem>
<comboitem label="Red"></comboitem>
</combobox>
<label id="border" value="Border"></label>
<combobox mold="rounded" id="border_combo" readonly="true">
<comboitem label="Dotted"></comboitem>
<comboitem label="No Border"></comboitem>
<comboitem label="Thin"></comboitem>
</combobox>
</div>
</row>
</rows>
</grid>
</groupbox>
<groupbox id="view_header" width="100%" open="false" visible="false">
<caption>
<checkbox id="chkb5" checked="false" label="Customize Header"/>
</caption>
<attribute name="onOpen"><![CDATA[
chkb5.setChecked(self.isOpen());
]]></attribute>
<grid>
<columns>
<column width="10%"></column>
<column></column>
</columns>
<rows>
<row id="header_row">
<label id="rep_label" value="Report Title"></label>
<div>
<textbox id="header"></textbox>
<label id="font_size" value="Font Size"></label>
<intbox id="fs_tb"></intbox>
<!--<label id="font_family" value="Font Family"></label>
--><!--<combobox mold="rounded" id="ff_combo" readonly="true">
<comboitem label="Arial"></comboitem>
<comboitem label="Times New Roman"></comboitem>
<comboitem label="Trebuchet"></comboitem>
</combobox>
--><label id="align" value="Align"></label>
<combobox mold="rounded" id="align_combo" readonly="true">
<comboitem label="CENTER"></comboitem>
<comboitem label="RIGHT"></comboitem>
<comboitem label="LEFT"></comboitem>
</combobox>
<label id="color" value="Color"></label>
<combobox mold="rounded" id="color_combo" readonly="true">
<comboitem label="RED"></comboitem>
<comboitem label="BLACK"></comboitem>
<comboitem label="BLUE"></comboitem>
</combobox>
</div>
</row>
</rows>
</grid>
</groupbox>
<groupbox id="view_footer" width="100%" open="false" visible="false">
<caption>
<checkbox id="chkb1" checked="false" label="Add Footer"/>
</caption>
<attribute name="onOpen"><![CDATA[
chkb1.setChecked(self.isOpen());
]]></attribute>
<grid>
<columns>
<column width="10%"></column>
<column></column>
</columns>
<rows>
<row id="footer_row">
<label id="footer_label" value="Footer"></label><div><combobox mold="rounded" id="type_combo" readonly="true"><comboitem label="SUM"></comboitem><comboitem label="COUNT"></comboitem></combobox><combobox mold="rounded" readonly="true" id="row_combo"></combobox></div>
</row>
</rows>
</grid>
</groupbox>
<groupbox id="view_image" width="100%" open="false" visible="false">
<caption>
<checkbox id="chkb2" checked="false" label="Add Image"/>
</caption>
<attribute name="onOpen"><![CDATA[
chkb2.setChecked(self.isOpen());
]]></attribute>
<grid>
<columns>
<column width="10%"></column>
<column></column>
</columns>
<rows>
<row id="image_row">
<label id="img_lbl" value="Image Banner"></label>
<div>
<button id="imguploadbtn" label="Choose Image" upload="true"></button>
<label id="width_lbl" value="Width"></label>
<intbox id="img_width"></intbox>
<label id="height_lbl" value="Height"></label>
<intbox id="img_height"></intbox>
<label id="img_align" value="Align"></label>
<combobox mold="rounded" id="img_combo" readonly="true">
<comboitem label="Right"></comboitem>
<comboitem label="Center"></comboitem>
<comboitem label="Left"></comboitem>
</combobox>
</div>
</row>
</rows>
</grid>
</groupbox>
<groupbox id="view_group" width="100%" open="false" visible="false">
<caption>
<checkbox id="chkb3" checked="false" label="Enable Grouping"/>
</caption>
<attribute name="onOpen"><![CDATA[
chkb3.setChecked(self.isOpen());
]]></attribute>
<grid>
<columns>
<column width="10%"></column>
<column></column>
</columns>
<rows>
<row id="group_row">
<label id="column_lbl" value="Header Column"></label>
<div>
<combobox mold="rounded" readonly="true" id="grp_combo"></combobox><!--
<label id="hdr_lbl" value="Header Label"></label>
<textbox id="hdr_tb"></textbox>
--></div>
</row>
<row>
<label id="column_lbl1" value="Footer Column"></label>
<div>
<combobox mold="rounded" readonly="true" id="grp_combo1"></combobox>
<label id="hdr_lbl1" value="Footer Label"></label>
<textbox id="hdr_tb1"></textbox>
<label id="cal_lbl" value="Calculation Method"></label>
<combobox mold="rounded" readonly="true" id="cal_combo">
<comboitem label="SUM"></comboitem>
<comboitem label="COUNT"></comboitem>
</combobox>
</div>
</row>
</rows>
</grid>
</groupbox>
<groupbox id="view_chart" width="100%" open="false" visible="false">
<caption>
<checkbox id="chkb4" checked="false" label="Add Chart"/>
</caption>
<attribute name="onOpen"><![CDATA[
chkb4.setChecked(self.isOpen());
]]></attribute>
<grid>
<columns>
<column width="10%"></column>
<column></column>
</columns>
<rows>
<row>
<label id="chart_lbl" value="Chart"></label>
<div>
<label id="chart_type_lbl" value="Type"></label>
<combobox mold="rounded" id="chart_type_combo" readonly="true">
<comboitem label="Bar Chart"></comboitem>
<comboitem label="Line Chart"></comboitem>
<comboitem label="Stacked Bar Chart"></comboitem>
<comboitem label="3D Bar Chart"></comboitem>
</combobox>
<label id="chart_pos_lbl" value="Position"></label>
<combobox mold="rounded" id="chart_pos_combo" readonly="true">
<comboitem label="Header"></comboitem>
<comboitem label="Footer"></comboitem>
</combobox>
<label id="chart_col_lbl1" value="Column (x)"></label>
<combobox mold="rounded" id="chart_col_combo1" readonly="true"></combobox>
<label id="chart_col_lbl2" value="Column (y)"></label>
<combobox mold="rounded" id="chart_col_combo2" readonly="true"></combobox>
</div>
</row>
</rows>
</grid>
</groupbox>
<groupbox id="view_scheduling" width="100%" open="false" visible="false">
<caption>
<checkbox id="chkb7" checked="false" label="Schedule Report"/>
</caption>
<attribute name="onOpen"><![CDATA[
chkb7.setChecked(self.isOpen());
]]></attribute>
<grid>
<columns>
<column width="10%"></column>
<column></column>
</columns>
<rows>
<row>
<label id="sch_lbl" value="Interval"></label>
<combobox mold="rounded" readonly="true" id="interval_combo">
<comboitem label="Daily"></comboitem>
<comboitem label="Weekly"></comboitem>
</combobox>
</row>
<row>
<label id="day_lbl" value="Time"></label>
<div>
<bandbox mold="rounded" readonly="true" id="day_band" autodrop="true" visible="false">
<bandpopup>
<listbox id="day_list" multiple="true" rows="7" width="200px" checkmark="true" fixedLayout="true">
<listitem label="Sunday"></listitem>
<listitem label="Monday"></listitem>
<listitem label="Tuesday"></listitem>
<listitem label="Wednesday"></listitem>
<listitem label="Thursday"></listitem>
<listitem label="Friday"></listitem>
<listitem label="Saturday"></listitem>
</listbox>
</bandpopup>
</bandbox>
<timebox id="schedule_tb" cols="12" format="short" mold="rounded" />
</div>
</row>
</rows>
</grid>
</groupbox>
</groupbox>
<menupopup id="edit_popup">
<menu label="Add Column">
<menupopup id ="column_popup">
</menupopup>
</menu>
</menupopup>
<div><button id="generate" label="View" disabled="true"></button></div>
</div>
<div id="report_div" align="right" visible="false" width="100%" height="100%">
<label id = "lb1" value="Select Format:" ></label><combobox mold="rounded" id="formatcb" readonly = "true" width="60px"><comboitem label="xls"/><comboitem label="rtf"/><comboitem label="csv"/><comboitem label="odt"/></combobox>
<button id="convert" label="Convert"/>
<button id="back" label="OK"></button>
<iframe id="PDFreport" height="95%" width="100%"></iframe>
</div>
</window>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");
}
}