jsfprimefaces

Expand primefaces rowExpansion on rowSelect


I have a dataTable with a rowExpasion inside, i want to expand this based on rowSelection.

When the user clicks the row it expands that row, without the need of a <p:rowToggler/>

    <p:dataTable var="foo" value="#{fooBean.foos}" lazy="true" selection="#{fooBean.foo}" selectionMode="single" rowExpandMode="single"
        paginator="false" rows="10">
        <p:ajax event="rowSelect" oncomplete="PF('rowExpansion').expand(?)" />

        <p:column headerText="Value">
            <h:outputText value="#{foo.value}" />
        </p:column>

        <p:rowExpansion>
            sweetstuffinside
        </p:rowExpansion>
    </p:dataTable>

Also,i don't wan't to have the <p:rowToggler> visible, if possible.


Solution

  • The answer lies here: PrimeFaces expand row on row click Although that gave me different problems, it's another topic, this answer fulfill the need to expand the rows on click.

    Remember you need to keep the <p:rowToggler/> inside the table as a column.

    Just replace the rowExpansion(PF('dataTableWidgetVar')); for your correct datatable widgetVar

    <script type="text/javascript">
            $(document).ready(function() {
                   rowExpansion(PF('dataTableWidgetVar'));
                });
    
            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'));
                       });
            }
            </script>