title: JSF 2/PrimeFaces 4.0: Can a link in a row expand the row?
body: <p>Given the code below (taken from the <a href="http://www.primefaces.org/showcase/ui/data/datatable/expansion.xhtml" rel="nofollow">PrimeFaces ShowCase)</a>, what is the best way to change the functionality so that the text in the second column - <code>&lt;h:outputText value="#{car.id}" /&gt;</code> - acts as a link to expand/contract the row (rather than the <code>&lt;p:rowToggler&gt;</code> image)? </p>
  
  <p>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 <a href="http://www.primefaces.org/showcase/ui/data/datatable/expansion.xhtml" rel="nofollow">PrimeFaces ShowCase)</a>, (and played with similar code for a few hours), but I've been unable to get it done.</p>
  
  <p><strong><em>ShowCase code:</em></strong></p>
  
  <pre><code>&lt;h:form&gt;
      &lt;p:dataTable var="car" value="#{dtBasicView.cars}"&gt;
          &lt;f:facet name="header"&gt;
              Expand rows to see detailed information
          &lt;/f:facet&gt;
          &lt;p:column style="width:16px"&gt;
              &lt;p:rowToggler /&gt;
          &lt;/p:column&gt;
          &lt;p:column headerText="Id"&gt;
              &lt;h:outputText value="#{car.id}" /&gt;  &lt;!-- This text needs to be a link that expands the row --&gt;
          &lt;/p:column&gt;
          &lt;p:column headerText="Year"&gt;
              &lt;h:outputText value="#{car.year}" /&gt;
          &lt;/p:column&gt;
  
          &lt;p:rowExpansion&gt;
              &lt;p:panelGrid  columns="2" columnClasses="label,value" style="width:300px"&gt;
                  &lt;f:facet name="header"&gt;
                      &lt;p:graphicImage name="demo/images/car/#{car.brand}-big.gif"/&gt; 
                  &lt;/f:facet&gt;
  
                  &lt;h:outputText value="Id:" /&gt;
                  &lt;h:outputText value="#{car.id}" /&gt;
  
                  &lt;h:outputText value="Year" /&gt;
                  &lt;h:outputText value="#{car.year}" /&gt;
  
                  &lt;h:outputText value="Color:" /&gt;
                  &lt;h:outputText value="#{car.color}" style="color:#{car.color}"/&gt;
  
                  &lt;h:outputText value="Price" /&gt;
                  &lt;h:outputText value="$#{car.price}" /&gt;
              &lt;/p:panelGrid&gt;
          &lt;/p:rowExpansion&gt;
      &lt;/p:dataTable&gt;
  &lt;/h:form&gt;
  </code></pre>
  
  <hr>
  
  <p><strong><em>Edit</em></strong> - Found a simple solution, but not sure it's the most elegant. Any reason not to use this?</p>
  
  <pre><code>&lt;p:column style="display:none !important"&gt;
      &lt;p:rowToggler /&gt;
  &lt;/p:column&gt;
  &lt;p:column&gt;
      &lt;h:outputLink value="#"&gt;#{car.id}&lt;/h:outputLink&gt;
  &lt;/p:column&gt;`
  </code></pre>