PrimeFaces expand row on row click

Question

I have RowExpansion dataTable

<p:dataTable value="#{clients.clients}" var="client">
   <p:column>
      <p:rowToggler  />
   </p:column>

   <p:column headerText="name" sortBy="#{client.name}">
      <h:outputText value="#{client.name}"/>
   </p:column>
   <p:column headerText="email" sortBy="#{client.email}">
      <h:outputText value="#{client.email}" />
   </p:column>

   <p:rowExpansion>
      <p:panelGrid  columns="2">
         <h:outputText value="Id:" />
         <h:outputText value="#{client.id}" />
      </p:panelGrid>
   </p:rowExpansion>
</p:dataTable>

And I need to do two things:

1. Expand row on row click
2. Hide previous expanded rows.

So how to do this?

Answer 1

You can extend the togglerSelector event to tr instead of the icon.

You can see this clearly in the bindExpansionEvents function, the current togglerSelector is > tr > td > div.ui-row-toggler all you have to do is bind the same event to >tr, and of course before expanding the clicked row, you collapse all the expanded rows by calling collapseAllRows().

Here's a full example:

function rowExpansion(dataTable) {
   //dataTable should be the widgetVar object
   var $this = dataTable;
   //add the 'hand' when hovering on row
   $this.tbody.children('tr').css('cursor', 'pointer')
   $this.tbody.off('click.datatable-expansion', '> tr')
      .on('click.datatable-expansion', '> tr', null, function() {
         //before expanding collapse all rows
         $this.collapseAllRows();
         //toggle the current row the old toggler
         $this.toggleExpansion($(this).find('div.ui-row-toggler'));
       });
 }

Then simply call it in the $(document).ready

$(document).ready(function() {
   rowExpansion(PF('dataTableWV'));// if you are using PF 3.5 or lower pass the the object without PF() shortcut
});

See: online demo

Answer 2

I just implemented the solution of @Hatem Aliman in Primefaces 5.1 and it works fine so far.

If you enabled rowExpandMode="single", you don't need to close the opened rows by yourself. Just comment out the row: $this.collapseAllRows();