-
FEATURED COMPONENTS
First time here? Check out the FAQ!
Hi. I have 2 grids that are side by side and want to add a row w/ a named label (id = "faker") at the end of one of them (see vehGrid) so I can create a dummy row as high as a horiz scrollbar in the adjacent grid (see attribute below where I change ht of label w/ id='faker' to width of scrollbar). However the grid's rows/labels are loaded from viewmodel by template so zk ignores the static row.
I can add a dummy value to the model for the bottom row, but how and where can I run code that will run after load completes so I can set the bottom row's label's id to 'faker' so the label's ht will be modified? here is the zul. thanks for any help!
<hlayout spacing="0" height="308px">
<grid id="vehicleGrid" model="@load(vm.vehModel)" vflex="1" sclass="noscroll" width="250px">
<custom-attributes org.zkoss.zul.nativbar="true"/>
<columns >
<column label="Vehicles" align="center" style="font-size: 8pt"/>
</columns>
<template name="model">
<row align="center" height="33px">
<label style="font-size: 8pt; white-space:nowrap;" value="@load(each)" tooltiptext="@load(each)" />
</row>
</template>
<row><label value="" id="faker"/></row>
</grid>
<grid id="mainGrid" model="@load(vm.mapModel)" vflex="1" width="800px" >
<custom-attributes org.zkoss.zul.nativebar="true" />
<attribute w:name="onScroll"><![CDATA[
var resultsGrid = zk.Widget.$('$resultsGrid');
resultsGrid.ebody.scrollLeft = this.ebody.scrollLeft;
var vehGrid = zk.Widget.$('$vehicleGrid');
vehGrid.ebody.scrollTop = this.ebody.scrollTop;
]]></attribute>
<attribute w:name="_afterCalcSize"><![CDATA[
function() {
this.$_afterCalcSize();
var faker = this.$f('faker');
if (faker && zk(this.ebody).hasHScroll()) {
jq(faker.$n()).height(jq.scrollbarWidth() + 'px');
//alert('assigning width: ' + jq.scrollbarWidth + 'px');
}
}
]]></attribute>
<columns children="@load(vm.columnsModel)">
<template name="children">
<column style="font-size: 8pt; text-align: center;" width="75px" label="@load(each)"/>
</template>
</columns>
<template name="model" var="cur_row">
<row children="@load(vm.columnsModel)@template('cells')" height="33px">
<template name="cells">
<!-- <cell style="text-align: center;"> -->
<!-- removed: format="#,##0" -->
<intbox tabindex="${forEachStatus.index}" width="60px" style="font-size: 8pt; text-align:center;"
ctrlKeys="#down#right#left#up" onCtrlKey="@command('keyPressed')" onChange="@command('columnChange', col=forEachStatus.index)"
constraint="no negative" value="@load(cur_row.value[forEachStatus.index])"></intbox>
<!-- </cell>-->
</template>
</row>
</template>
</grid> </hlayout>
you can use a dynamic template name to render either a normal row or a fake row based on a condition in the @template() annotation.
<grid id="vehicleGrid" model="@load(vm.vehModel) @template(each.faker ? 'faker' : 'model')"
vflex="1" sclass="noscroll" width="250px">
<custom-attributes org.zkoss.zul.nativbar="true"/>
<columns >
<column label="Vehicles" align="center" style="font-size: 8pt"/>
</columns>
<template name="model" >
<row align="center" height="33px">
<label style="font-size: 8pt; white-space:nowrap;"
value="@load(each)" tooltiptext="@load(each)" />
</row>
</template>
<template name="faker" >
<row><label value="" id="faker"/></row>
</template>
</grid>
in the example above I assume the item in the vm.vehModel has a method public boolean isFaker();
Arbitrary conditions are possible e.g:
The principle is always the same, if something remains unclear let me know.
Robert
Asked: 2015-06-12 01:40:36 +0800
Seen: 49 times
Last updated: Jun 15 '15
and can't you use footer?
chillworld ( 2015-06-13 13:34:47 +0800 )editthanks. that works. I'm having trouble setting height of footer with jq.scrollbarWidth(). I'm not so experienced with zscript and jq. Can you tell me how to do that?
robertkaren ( 2015-06-15 23:01:38 +0800 )edit