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 :
Another new ZK fiddle
2guest172.71.134.130218n5u0Apr 25, 2024 10:30:00 AMlinkAnother new ZK fiddle
1guest172.71.134.130218n5u0Apr 25, 2024 10:29:38 AMlinkBarcodescanner use in Modal Window
8guest162.158.95.20135ck08dApr 25, 2024 10:26:46 AMlinkBarcodescanner use in Modal Window
7guest162.158.95.20235ck08dApr 25, 2024 10:25:21 AMlinkBarcodescanner use in Modal Window
6guest162.158.95.20235ck08dApr 25, 2024 10:24:03 AMlinkBarcodescanner use in Modal Window
5guest162.158.95.20135ck08dApr 25, 2024 10:21:42 AMlinkBarcodescanner use in Modal Window
4guest162.158.95.20235ck08dApr 25, 2024 10:21:03 AMlinkBarcodescanner use in Modal Window
3guest162.158.95.20135ck08dApr 25, 2024 10:20:28 AMlinkBarcodescanner use in Modal Window
2guest162.158.95.20135ck08dApr 25, 2024 10:16:41 AMlinkBarcodescanner use in Modal Window
1guest172.70.251.13335ck08dApr 25, 2024 10:04:09 AMlinkAnother new ZK fiddle
1JamesChu220.134.32.2423mbg79Jul 11, 2019 10:14:14 AMlinkresources
index.zulzul<zk>
<vlayout viewModel="@id('vm') @init('pkg$.TestVM')">
<label multiline="true" >
1. There are 4 grids , resize the columns of the first 3 grids and press the button "toggle flag (mvvm)"
2. You should see column 4 disappeared and column 5 appear.
3. click button "invalidate 1st grid" and do the above steps to the 1st grid.
4. Resize the columns of the last grid and press the button "toggle flag (mvc)"
5. You should see column 4 disappeared and column 5 appear.
6. Press the last two buttons, you should see the corresponding result.
</label>
<separator />
hflex width (MVVM)
<grid id="grid" >
<columns id="cols" sizable="true">
<column hflex="2" label="mvvm1" align="center"/>
<column hflex="3" label="mvvm2" />
<column hflex="4" label="mvvm3" />
<column hflex="5" label="mvvm4" visible="@load(vm.flag)" />
<column hflex="5" label="mvvm5" visible="@load(!vm.flag)" />
</columns>
<rows>
<row>
<label value="File:"/>
<textbox width="98%"/>
<label value="c3"/>
<label value="c4"/>
<label value="c5"/>
</row>
<row>
<label value="Type:"/>
<hlayout>
<listbox rows="1" mold="select">
<listitem label="Java Files,(*.java)"/>
<listitem label="All Files,(*.*)"/>
</listbox>
<button label="Browse..."/>
</hlayout>
<label value="c3"/>
<label value="c4"/>
<label value="c5"/>
</row>
<row>
<label value="Options:"/>
<textbox rows="3" width="98%"/>
<label value="c3"/>
<label value="c4"/>
<label value="c5"/>
</row>
</rows>
</grid>
<separator />
no width specified (MVVM)
<grid id="grid2">
<columns sizable="true">
<column label="mvvm1" />
<column label="mvvm2" />
<column label="mvvm3" />
<column label="mvvm4" visible="@load(vm.flag)" />
<column label="mvvm5" visible="@load(!vm.flag)" />
</columns>
<rows>
<row>
<label value="File:"/>
<textbox width="98%"/>
<label value="c3"/>
<label value="c4"/>
<label value="c5"/>
</row>
<row>
<label value="Type:"/>
<hlayout>
<listbox rows="1" mold="select">
<listitem label="Java Files,(*.java)"/>
<listitem label="All Files,(*.*)"/>
</listbox>
<button label="Browse..."/>
</hlayout>
<label value="c3"/>
<label value="c4"/>
<label value="c5"/>
</row>
<row>
<label value="Options:"/>
<textbox rows="3" width="98%"/>
<label value="c3"/>
<label value="c4"/>
<label value="c5"/>
</row>
</rows>
</grid>
<separator />
fixed width (MVVM)
<grid id="grid3" >
<columns sizable="true">
<column width="200px" label="mvvm1" />
<column width="200px" label="mvvm2" />
<column width="200px" label="mvvm3" />
<column width="200px" label="mvvm4" visible="@load(vm.flag)" />
<column width="200px" label="mvvm5" visible="@load(!vm.flag)" />
</columns>
<rows>
<row>
<label value="File:"/>
<textbox width="98%"/>
<label value="c3"/>
<label value="c4"/>
<label value="c5"/>
</row>
<row>
<label value="Type:"/>
<hlayout>
<listbox rows="1" mold="select">
<listitem label="Java Files,(*.java)"/>
<listitem label="All Files,(*.*)"/>
</listbox>
<button label="Browse..."/>
</hlayout>
<label value="c3"/>
<label value="c4"/>
<label value="c5"/>
</row>
<row>
<label value="Options:"/>
<textbox rows="3" width="98%"/>
<label value="c3"/>
<label value="c4"/>
<label value="c5"/>
</row>
</rows>
</grid>
<separator />
<button label="toggle flag (mvvm)" onClick="@command('toggle')"/>
<button label="invalidate 1st grid" onClick="grid.invalidate()"/>
<separator />
hflex width (MVC)
<grid>
<columns sizable="true">
<column hflex="2" height="100px" id="c1" label="mvc1" />
<column hflex="3" id="c2" label="mvc2" />
<column hflex="4" label="mvc3" />
<column hflex="5" id="c4" label="mvc4" />
<column hflex="5" id="c5" label="mvc5" visible="false" />
</columns>
<rows>
<row>
<label value="File:"/>
<textbox width="98%"/>
<label value="c3"/>
<label value="c4"/>
<label value="c5"/>
</row>
<row>
<label value="Type:"/>
<hlayout>
<listbox rows="1" mold="select">
<listitem label="Java Files,(*.java)"/>
<listitem label="All Files,(*.*)"/>
</listbox>
<button label="Browse..."/>
</hlayout>
<label value="c3"/>
<label value="c4"/>
<label value="c5"/>
</row>
<row>
<label value="Options:"/>
<textbox rows="3" width="98%"/>
<label value="c3"/>
<label value="c4"/>
<label value="c5"/>
</row>
</rows>
</grid>
<zscript><![CDATA[
boolean f = true;
public void togglef(){
f = !f;
c4.setVisible(f);
c5.setVisible(!f);
}
public void setAlign(){
c1.setAlign("center");
}
public void setVAlign(){
c2.setValign("top");
}
]]></zscript>
<button label="toggle flag (mvc)" onClick="togglef()"/>
<button label="column 1 set align - center (mvc)" onClick="setAlign()"/>
<button label="column 2 set vertical align - top (mvc)" onClick="setVAlign()"/>
</vlayout>
</zk>TestVM.javajavaimport org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.NotifyChange;
public class TestVM {
private boolean flag = true;
public boolean isFlag() {
return flag;
}
public void setFlag(boolean flag) {
this.flag = flag;
}
@Command
@NotifyChange("flag")
public void toggle() {
flag = !flag;
}
}