Revision history [back]

click to hide/show revision 1
initial version

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

robertkaren gravatar image robertkaren

insert static row after MVVM template

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 (vehGrid) so I can create a dummy row as wide as a horiz scrollbar in the adjacent grid (see below where I change ht of '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, 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? here is the zul. thanks for any help!

<?page id="sched"?>

<zk xmlns:w="client"> <window id="win" border="normal" width="100%" height="100%" closable="false" apply="org.zkoss.bind.BindComposer" viewmodel="@id('vm') @init('com.namsi.eztab.entity.RFViewModel')" &gt;="" <vlayout="" spacing="0"> <style> select { cursor: default; } </style> <grid id="grid"> <columns &gt;="" <column="" hflex="min"/> <column hflex="1"/> </columns> <rows> <row> <label value="Universe: " style="font-size: 8pt"/> <listbox mold="select" model="@load(vm.basesModel)" selecteditem="@bind(vm.selectedBase)" onselect="@command('refreshDataItems', calcOnly=true)" width="100%"> <template name="model"> <listitem> <listcell label="@load(each)" style="font-size: 8pt"/> </listitem> </template> </listbox> </row> <row> <label value="Target: " style="font-size: 8pt"/> <listbox mold="select" model="@load(vm.targetsModel)" selecteditem="@bind(vm.selectedTarget)" onselect="@command('refreshDataItems', calcOnly=true)" width="100%"> <template name="model"> <listitem> <listcell label="@load(each)" style="font-size: 8pt"/> </listitem> </template> </listbox> </row> </rows> </grid> <style> .z-row-content { padding-top: 0px; padding-bottom: 1px; } .z-row:first-child .z-row-content { padding-top: 0px; } .z-intbox { min-height: 20px; line-height: 20px; padding-top: 0; padding-bottom: 0; } .z-column-content { line-height: 30px; } .noscroll { border-right: none; } .noscroll .z-grid-body { overflow: hidden !important; } .notext { opacity: 0; } </style> <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 &gt;="" <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> </grid> <grid id="mainGrid" model="@load(vm.mapModel)" vflex="1" width="800px" &gt;="" <custom-attributes="" org.zkoss.zul.nativebar="true"/> <attribute w:name="onScroll"> <attribute w:name="_afterCalcSize"> <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"> <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> </template> </row> </template> </grid> </hlayout> <label id="dataItemsLabel" style="visibility: hidden;" value="R&amp;F Data Items"></label> <hlayout spacing="0" &gt;="" <grid="" id="resultsLblsGrid" model="@load(vm.dataLblsModel)" vflex="1" sclass="noscroll" width="250px"> <custom-attributes org.zkoss.zul.nativbar="true"/> <rows> <template name="model"> <row align="center" height="24px" style="overflow: hidden;"> <label value="@load(each)" multiline="false" style="font-size: 8pt; white-space:nowrap;"/> </row> </template> </rows> </grid> <grid id="resultsGrid" sclass="noscroll" model="@load(vm.resultsModel)" width="800px" vflex="1"> <custom-attributes org.zkoss.zul.nativebar="true"/> <columns children="@load(vm.columnsModel)"> <template name="children"> <column style="text-align: center" width="75px"/> </template> </columns> <rows id="resultsRows"> <template name="model" var="cur_row"> <row children="@load(vm.columnsModel)@template('cells')" height="24px" align="center"> <template name="cells"> <label style="font-size: 8pt; text-align: center;" value="@load(cur_row.value[forEachStatus.index])"/> </template> </row> </template> </rows> </grid> </hlayout> <hlayout style="padding: 3px 0 2px 0"> <button label="Refresh" id="refreshBtn" visible="false" onclick="@command('refreshDataItems', calcOnly=false)"/> Refresh page. </hlayout> </vlayout> </window> </zk>

insert static row after MVVM template

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 (vehGrid) (see vehGrid) so I can create a dummy row as wide as a horiz scrollbar in the adjacent grid (see attribute below where I change ht of '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, 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? here is the zul. thanks for any help!

<?page id="sched"?>

<zk xmlns:w="client"> <window id="win" border="normal" width="100%" height="100%" closable="false" apply="org.zkoss.bind.BindComposer" viewmodel="@id('vm') @init('com.namsi.eztab.entity.RFViewModel')" &gt;="" <vlayout="" spacing="0"> <style> select { cursor: default; } </style> <grid id="grid"> <columns &gt;="" <column="" hflex="min"/> <column hflex="1"/> </columns> <rows> <row> <label value="Universe: " style="font-size: 8pt"/> <listbox mold="select" model="@load(vm.basesModel)" selecteditem="@bind(vm.selectedBase)" onselect="@command('refreshDataItems', calcOnly=true)" width="100%"> <template name="model"> <listitem> <listcell label="@load(each)" style="font-size: 8pt"/> </listitem> </template> </listbox> </row> <row> <label value="Target: " style="font-size: 8pt"/> <listbox mold="select" model="@load(vm.targetsModel)" selecteditem="@bind(vm.selectedTarget)" onselect="@command('refreshDataItems', calcOnly=true)" width="100%"> <template name="model"> <listitem> <listcell label="@load(each)" style="font-size: 8pt"/> </listitem> </template> </listbox> </row> </rows> </grid> <style> .z-row-content { padding-top: 0px; padding-bottom: 1px; } .z-row:first-child .z-row-content { padding-top: 0px; } .z-intbox { min-height: 20px; line-height: 20px; padding-top: 0; padding-bottom: 0; } .z-column-content { line-height: 30px; } .noscroll { border-right: none; } .noscroll .z-grid-body { overflow: hidden !important; } .notext { opacity: 0; } </style> <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 &gt;="" <column="" > <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)"/> tooltiptext="@load(each)" /> </row> </template> <row><label value="" id="faker"/></row> </grid> <grid id="mainGrid" model="@load(vm.mapModel)" vflex="1" width="800px" &gt;="" <custom-attributes="" org.zkoss.zul.nativebar="true"/> > <custom-attributes org.zkoss.zul.nativebar="true" /> <attribute w:name="onScroll"> 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"> 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)" 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> <label id="dataItemsLabel" style="visibility: hidden;" value="R&amp;F Data Items"></label> <hlayout spacing="0" &gt;="" <grid="" id="resultsLblsGrid" model="@load(vm.dataLblsModel)" vflex="1" sclass="noscroll" width="250px"> <custom-attributes org.zkoss.zul.nativbar="true"/> <rows> <template name="model"> <row align="center" height="24px" style="overflow: hidden;"> <label value="@load(each)" multiline="false" style="font-size: 8pt; white-space:nowrap;"/> </row> </template> </rows> </grid> <grid id="resultsGrid" sclass="noscroll" model="@load(vm.resultsModel)" width="800px" vflex="1"> <custom-attributes org.zkoss.zul.nativebar="true"/> <columns children="@load(vm.columnsModel)"> <template name="children"> <column style="text-align: center" width="75px"/> </template> </columns> <rows id="resultsRows"> <template name="model" var="cur_row"> <row children="@load(vm.columnsModel)@template('cells')" height="24px" align="center"> <template name="cells"> <label style="font-size: 8pt; text-align: center;" value="@load(cur_row.value[forEachStatus.index])"/> </template> </row> </template> </rows> </grid> </hlayout> <hlayout style="padding: 3px 0 2px 0"> <button label="Refresh" id="refreshBtn" visible="false" onclick="@command('refreshDataItems', calcOnly=false)"/> Refresh page. </hlayout> </vlayout> </window> </zk></hlayout>

insert static row after MVVM template

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 wide high as a horiz scrollbar in the adjacent grid (see attribute below where I change ht of 'faker' label w/ id='faker' to width of scrollbar. 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, 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? 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>

About Us | Faq | Help | Privacy Policy | Contact Us
Copyright Potix Corporation 2015.
Content on this site is licensed under a Creative Commons Attribution Share Alike 3.0 license.
Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More