0

insert static row after MVVM template

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

robertkaren gravatar image 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>

delete flag offensive retag edit

Comments

and can't you use footer?

chillworld ( 2015-06-13 13:34:47 +0800 )edit

thanks. 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

1 Answer

Sort by ยป oldest newest most voted
1

answered 2015-06-15 08:18:25 +0800

cor3000 gravatar image cor3000
4606 2 7
ZK Team

updated 2015-06-15 08:22:28 +0800

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:

  • @template(vm.isFaker(each) ? 'faker' : 'model')
  • @template(each.type ne 'faker' ? 'model' : 'faker')
  • @template(each eq null ? 'faker' : 'model') (in case you add a null value for the faker)

The principle is always the same, if something remains unclear let me know.

Robert

link publish delete flag offensive edit

Comments

thanks. that makes sense.

robertkaren ( 2015-06-15 23:04:13 +0800 )edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
1 follower

RSS

Stats

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

Seen: 48 times

Last updated: Jun 15 '15

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More