Processing...

Suggested case list:

Using timer to refresh a grid

383guest172.69.33.12125nk0uiMay 7, 2020 7:23:47 AMlink

user model to move item to another listbox

120guest162.158.193.148d0n3krApr 2, 2020 5:28:28 AMlink

Disabled list item row passed to VM-1981

296fatih123160.83.36.13025nk0uiFeb 13, 2018 4:25:44 PMlink

Disabled list item row passed to VM-1981

295fatih123160.83.36.13025nk0uiFeb 13, 2018 4:25:16 PMlink

Disabled list item row passed to VM-1981

294fatih123160.83.36.13225nk0uiFeb 13, 2018 3:30:44 PMlink

grid sample with ListModel/RowRenderer

816guest80.82.2.1312vah9ajFeb 21, 2017 11:42:21 AMlink

grid sample with ListModel/RowRenderer

809guest175.98.113.1622vah9ajJan 26, 2017 9:19:33 AMlink

grid sample with ListModel/RowRenderer

196guest79.185.142.402vah9ajApr 26, 2014 10:53:57 PMlink

grid sample with ListModel/RowRenderer

195guest79.185.142.402vah9ajApr 26, 2014 10:53:54 PMlink

grid sample with ListModel/RowRenderer

194guest79.185.142.402vah9ajApr 26, 2014 10:53:51 PMlink

grid sample with ListModel/RowRenderer

193guest79.185.142.402vah9ajApr 26, 2014 10:53:48 PMlink

grid sample with ListModel/RowRenderer

192guest79.185.142.402vah9ajApr 26, 2014 10:53:44 PMlink

grid sample with ListModel/RowRenderer

191guest79.185.142.402vah9ajApr 26, 2014 10:53:40 PMlink

Hierarchy table without using ZK PE/EE

1aaknai151.28.135.2131s871daJul 29, 2013 11:02:46 PMlink

grid sample with ListModel/RowRenderer

128aaknai151.28.135.2132vah9ajJul 29, 2013 7:20:00 PMlink

user model to move item to another listbox

1TonyQ114.25.109.94d0n3krApr 21, 2012 10:43:27 AMlink

Using timer to refresh a grid

1TonyQ220.133.44.3725nk0uiFeb 17, 2012 3:17:34 AMlink

Fire a event from child iframe

1TonyQ220.133.44.372eupjotFeb 3, 2012 5:04:52 AMlink

Textbox input restriction sample

1TonyQ72.21.245.2431b3nlr0Dec 20, 2011 10:09:10 AMlink

Test web core taglib in ZUL

1TonyQ198.203.175.175ofqkemDec 17, 2011 3:36:08 AMlink

Latest 10 Fiddles :

Form Validation - Error

4cor3000162.158.119.1611oi7u2uSep 21, 2020 6:40:11 AMlink

Form Validation - Error

3cor3000162.158.119.1611oi7u2uSep 21, 2020 6:30:04 AMlink

Form Validation - Error

2guest162.158.166.2451oi7u2uSep 20, 2020 4:34:31 AMlink

Form Validation - Error

1guest162.158.166.2451oi7u2uSep 20, 2020 4:32:40 AMlink

Form Validation - Error

1guest162.158.166.2451kqrf4lSep 20, 2020 4:31:08 AMlink

Form Validation - Error

3guest162.158.166.24532urrm3Sep 20, 2020 4:30:43 AMlink

Form Validation - Error

2guest162.158.166.24532urrm3Sep 20, 2020 4:26:21 AMlink

Form Validation - Error

1guest162.158.166.24532urrm3Sep 20, 2020 4:23:31 AMlink

Form Validation - Error

1guest162.158.166.2456mp7gmSep 20, 2020 4:23:02 AMlink

Form Validation - Error

2guest162.158.166.2452hhmojiSep 20, 2020 4:22:51 AMlink

Inline editor with multiline textbox example

2guest141.101.98.70dri7ckJul 30, 2020 5:52:35 AMlink

resources

