Hide row in dynamic grid in ZK framework - zk

Question

I am trying to hide/show a row in a grid (filled dynamically from Java code) upon clicking on it's previous row. To simulate a simple MasterDetail component. I get the right index of the clicked row in the java code, however changing visibility of the row doesn't work! Can anyone help me with this or is there a similar way to to this?
Thanks,
Pooya
Here is the code for the ZUL:
<?xml version="1.0" encoding="UTF-8"?>
<zk xmlns="http://www.zkoss.org/2005/zul">
<window id="callbackLogWindow"
apply="CallbackLogWindowComposer"
border="none" height="100%" width="100%"
xmlns:w="http://www.zkoss.org/2005/zk/client">
<grid id="callbackLogGrid" oddRowSclass="non-odd" height="100%">
<columns>
<column label="Logging Name" />
<column label="Status" />
<column label="DateTime" />
<column label="Subject" />
<column label="Replies" />
</columns>
<rows>
<zk forEach="${callbackLogWindow$composer.callbacks}">
<row sclass='${forEachStatus.index % 2 != 0 ? "z-grid-odd" : ""}'
onClick="callbackLogWindow$composer.toggleRow(self.index)">
<custom-attributes callback="${each}"/>
<cell><label value="${callback.loggingName}" /></cell>
<cell><label value="${callback.resolved}" /></cell>
<cell><label value="${callback.callbackTime}" /></cell>
<cell><label value="${callback.subject}" /></cell>
<cell><label value="${callback.resolvedItemCount}" /></cell>
</row>
<row sclass='${forEachStatus.index % 2 != 0 ? "z-grid-odd" : ""}'>
<cell colspan="5">
<include src="callbackItem.zul" callback="${each}"/>
</cell>
</row>
<row>
<custom-attributes callback="${each}"/>
<button onClick="callbackLogWindow$composer.saveCallbackItems(callback)">
Save
</button>
</row>
</zk>
</rows>
</grid>
</window>
</zk>
And the controller:
public class CallbackLogWindowComposer extends SelectorComposer<Window> {
#Inject private CallbackDao callbackDao;
#Wire Grid callbackLogGrid;
private List<Callback> callbacks = new ArrayList<Callback>();
#Override
public void doAfterCompose(Window window) throws Exception {
super.doAfterCompose(window);
}
public List<Callback> getCallbacks() {
callbacks = callbackDao.findAll();
return callbacks;
}
public void toggleRow(int i) {
Component row = callbackLogGrid.getRows().getChildren().get(i+1);
row.setVisible(row.isVisible());
callbackLogGrid.renderAll();
}
public void saveCallbackItems(Callback cb) {
callbackDao.saveInTransaction(cb);
}
}

Answer 1

I am not sure and not test but i can suggest one thing here to you Zk have visible="true/false" attribute you can apply this attribute in each row and bind this with your databean variable For more detail i can suggest let us suppose you have a List<A> list
and list contain all the record which you want to display now add another variable like display in class A and control it by your self .And onClick on any row change update any other item of list .

Answer 2

I have the same problem, and the solution I found was:
row visible=""
<grid model="#bind(vm.total)" vflex="1" emptyMessage="No records exist" width="315px" >
<columns>
<column width="45%"/>
<column width="25%" />
</columns>
<template name="model">
<row visible="#load(each.visible)">
<checkbox label="#load(each.label)" style="font-weight:bold" if="${each.checkbox}"/>
<label value="#load(each.label)" style="font-weight:bold" unless="${each.checkbox}"/>
<doublebox value="#bind(each.value)" sclass="textBoxNumber" locale="us" readonly="true" />
</row>
</template>
</grid>
</groupbox>