CODEWITHSUNDEEP
jsfprimefaces
danillosl
danillosl

Reputation: 519

How to keep primefaces rowexpansion open?

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

Answers (4)

Borja
Borja

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

Michał Stochmal
Michał Stochmal

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

Aritz
Aritz

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:

  • Keep track (server side might be best) of which rows are opened and closed manually (do this via ajax)
  • On (re)loading the 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

slavov
slavov

Reputation: 630

Another solution could be:

<p:commandButton type="button" onclick="jQuery('.ui-row-toggler').click()" value="Expand/Collapse All" />

Upvotes: 3

Related Questions