Reputation: 519
I have a nested datatable with row expension so far so god, but I want to keep all rows expanded (open) how to achieve this on primefaces?
thanks in advance.
Sorry, I didn't tell what version of primefaces am I using, version 3.5.
Upvotes: 2
Views: 19263
Reputation: 3610
You can keep open rowExpansion if only update a row child and not update all form or dataTable.
For example as follows if the parent row were item 3:
update=":tabViewDetail:idTableDetailProduct:3:idTableDetailProductChild"
Y para hacerlo de forma dinámica podríamos hacerlo pasándole el índice del elemento padre:
update=":tabViewDetail:idTableDetailProduct:#{productController.indexParent}:idTableDetailProductChild"
And the index of the parent row can be obtained with the following attribute by add it in the parent dataTable:
rowIndexVar="indexParent"
And we seted it to the bean like this:
<f:setPropertyActionListener value="#{indexParent}" target="#{productController.indexParent}" />
An example would be the following
ProductsList.xhtml
<!-- PRODUCT LIST -->
<p:dataTable id="idTableDetailProduct"
value="#{productController.productDetailDTOs}"
var="productDetail"
...
rowIndexVar="indexParent">
<p:rowExpansion>
<!-- PRODUCT LIST CHILD -->
<p:dataTable id="idTableDetailProductChild"
value="#{productDetail.productDTO.listProductsChild}"
var="productChild"
...>
<!-- VIEW PRODUCT DETAIL -->
<p:commandButton
id="idCommandButtonDetailProductChild"
...>
<f:setPropertyActionListener value="#{indexParent}" target="#{productController.indexParent}" />
</p:commandButton>
productController Bean (Java)
@ManagedBean(name="productController")
public class ProductController{
int indexParent;
public int getIndexParent() {
return indexParent;
}
public void setIndexParent(int indexParent) {
this.indexParent = indexParent;
}
}
ProductDialog.xhtml
<h:body>
<ui:composition>
<p:dialog id="idDialogDetailProduct"
...>
<!-- SAVE COMPONENT BUTTON -->
<p:commandButton
id="idCommandButtonUpdate"
...
update=":tabViewDetail:idTableDetailProduct:#{productController.indexParent}:idTableDetailProductChild" />
</p:dialog>
</ui:composition>
</h:body>
This example I got from the answer to this post
Upvotes: 0
Reputation: 6660
If you want to have your rows collapsed on start:
<p:headerRow>
<p:column styleClass="my-class">
<h:outputText value="#{bean.value}"/>
</p:column>
</p:headerRow>
...
<script>
$(document).ready(function () {
$('td.my-class > .ui-rowgroup-toggler').click();
});
</script>
Upvotes: 0
Reputation: 31679
According to the Primefaces 4.0 documentation:
p:rowToggler component places an expand/collapse icon, clicking on a collapsed row loads expanded content with ajax. If you need to display a row as expanded by default, use expandedRow attribute which is evaluated before rendering of each row so value expressions are supported.
To keep all rows open, use it in your datatable like this:
<p:dataTable value="#{bean.list}" expandedRow="#{true}">
To keep the rows open that were open before an update, you need to:
p:dataTable
you should in the expandedRow
attribute put an EL that evaluates the current row it is processing (use the var attribute or the index on the datatable or the rowkey) that returns true for each row that was expanded before.Something like this (not fully tested)
<p:dataTable value="#{bean.list}" var="myRow" expandedRow="#{bean.isExpanded(myRow)}">
Here is the feature request at google code, which was targeted for 3.5.12 and 4.0.
Upvotes: 15
Reputation: 630
Another solution could be:
<p:commandButton type="button" onclick="jQuery('.ui-row-toggler').click()" value="Expand/Collapse All" />
Upvotes: 3