Expand primefaces rowExpansion on rowSelect

Question

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.

It is all just html, css and javascript. There is a select event. In which you can call some javascript which in turn can do a 'click' on the rowToggler — Kukeltje, Jul 22 '15 at 18:10
@Kukeltje i don't know what exactly to call on this case, tried but i don't know what to click so it gets only the row i want... — prabello, Jul 22 '15 at 18:11
Break down your problem. First you need to get the right row. A little searching in google results in finding this:http://stackoverflow.com/questions/20946557/to-get-the-row-number-of-the-selected-primefaces-datatable-row — Kukeltje, Jul 22 '15 at 18:19

score 2 · Accepted Answer · edited May 23 '17 at 12:02

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>

Hello i got this Widget for var 'dataTableWV' not available! – — Fernando Pie, Mar 03 '17 at 21:10
$this.collapseAllRows(); doesn't work. It's not a function. I'm using primefaces 4.0. Any idea? — Doug LN, Jun 19 '20 at 03:02

score 0 · Answer 2 · edited Dec 23 '21 at 07:10

you can achieve this with the help of this custom method.

give 'togglerClass' this class like

<pou:column styleClass="togglerClass" style="width:16px">
    <pou:rowToggler/>
</pou:column>

JavaScript code here;

function prodsToggler() {
    $('.togglerClass div').click(function () {
        var currentTr = $(this).closest("tr");
        var $trs = $('.togglerClass').closest("tr").not(currentTr);
        $trs.each(function (index, el) {
            var $this = $(el),
                    $next = $this.next(".ui-expanded-row-content");

            $this.removeClass("ui-expanded-row");
            $next.remove();

            $this.find(".ui-row-toggler").removeClass("ui-icon-circle-triangle-s");
        });
    });
}

call this method in windows ready.

score 0 · Answer 3 · answered Apr 05 '17 at 15:27

Here is one that works for PF 6.0.17 and includes adding the ENTER key to open and close the row.

$(document).ready(function() {
    rowExpansion('tableEntity');
});

rowExpansion : function(dataTableWidgetVar) {
    // dataTable should be the widgetVar object
    var $this = PF(dataTableWidgetVar);

    // turn off row toggler events
    var togglerSelector = '> tr > td > div.ui-row-toggler';
    $this.tbody.off('click.datatable-expansion', togglerSelector);
    $this.tbody.off('keydown.datatable-expansion', togglerSelector);

    // add the 'hand' when hovering on row
    $this.tbody.children('tr').css('cursor', 'pointer');

    // now set the toggle to be the whole row
    togglerSelector = '> tr';

    $this.tbody
        .off('click.datatable-expansion', togglerSelector)
        .on('click.datatable-expansion',
            togglerSelector,
            null,
            function() {
                // toggle the current row
                $this.toggleExpansion($(this).find('div.ui-row-toggler'));
            })
        .on('keydown.datatable-expansion',
            togglerSelector,
            null,
            function(e) {
                var key = e.which, keyCode = $.ui.keyCode;

                if ((key === keyCode.ENTER || key === keyCode.NUMPAD_ENTER)) {
                    $this.toggleExpansion($(this).find('div.ui-row-toggler'));
                    e.preventDefault();
                }
            });
}

Expand primefaces rowExpansion on rowSelect

3 Answers3