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 :

ZK Listbox ROD (8.6.0.1) - fixed

2guest108.162.212.353m3rnqiAug 6, 2020 9:11:01 PMlink

listbox and checkboxes

298guest162.158.187.1191vilk89Aug 6, 2020 5:49:13 PMlink

Another new ZK fiddle

1Edison108.162.210.1483og97u4Aug 6, 2020 5:10:53 PMlink

NavItem

24guest172.68.226.172b9sft4Aug 6, 2020 3:36:21 PMlink

Another new ZK fiddle

1guest172.69.33.491diak8eAug 6, 2020 8:55:43 AMlink

Amountbox de_CH

1guest162.158.34.212256j7stAug 6, 2020 7:19:25 AMlink

vflex and rows on listbox

4guest162.158.187.161glef8Aug 5, 2020 4:20:35 PMlink

vflex and rows on listbox

3guest162.158.187.161glef8Aug 5, 2020 4:20:15 PMlink

Amountbox de_CH

1guest172.69.55.94q2bd5iAug 5, 2020 3:53:27 PMlink

different style for each listitem

10guest162.158.165.18847laosAug 5, 2020 6:04:45 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>