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
1guest172.70.111.155rcrbibApr 24, 2024 10:32:38 AMlinkopen new url in same tab
16guest172.71.134.14923nk51gApr 23, 2024 3:42:54 PMlinkDedalus Concerto CONC-5938
71guest188.114.102.11417kiilApr 23, 2024 1:10:17 PMlinkDedalus Concerto CONC-XXXX
70guest172.71.246.317kiilApr 23, 2024 10:43:35 AMlinkDedalus Concerto CONC-XXXX
69guest172.71.246.217kiilApr 23, 2024 10:42:44 AMlinkDedalus Concerto CONC-XXXX
68guest172.71.246.4917kiilApr 23, 2024 10:40:09 AMlinkScrapbook Concerto CONC-XXXX
67guest172.71.246.4817kiilApr 23, 2024 10:39:49 AMlinkScrapbook Concerto CONC-XXXX
66guest172.71.246.4917kiilApr 23, 2024 10:39:35 AMlinkScrapbook Concerto CONC-XXXX
65guest172.71.246.4917kiilApr 23, 2024 10:38:52 AMlinkScrapbook Concerto CONC-XXXX
64guest172.71.246.4917kiilApr 23, 2024 10:38:47 AMlinkcolumns-sizable-flex-min-safari
1stadan145.253.186.1301ci2qmhMar 20, 2019 5:41:09 PMlinkresources
index.zulzul<zk>
<zscript><![CDATA[
ListModelList model = new ListModelList(Collections.nCopies(200, "dummy"));
]]></zscript>
<style>
.z-cell {
white-space:nowrap;
}
.z-grid .z-button:not(:last-child) {
margin-right:10px
}
</style>
<script>
<![CDATA[
/**
* a patch for ZK-4219
* based on 8.5.1.2
*/
zk.afterLoad('zul.mesh', function() {
var xMeshWidget = {};
zk.override(zul.mesh.MeshWidget.prototype, xMeshWidget ,{
_afterCalcSize: function () {
if (this._ebodyScrollPos) {
// ZK-2046: Restore ebody scroll position after calculated size.
this.ebody.scrollLeft = this._ebodyScrollPos.l;
this.ebody.scrollTop = this._ebodyScrollPos.t;
this._ebodyScrollPos = null;
}
// Set style width to table to avoid colgroup width not working
// because of width attribute (width="100%") on table
var allWidths = this._isAllWidths();
if (allWidths) {
var hdtbl = this.eheadtbl,
bdtbl = this.ebodytbl,
fttbl = this.efoottbl;
if (hdtbl) {
var wd = 0;
for (var w = this.ehdfaker.firstChild; w; w = w.nextSibling) {
if (w.style.display != 'none' && !w.id.endsWith('hdfaker-bar')) // B70-ZK-2307 and B70-ZK-2358
wd += zk.parseInt(w.style.width);
}
if (wd > 0) { //ZK-2772, ZK-2903: only when hdfaker has width, set back to table
//patch - the whole head should include scrollbar's width
hdtbl.style.width = (wd +zk.parseInt(this.head.$n('hdfaker-bar').style.width)) + 'px';
if (bdtbl)
bdtbl.style.width = wd + 'px';
if (fttbl)
fttbl.style.width = wd + 'px';
}
}
} else if (this.frozen) {
//B70-ZK-2468: should sync ebody width with ebodytbl width
if (this.ebody) {
var bdtbl = this.ebodytbl;
if (bdtbl)
bdtbl.style.width = this.ebody.style.width;
}
}
if (!this.frozen) {
var zkb = zk(this.ebody),
hScroll = zkb.hasHScroll(),
vScroll = zkb.hasVScroll(),
hdfakerbar = this.head ? this.head.$n('hdfaker-bar') : null,
ftfakerbar = this.eftfaker ? this.head.$n('ftfaker-bar') : null;
if (vScroll) {
if (hdfakerbar)
hdfakerbar.style.width = vScroll + 'px';
if (ftfakerbar)
ftfakerbar.style.width = vScroll + 'px';
} else {
//refix B70-ZK-2114: remove hdfakerbar when there is no native scrollbar
if (hdfakerbar)
hdfakerbar.style.width = 0.1 + 'px';
if (ftfakerbar)
ftfakerbar.style.width = 0.1 + 'px';
}
}
},
});
var exHeaderWidget = {};
zk.override(zul.mesh.HeaderWidget.prototype, exHeaderWidget ,{
bind_: function(){
this.$class._aftersizing = function (dg, evt) {
var wgt = dg.control,
mesh = wgt.getMeshWidget(),
wd = jq.px(dg._zszofs),
hdfaker = mesh.ehdfaker,
bdfaker = mesh.ebdfaker,
ftfaker = mesh.eftfaker,
cidx = zk(wgt.$n()).cellIndex();
var hdcols = hdfaker.childNodes,
bdcols = bdfaker.childNodes,
ftcols = ftfaker ? ftfaker.childNodes : null;
//1. store resized width
// B70-ZK-2199: convert percent width to fixed width
var wds = [];
for (var w = mesh.head.firstChild, i = 0; w; w = w.nextSibling, i++) {
var stylew = hdcols[i].style.width,
origWd = w._origWd, // ZK-1022: get original width if it is shrinked by Frozen.js#_doScrollNow
isFixedWidth = stylew && stylew.indexOf('%') < 0;
if (origWd) {
if (isFixedWidth && zk.parseFloat(stylew) > 1) {
origWd = stylew; // use the latest one;
}
w._width = wds[i] = origWd;
} else {
wds[i] = isFixedWidth ? stylew : jq.px0(w.$n().offsetWidth);
if (w.isVisible()) w._width = wds[i];
}
if (!isFixedWidth) {
hdcols[i].style.width = bdcols[i].style.width = wds[i];
if (ftcols) //ZK-2769: Listfooter is not aligned with listhead on changing width
ftcols[i].style.width = wds[i];
}
// reset hflex, Bug ZK-2772 - Misaligned Grid columns
var wdInt = zk.parseInt(wds[i]);
if (w._hflexWidth) {
w.setHflex_(null);
w._hflexWidth = undefined;
}
if (mesh._minWd) {
mesh._minWd.wds[i] = wdInt;
}
}
//2. set resized width to colgroup col
if (!wgt.origWd)
wgt._width = wds[cidx] = wd;
hdcols[cidx].style.width = bdcols[cidx].style.width = wd;
if (ftcols) //ZK-2769: Listfooter is not aligned with listhead on changing width
ftcols[cidx].style.width = wd;
//3. clear width=100% setting, otherwise it will try to expand to whole width
mesh.eheadtbl.width = '';
//mesh.ebodytbl.width = ''; //patch - clear body width causes incorrect column content width
if (mesh.efoottbl)
mesh.efoottbl.width = '';
delete mesh._span; //no span!
delete mesh._sizedByContent; //no sizedByContent!
for (var w = mesh.head.firstChild; w; w = w.nextSibling)
w.setHflex_(null); //has side effect of setting w.$n().style.width of w._width
wgt.parent.fire('onColSize', zk.copy({
index: cidx,
column: wgt,
width: wd ,
widths: wds
}, evt.data), null, 0);
// bug #2799258 in IE, we have to force to recalculate the size.
mesh.$n()._lastsz = null;
// for the test case of B70-ZK-2290.zul, we need to put the width back.
if (!zk.webkit) {
mesh.eheadtbl.width = '100%';
mesh.ebodytbl.width = '100%';
if (mesh.efoottbl)
mesh.efoottbl.width = '100%';
}
// bug #2799258
zUtl.fireSized(mesh, -1); //no beforeSize
}
exHeaderWidget.bind_.apply(this, arguments);
}
});
});
]]></script>
<grid id="grid" model="${model}" width="1200px" height="800px">
<columns sizable="true">
<column label="1" width="300px"/>
<column label="2" width="300px"/>
<column label="3" width="300px"/>
<column label="Action" hflex="min"/>
</columns>
<template name="model">
<row>
<label value="looooooooooooong Content"/>
<label value="looooooooooooong Content"/>
<label value="looooooooooooong Content"/>
<cell>
<button iconSclass="z-icon-edit"/>
<button iconSclass="z-icon-download"/>
<button iconSclass="z-icon-list"/>
</cell>
</row>
</template>
</grid>
</zk>