0

Given the code below (taken from the PrimeFaces ShowCase), what is the best way to change the functionality so that the text in the second column - <h:outputText value="#{car.id}" /> - acts as a link to expand/contract the row (rather than the <p:rowToggler> image)?

Not sure how easy this is/should be, but I'm pretty new to PrimeFaces and unsure of how this could be done. I've looked through the documentation and the PrimeFaces ShowCase), (and played with similar code for a few hours), but I've been unable to get it done.

ShowCase code:

<h:form>
    <p:dataTable var="car" value="#{dtBasicView.cars}">
        <f:facet name="header">
            Expand rows to see detailed information
        </f:facet>
        <p:column style="width:16px">
            <p:rowToggler />
        </p:column>
        <p:column headerText="Id">
            <h:outputText value="#{car.id}" />  <!-- This text needs to be a link that expands the row -->
        </p:column>
        <p:column headerText="Year">
            <h:outputText value="#{car.year}" />
        </p:column>

        <p:rowExpansion>
            <p:panelGrid  columns="2" columnClasses="label,value" style="width:300px">
                <f:facet name="header">
                    <p:graphicImage name="demo/images/car/#{car.brand}-big.gif"/> 
                </f:facet>

                <h:outputText value="Id:" />
                <h:outputText value="#{car.id}" />

                <h:outputText value="Year" />
                <h:outputText value="#{car.year}" />

                <h:outputText value="Color:" />
                <h:outputText value="#{car.color}" style="color:#{car.color}"/>

                <h:outputText value="Price" />
                <h:outputText value="$#{car.price}" />
            </p:panelGrid>
        </p:rowExpansion>
    </p:dataTable>
</h:form>

Edit - Found a simple solution, but not sure it's the most elegant. Any reason not to use this?

<p:column style="display:none !important">
    <p:rowToggler />
</p:column>
<p:column>
    <h:outputLink value="#">#{car.id}</h:outputLink>
</p:column>`
Jeff Levine
  • 2,083
  • 9
  • 30
  • 38

2 Answers2

1

The default PrimeFaces configuration doesn't allow for anything else than a <p:rowToggler /> to toggle a <p:rowExpansion>.

One solution could be using some custom JS functions to add/remove CSS classes on generated HTML elements.

The other solution can be found here : http://forum.primefaces.org/viewtopic.php?f=3&t=11308&p=55114#p55114. It's about modifying PrimeFaces sources to match your needs.

Thrax
  • 1,926
  • 1
  • 17
  • 32
  • Cool, thanks. I found another way to get it done, but curious if there is an advantage to some JS over it: I placed the `` in a `` with `display:none`: `` Thoughts? – Jeff Levine Oct 24 '14 at 11:51
  • Well i don't see how your solution allows the user to expand the `` after clicking on the id column. – Thrax Oct 24 '14 at 12:07
  • The `` isn't displayed, but is still expanding the ``, although it appears that the `` being clicked is the cause. – Jeff Levine Oct 24 '14 at 12:19
1

There is a easy way to do that. Create a link in a div and modify the class of the div with "ui-row-toggler" which you can get from rowToggler html source. e.g. 

<div class="ui-row-toggler"><a href="##" class="ui-row-toggler">Test</a></div>

The reason you can do that is because if you check the html source for primefaces row toggler, you can find it is 

<div class="ui-row-toggler ui-icon ui-icon-circle-triangle-e"></div>

So the only thing you need to do is putting the same class to your customized div which has a link inside.

Jay Wu
  • 11
  • 1