Insert grid template row (within grid) under condition - templates

Question

In a facebook-esque fasion, I'm working in a post with comments. The comments have a int which indicates the id of the parent post. So Comment 1 and 2 both have assigned as parent Post 1.
What im working on is on displaying them as a grid within a grid. Here is that part in .zul:
<grid id="postGrid" height="550px" model="#load(vm.pcdata.posts)" emptyMessage="No Posts.">
<template name="model">
<row>
<window border="normal">
<!-- .................. -->
<!-- PARENT POST -->
<!-- .................. -->
<caption id="userPost" label="#load(each.user)"/>
<textbox id="infoPost" readonly="true" value="#load(each.info)" multiline="true" rows="4" width="100%" mold="rounded"/>
<separator bar="true"/>
<hlayout>
<div>
<button label="Like" onClick="#command('addPLike', postid=each.postid)"/>
</div>
<div hflex="true">
<textbox id="likeTB" disabled="true" width="40px" style="text-align:center" value="#load(each.plikes)"/>
</div>
</hlayout>
<separator bar="false"/>
<window border="normal">
<!-- .................. -->
<!-- THE SECOND GRID-->
<!-- .................. -->
<grid id="commentGrid" height="150px" model="#load(vm.pcdata.comments)" emptyMessage="No Comments.">
<template name="model">
<row>
<window border="normal">
<caption id="userComment" label="#load(each.user)"/>
<textbox id="infoComment" readonly="true" value="#load(each.info)" multiline="true" rows="4" width="100%" mold="rounded"/>
<separator bar="true"/>
<hlayout>
<div>
<button label="Like" onClick="#command('addCLike', commentid=each.commentid)"/>
</div>
<div hflex="true">
<textbox id="likeTB" disabled="true" width="40px" style="text-align:center" value="#load(each.clikes)"/>
</div>
</hlayout></window></row></template></grid></window></window></row></template></grid>
In the second grid, I imagine there could be some sort of if function in which if both the postid in the father Post and the postsrc in the child Comment are the same, the comment will be displayed. Is there any way to make this work?

Answer 1

You can use shadow element <if>, e.g.
<if test="#load(vm.yourFlag)">
<grid id="commentGrid">
....
</if>
please see http://books.zkoss.org/zk-mvvm-book/8.0/shadow_elements/flow_control.html

Answer 2

Do you mean commentGrid is created but inner window is hidden, so there is space inside commentGrid, right?
Since you specify emptyMessage on commentGrid, it should show no comments. Or there are still comments but all hidden? If so, you can consider hide both commentGrid with inner window.