Dynamically adding row component to 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?

Mr.J4mes · Accepted Answer · 2012-01-09 16:38:15Z

4

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.

edited Jan 9, 2012 at 16:38

answered Jan 8, 2012 at 15:22

Mr.J4mes

9,28412 gold badges51 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Herzog Over a year ago

Thanks, Mr. J4mes. Looks like this could work. But I need the rowToggler to be a command like with the text reading "Place Your Bid" and I don't need the little arrow. Can this be done?

Mr.J4mes Over a year ago

One of the attribute of <p:rowToggler /> is class. You can write a CSS button, for example, an image with the phrase Place your bitch :P and map it to this button.

Mike Braun Over a year ago

Nice answer (+1 from me), but please remove h:outputText and use the expression directly in p:column ;)

Mr.J4mes Over a year ago

@MikeBraun thks :P. Btw, <p:column> does not have any attributes for value. How can I put the expression directly in it? Besides, all the showcase for <p:dataTable> used <h:outputText> :P. I think it looks neater that way too.

Herzog Over a year ago

Thanks again. Any chance for a code sample for this? I've always been a server side guy and never worked with css...

|

Collectives™ on Stack Overflow

Dynamically adding row component to JSF 2 dataTable

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related