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 AMlinkTree scroll position issues (clear selection)
1sbasly47.199.222.4021rsjrhOct 1, 2022 9:08:13 AMlinkresources
index.zulzul<zk>
<script src="debug.js"/>
<window border="normal" title="hello" apply="pkg$.TestComposer">
<vlayout>
<div>Scroll the tree using the mouse wheel and see what happens</div>
<separator/>
<label style="font-weight:bold" value="ZK 9.1.0" />
<div>Items render as you scroll</div>
<div/>
<label style="font-weight:bold" value="ZK 9.5.1" />
<div>Items render as you scroll, but after a while the scroll position jumps up in the tree</div>
<div/>
</vlayout>
<tree id="theTree" width="200px" height="300px" />
</window>
</zk>
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.*;
import java.util.*;
public class TestComposer extends GenericForwardComposer{
public void doAfterCompose(Component comp) throws Exception {
super.doAfterCompose(comp);
List<DefaultTreeNode> childnodes = new ArrayList<DefaultTreeNode>();
for( int i=0; i<500; ++i) {
childnodes.add(new DefaultTreeNode("" + i));
}
DefaultTreeNode root = new DefaultTreeNode("",childnodes);
((Tree) comp.getFellow("theTree")).setModel(new DefaultTreeModel(root));
}
public void onClick$btn(Event e) throws InterruptedException{
Messagebox.show("Hi btn");
}
}
debug.jsjavascriptzk.afterLoad('zul.sel, zkmax', function() {
var xTree = {};
zk.override(zul.sel.Tree.prototype, xTree, {
_initPadSizes: function (rerender) {
logInfos(this, "_initPadSizes before", arguments);
if (this.inPagingMold()) return; //in paging mold, no padding at all!
var treechildren, etreechildren;
if (!(treechildren = this.treechildren) || !(etreechildren = treechildren.$n()))
return;
var nrow = etreechildren.rows.length,
rowshgh = this._rowshgh = etreechildren.offsetHeight,
tsize = this._totalSize,
ebody = this.ebody;
this._avgrowhgh = nrow > 0 && rowshgh > 0 ? rowshgh / nrow : 21;
this._bufpad = this.preloadSize / 2 * this._avgrowhgh;
this._ibottom = this._offset + nrow;
this._topPad = this._offset * this._avgrowhgh;
var tpadhgh = this._topPad,
bpadhgh = tsize * this._avgrowhgh - rowshgh - tpadhgh;
if (bpadhgh < 0) {
if (this._offset > 0) tpadhgh += bpadhgh;
bpadhgh = 0;
if (tpadhgh < 0) tpadhgh = 0;
} else if (tsize <= this._ibottom)
bpadhgh = 0;
this._setPadSize(this.$n('tpad'), 'tpad', tpadhgh);
this._setPadSize(this.$n('bpad'), 'bpad', bpadhgh);
this._totalhgh = ebody.scrollHeight;
this._itop = this._offset;
var ebodyhgh = ebody.offsetHeight;
this._limit = (((ebodyhgh + this._bufpad * 2) / this._avgrowhgh) | 0) + 2;
if (!this._viewtop && !this._lasttop && this._currentTop > 0)
this._viewtop = this._lasttop = this._currentTop;
// Bug ZK-353 sync _lastoffset if not initialized yet.
if (!this._lastoffset && this._offset > 0)
this._lastoffset = this._offset;
if (!rerender && this._totalSize > this._ibottom) {
var viewtop = this._viewtop = this._currentTop,
viewbottom = viewtop + ebodyhgh,
lasterow = etreechildren.lastChild, // ZK-3526 rows.lastChild is undefined when model get cleared
rowbottom = (lasterow) ? this._rowScrollBottom(lasterow) : tpadhgh;
if (viewbottom > rowbottom && this._lastoffset == this._itop) {//still space to hold extra rows and no scrolling during the data loading
this._onDataLoading(this._itop, this._limit);
}
}
// should restore scroll position for native scroll bar
if (this._currentTop > 0)
ebody.scrollTop = this._currentTop;
// ZK-490: should sync bar after reset model
this.refreshBar_();
logInfos(this, "_initPadSizes after", arguments);
},
_scrollPage: function () {
logInfos(this, "_scrollPage before");
var treechildren, etreechildren;
if (!(treechildren = this.treechildren) || !(etreechildren = treechildren.$n()))
return;
var ebody = this.ebody,
viewtop = this._viewtop = zul.mesh.Scrollbar.getScrollPosV(this), //remember scrolling
viewbottom = viewtop + ebody.offsetHeight,
tpadhgh = this._padsz['tpad'],
top = this._lasttop,
rowstop = tpadhgh,
rowshgh = this._rowshgh = etreechildren.offsetHeight,
rowsbottom = rowstop + rowshgh,
maxOffset = this._totalSize - this._limit;
if (maxOffset < 0) maxOffset = 0;
if (viewtop != top) { //scrolling
//bufferpad position in px
var buftop = viewtop - this._bufpad,
bufbottom = viewbottom + this._bufpad,
loadtop = viewtop - this._loadpad,
loadbottom = viewbottom + this._loadpad;
if (buftop < 0) buftop = 0;
if (loadtop < 0) loadtop = 0;
if (bufbottom > this._totalhgh) bufbottom = this._totalhgh - (zk.ie < 11 ? 1 : 0);
if (loadbottom > this._totalhgh) loadbottom = this._totalhgh - (zk.ie < 11 ? 1 : 0);
if (viewtop > top) {
if (rowsbottom < loadbottom) { //need loading (scroll down)
var offset = this._itop;
if (rowsbottom < buftop) { //totally out
offset = (buftop / this._avgrowhgh) | 0;
} else {
var uplimit = buftop - tpadhgh;
if (uplimit >= 0) {
var j = this._ibottom - 1;
offset = 0;
for (var row = etreechildren.lastChild; row; row = row.previousSibling, --j) {
var rowp = this._rowOffsetTop(row);
if (rowp < uplimit) { //found it!
offset = j;
break;
}
}
}
}
if (offset >= maxOffset)
offset = maxOffset;
if (offset < 0 || viewtop == 0) offset = 0;
if (offset != this._lastoffset || (this._totalSize > this._ibottom && etreechildren.rows.length < this._limit)) {
this._lastoffset = offset;
this._lasttop = viewtop;
this._onDataLoading(offset, this._limit);
}
}
} else { //scroll up
if (rowstop >= loadtop || (buftop == 0 && this._lastoffset > 0)) { //need loading(scroll up)
var offset = (buftop / this._avgrowhgh) | 0;
if (offset >= maxOffset)
offset = maxOffset;
if (offset < 0) offset = 0;
if (offset != this._lastoffset) {
this._lastoffset = offset;
this._lasttop = viewtop;
this._onDataLoading(offset, this._limit);
}
}
}
}
// always update the scroll position to server (Bug ZK-353)
//@override or _currenttop can inconsistent with viewtop
this._currentTop = viewtop;
this.fire('onScrollPos', {top: this._currentTop, left: this._currentLeft});
this._timeoutId = null;
logInfos(this, "_scrollPage after");
},
_onDataLoading: function (offset, limit) {
logInfos(this, '_onDataLoading before', arguments)
this._offset = offset;
this._limit = limit;
this._toggleRodLoadingIndicator(true);
var out = new zk.Buffer(),
renderTreeItems = this._renderTreeItems(out, this._offset, this._limit);
if (!renderTreeItems)
return;
// Turn previous items into ROD
var lastItemRebind = this._itemRebind;
if (lastItemRebind) {
for (var i = 0, len = lastItemRebind.length; i < len; i++) {
var w = lastItemRebind[i];
if (zk.Widget.$(w.uuid) !== w) continue; // ZK-4033: If the item was removed, don't rebind ROD
w.unbind(null, true);
this.$class._bindrod(w);
}
}
lastItemRebind = this._itemRebind = renderTreeItems;
jq(this.treechildren.$n()).empty().html(out.join(''));
for (var i = 0, len = lastItemRebind.length; i < len; i++) {
var w = lastItemRebind[i];
w.unbind(null, true);
w.bind();
}
this._toggleRodLoadingIndicator(false);
this.setScrollPads_(offset);
logInfos(this, '_onDataLoading before', arguments)
},
});//zk.override
const logInfos = function(tree, msg, args) {
console.log(msg, args && [...args]);
if(tree.desktop) {
console.table({
scrollBarPos: zul.mesh.Scrollbar.getScrollPosV(tree),
bodyClientHeight: tree.$n('body').clientHeight,
bodyScrollHeight: tree.$n('body').scrollHeight,
tpadHeight: tree.$n('tpad').offsetHeight,
rowsHeight: tree.$n('cave').offsetHeight,
bpadHeight: tree.$n('bpad').offsetHeight,
_currentTop: tree._currentTop,
});
}
}
});//zk.afterLoad