index.zulzul<zk xmlns:c="client"> <style> .text-center, .z-combobox-inp, .z-datebox-inp { text-align: center; } div.z-grid-body { #overflow: hidden; } div.z-column-cnt { padding: 7px 0 5px 5px; } tr.z-row td.z-row-inner,div.z-row-cnt { padding: 0 2px; } </style> <zscript><![CDATA[ List status = new java.util.ArrayList(); status.add("Ordered"); status.add("Shipped"); status.add("Awaiting"); status.add("Unavailable"); ListModel lm = new ListModelList(status); Date today = org.zkoss.util.Dates.today(); ]]></zscript> <grid width="850px"> <columns height="22px"> <column width="150px" label="Author"> <image src="/widgets/grid/inline_editing/img/ui-text-field.png" /> </column> <column width="350px" label="Title"> <image src="/widgets/grid/inline_editing/img/ui-text-field.png" /> </column> <column width="100px" label="Publish Date" align="center"> <image src="/widgets/grid/inline_editing/img/calendar-blue.png" /> </column> <column width="150px" label="Hardcover" align="center"> <image src="/widgets/grid/inline_editing/img/control-up-down.png" /> </column> <column width="100px" label="Status" align="center"> <image src="/widgets/grid/inline_editing/img/ui-combo-box-edit.png" /> </column> </columns> <rows> <row> <textbox inplace="true" onChange='self.style="font-weight:bold"' value="Philip Hensher" width="99%" /> <textbox inplace="true" multiline="true" onChange='self.style="font-weight:bold"' value="The Fit" width="99%" /> <datebox inplace="true" onChange='self.style="font-weight:bold"' value="${today}" width="99%" format="MM/dd/yyyy" /> <div class='text-center'> <!-- Inplace is pure client action so that use client way to modify the width--> <spinner inplace="true" onChange='self.style="font-weight:bold"' value="240" width="30px" c:onFocus='this.setWidth("55px")' c:onBlur='this.setWidth("30px")' /> <!-- Click text then users can edit number --> <label value="pages" onClick="self.previousSibling.focus=true" /> </div> <combobox width="99%" inplace="true" onChange='self.style="font-weight:bold"' value="Shipped" model="${lm}" /> </row> <row> <textbox inplace="true" onChange='self.style="font-weight:bold"' value="Philip Hensher" width="99%" /> <textbox inplace="true" multiline="true" onChange='self.style="font-weight:bold"' value="Kitchen Venom" width="99%" /> <datebox inplace="true" onChange='self.style="font-weight:bold"' value="${today}" width="99%" format="MM/dd/yyyy" /> <div class='text-center'> <spinner inplace="true" onChange='self.style="font-weight:bold"' value="336" width="30px" c:onFocus='this.setWidth("55px")' c:onBlur='this.setWidth("30px")' /> <label value="pages" onClick="self.previousSibling.focus=true" /> </div> <combobox width="99%" inplace="true" onChange='self.style="font-weight:bold"' value="Awaiting" model="${lm}" /> </row> <row> <textbox inplace="true" onChange='self.style="font-weight:bold"' value="Michael Greenberg" width="99%" /> <textbox inplace="true" multiline="true" onChange='self.style="font-weight:bold"' value="Hurry Down Sunshine" width="99%" /> <datebox inplace="true" onChange='self.style="font-weight:bold"' value="${today}" width="99%" format="MM/dd/yyyy" /> <div class='text-center'> <spinner inplace="true" onChange='self.style="font-weight:bold"' value="245" width="30px" c:onFocus='this.setWidth("55px")' c:onBlur='this.setWidth("30px")' /> <label value="pages" onClick="self.previousSibling.focus=true" /> </div> <combobox width="99%" inplace="true" onChange='self.style="font-weight:bold"' value="Awaiting" model="${lm}" /> </row> <row> <textbox inplace="true" onChange='self.style="font-weight:bold"' value="Michael Greenberg" width="99%" /> <textbox inplace="true" multiline="true" onChange='self.style="font-weight:bold"' value="Painless Vocabulary (Painless)" width="99%" /> <datebox inplace="true" onChange='self.style="font-weight:bold"' value="${today}" width="99%" format="MM/dd/yyyy" /> <div class='text-center'> <spinner inplace="true" onChange='self.style="font-weight:bold"' value="292" width="30px" c:onFocus='this.setWidth("55px")' c:onBlur='this.setWidth("30px")' /> <label value="pages" onClick="self.previousSibling.focus=true" /> </div> <combobox width="99%" inplace="true" onChange='self.style="font-weight:bold"' value="Ordered" model="${lm}" /> </row> <row> <textbox inplace="true" onChange='self.style="font-weight:bold"' value="Rick Perlstein" width="99%" /> <textbox inplace="true" multiline="true" onChange='self.style="font-weight:bold"' value="Nixonland: The Rise of a President and the Fracturing of America" width="99%" /> <datebox inplace="true" onChange='self.style="font-weight:bold"' value="${today}" width="99%" format="MM/dd/yyyy" /> <div class='text-center'> <spinner inplace="true" onChange='self.style="font-weight:bold"' value="896" width="30px" c:onFocus='this.setWidth("55px")' c:onBlur='this.setWidth("30px")' /> <label value="pages" onClick="self.previousSibling.focus=true" /> </div> <combobox width="99%" inplace="true" onChange='self.style="font-weight:bold"' value="Unavailable" model="${lm}" /> </row> <row> <textbox inplace="true" onChange='self.style="font-weight:bold"' value="Rick Perlstein" /> <textbox inplace="true" multiline="true" onChange='self.style="font-weight:bold"' value="Nixonland" /> <datebox inplace="true" onChange='self.style="font-weight:bold"' value="${today}" width="99%" format="MM/dd/yyyy" /> <div class='text-center'> <spinner inplace="true" onChange='self.style="font-weight:bold"' value="845" width="30px" c:onFocus='this.setWidth("55px")' c:onBlur='this.setWidth("30px")' /> <label value="pages" onClick="self.previousSibling.focus=true" /> </div> <combobox width="99%" inplace="true" onChange='self.style="font-weight:bold"' value="Awaiting" model="${lm}" /> </row> </rows> </grid> </zk>test.zulzul<zk> <window border="normal" title="hello" apply="pkg$.TestComposer"> <div>Welcome to ZK Fiddle , run it right now!</div> <textbox id="dashboardParameters" rows="5" value="\n \n" /> <button id="btn" label="Click Me To Evalute Event Binding With Composer" /> </window> </zk>