CODEWITHSUNDEEP
jsf-2primefaces
ravi
ravi

Reputation: 6328

How to put Subrows inside dataTable in PrimeFaces v3.5

I simply wants to put some subrows in my p:dataTable. I have a list of cars which can be bought by any number of people. I want to show this in a datatable. In which first row contains the information about the car, the next following lines contains information about the buyer. This pattern will be repeated for each car.

Below is my car bean, which is having an array of buyer (Getters and setters are omitted here)-

public class Car {    
    private int id;
    private String name;
    private String model;
    private Buyer[] buyer;
}

The Buyer bean looks like below-

public final class Buyer {
    private int id;
    private String name;
    private String address;
}

Finally below is the controller, which contains a list of cars-

@ManagedBean
@ViewScoped
public class Seller implements Serializable{
    private List<Car> list;
}

As per Daniel's suggesation, I implemented it in this way-

    <p:panel>
        <h:form>
            <p:dataTable id="dataTable" var="car" value="#{seller.list}">
                <p:column style="width:4%">  
                    <p:rowToggler />  
                </p:column> 
                <p:column style="width:32%">  
                    <f:facet name="header">  
                        Id
                    </f:facet>  
                    <h:outputText value="#{car.id}" />  
                </p:column>  
                <p:column style="width:32%">  
                    <f:facet name="header">  
                        Name
                    </f:facet>  
                    <h:outputText value="#{car.name}" />  
                </p:column>  
                <p:column style="width:32%">  
                    <f:facet name="header">  
                        Model
                    </f:facet>  
                    <h:outputText value="#{car.model}" />  
                </p:column>
                <p:rowExpansion>  
                    <p:dataTable var="buyer" value="#{car.buyer}">  
                        <p:column headerText="Id">  
                            <h:outputText value="#{buyer.id}" />  
                        </p:column>  
                        <p:column headerText="Name">  
                            <h:outputText value="#{buyer.name}" />  
                        </p:column>  
                        <p:column headerText="Address">  
                            <h:outputText value="#{buyer.address}" />  
                        </p:column>  
                    </p:dataTable>  
                </p:rowExpansion>
            </p:dataTable>  
        </h:form>
    </p:panel>

Upvotes: 0

Views: 2471

Answers (1)

Daniel
Daniel

Reputation: 37061

Take a look at the showcase DataTable - RowExpansion

As to expanding all... One way could be:

Include some js file , with the following code 

$(document).ready(function () { 
    $(".ui-row-toggler").click(); 
});

or include it in your xhtml page 

<h:outputScript target="head">
    $(document).ready(function () { $(".ui-row-toggler").click(); });
</h:outputScript>

There might be other more native api usage to expand the rows (but I'm not familiar with those)

Upvotes: 1

Related Questions