insert static row after MVVM template

asked 2015-06-12 01:40:36 +0800

robertkaren
77 ● 7

updated 2015-06-12 01:50:14 +0800

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>