Static row not rendered in grid when using template with mvvm model in zk

Question

<grid vflex="1" model="@bind(vm.getModel())">
        <columns menupopup="auto">
            <column label="Name" sort="auto(name)" />
            <column label="Type" sort="auto(type)" />
        </columns>
        <rows>
        <row>
            <button label="Left" />   // This do not render
            <label value="Right" />   // This do not render
        </row>
        <template name="model">
            <row>
                <label value="@bind(each.name)" />
                <label value="@bind(each.type)" />
            </row>
        </template>
        </rows>
    </grid>

I have grid having two column.

The first row is static and rest are rendered using template. The resulted grid does not render the static row...It render the templated row fine.. Why Zk is not rendering the static row ?

Answer 1

I've run into issues like this before. The heart of the problem is that ZK provides two ways to set the contents of a grid, this applies to listbox, tree, etc.

One way is to manually add the row Components to your grid either in ZUL, as you do here, or in Java with something like myGrid.getRows().getChildren().add(myRow);.

The other way to set the contents of the grid is to use ZK's model concept.

Unfortunately, as you've discovered, these two concepts are mutually exclusive - they cannot be combined. It makes sense when you think about how the model works. If you were to add a new object to the model, it would appear as a new row in the grid. Likewise, if you were to remove an object from the model, it's corresponding row would disappear from the grid. Thus, the grid is functioning to render a live view of all the objects in the model. The rows you hard code in your ZUL are not represented by objects in the model and so are not rendered.

I see two good solutions for you, the first would be to merge the two concepts: why do you need this one static row? Can it not be represented as an object in the model? If not, the second solution is to reconsider what you're doing. I'd suspect this row doesn't belong in the grid and you would get a better UI and UX experience to move it outside the grid. If you have a specific UI scenario you'd like feedback on, the ux.stackexchange.com site is the place to go.