How to realize rowToggle in primefaces 3.3? - datatable

Question

I'm now using primefaces 3.3, but this version doesn't support event="rawToggle" for datatable. So I chose to use the onExpandStart instead of rowToggle, but I met with another problem. Here I want to put another datatable as the expanded row, so everytime I toggle one row in nodetable, I need to pass the nodeId of that row to backingbean to get all the contents of that node. If I have event="rowToggle", I can do it without any problem! But if I use the attribute onExpandStart of the dataTable, I cannot get the somenode.nodeId in the backingbean, anyone knows how to solve it?
I've also tried to put a hidden input tag <input type="hidden" name="hidden" value="#{somenode.nodeId}"/> inside the rowToggler, but the value I get in backingbean is null.
Have been worked on it for several days, but still no ideas. Help please please please!
<p:dataTable id="nodetable" value="#{nodeedit.list}" var="somenode"
styleClass="datatable" editable="true"
onExpandStart="#{nodeedit.toggle(somenode.nodeId)}" >
<p:ajax event="rowEdit" listener="#{nodeedit.save('node')}"/>
<p:column style="width:4%">
<p:rowToggler>
<h:form>
<input type="hidden" name="hidden" value="#{somenode.nodeId}"/>
</h:form>
</p:rowToggler>
</p:column>
<p:column>
<f:facet name="header">ID</f:facet>
<h:form>
<h:commandLink action="nodeedit">#{somenode.norder}</h:commandLink>
</h:form>
</p:column>
<p:column headerText="Name">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{somenode.title}" />
</f:facet>
<f:facet name="input">
<p:inputTextarea value="#{somenode.title}" style="width:100%"/>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Edit" style="width:50px">
<p:rowEditor />
</p:column>
<p:rowExpansion>
<p:dataTable id="contentId" var="content"
value="#{nodeedit.contents}" id="contents" editable="true">
<p:ajax event="rowEdit" listener="#{nodeedit.save('content')}"/>
<p:column headerText="Text" style="width:450px">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{content.text}" escape="false" />
</f:facet>
<f:facet name="input">
<p:inputTextarea value="#{content.text}" style="width:100%"/>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Edit" style="width:50px">
<p:rowEditor />
</p:column>
</p:dataTable>
</p:rowExpansion>
</p:dataTable>
I have also tried another way. The Content of a Node is also an object, in the Node Class I have defined
List<LibContent> contents = new ArrayList<LibContent>();
so, like what siebzOr said, I wrote in my jsf something like:
<p:rowExpansion>
<p:dataTable var="content" value="#{somenode.content}">
**<p:ajax event="rowEdit" listener="#{nodeedit.save()}"/>**
<p:column>
<h:outputText value="#{content.someValue}" />
</p:column>
<!-- Other columns -->
</p:dataTable>
</p:rowExpansion>
and in backingbean nodeedit, I have
public void save() {
for (Content content : node.contents)
System.out.println("content.text");
}
I found that the content.text never changed no matter what I did in the page. But if I define List<Content> contents = new ArrayList<Content>() directly in nodeedit, it can get the new value!! That's why I tried to get the nodeId everytime I toggle the node-table and then update the contents in backingbean. Did I do something wrong with it?

Answer 1

p:rowExpansion is dynamic and loads it's data using AJAX. Something like this should work:
<h:form>
<p:dataTable value="#{nodeedit.list}" var="somenode" styleClass="datatable">
<p:column>
<p:rowToggler />
</p:column>
<!-- Your columns here -->
<p:rowExpansion>
<p:dataTable var="content" value="#{nodeedit.contentOf(somenode)}">
<p:column>
<h:outputText value="#{content.someValue}" />
</p:column>
<!-- Other columns -->
</p:dataTable>
</p:rowExpansion>
</p:dataTable>
</h:form>
In your backing bean you should have a method to get the content of a node, in my example contentOf(Node node)
#Named // or #ManagedBean
#ViewScoped // or some other scope
public class Nodeedit
{
private List<Node> list;
//Getters and Setters
public List<SomeClass> contentOf(Node node)
{
// get and return the content of the node
}
}
If your Node has a method to get the Content you can do something like this in stead:
<p:rowExpansion>
<p:dataTable var="content" value="#{somenode.content}">
<p:column>
<h:outputText value="#{content.someValue}" />
</p:column>
<!-- Other columns -->
</p:dataTable>
</p:rowExpansion>
If a Node's content isn't a Collection of some sort I'm not sure it will work in a p:dataTable as the value.
I don't know what your classes look like so the above is just an idea.
Note also that I have put a h:form around the p:dataTable in stead of putting multiple forms in the p:dataTable itself. This is needed for multiple things like AJAX, selection, etc. You cannot nest forms.