将行组件动态添加到JSF 2 dataTable

Question

I have a dataTable where each row represents an auction item, and a Bid button next to each item. When the user clicks the button I need to show a little bidding component with an input text, and a button to submit the bid. This "bidding" component needs to be right under the auction item the user is bidding on.

With regular HTML this is simple: just have another row, conditionally rendered under the auction item row. I know how to do this.

But dataTable is based on columns, and I need to dynamically render not a column, but a row (with colspan equals the number of columns in this dataTable.)

(I'm not sure if this is clear enough so I'll try saying it in other words: the dynamically inserted row does not have another auction item. It has a couple of other widgets.)

Is there a way to do this?

Answer 1

I don't think you can achieve what you want with only original JSF's tags. In fact, it may be very difficult for you to develop such composite component on your own.

Fortunately, if you take a look at PrimeFaces's <p:dataTable> , you will see a feature called ExpandableRows . Your table should look like this:

<h:form>  
    <p:dataTable var="item" value="#{mrBean.itemsToBid}">  

        <f:facet name="header">  
             Items for Bidding  
        </f:facet>  

        <p:column style="width:16px">  
            <p:rowToggler />  
        </p:column>  

        <p:column headerText="Name" >
            #{item.name}
        </p:column>  

        <p:column headerText="Condition" >  
            #{item.condition} 
        </p:column>  

        <p:rowExpansion>  

            <h:panelGrid id="display" columns="2" > 
                <h:outputText value="Your bid:" />  
                <h:inputText  value="#{mrBean.bidAmount}" />  

                <h:commandButton actionListener="#{mrBean.bid(item)}" value="Bid"/>  
            </h:panelGrid>  

        </p:rowExpansion>  
    </p:dataTable>  
</h:form>  

Your bidding form is inside the <p:rowExpansion> component and it does appear right below your item row.