How at a time one row can expand in ?

Question

In my application I have a with rowExpansion column. I have a requirement to open a single row at a time. If anyone tries to ex

Answer 1

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.

Answer 2

Check out the datatable.js file in Primefaces here. There is a javascript function called toggleExpansion.

Maybe you can override this function and call the original one when no row is expanded and show a message when another row is already expanded (and not call the original one).

Just an idea...

Answer 3

As of 2015, and this question is first in Google search results, I want to add that for PrimeFaces 5.1, there is dataTable attribute rowExpandMode, when set to single - allows only one row to be shown. Example:

<p:dataTable var="line" value="#{bean.lines}" rowExpandMode="single">

It's not exactly what was asked, but I hope that it'll help to others.

Answer 4

You can use (I have tested it in mojarra 2.1.20 and Primefaces 3.5 and it works fine) the following solution which calls a JavaScript function when the row is expanded. When clicking on a second row, and there is another expanded row, it will trigger a click event, which will in turn collapse the previously opened row.

xhtml:

<p:ajax event="rowToggle" onstart="test();"/>  

Javascript:

<script type="text/javascript">
    function test(){
        var i = $('.ui-row-toggler.ui-icon-circle-triangle-s').length;
        if(i == 1){return;}
            $('.ui-row-toggler.ui-icon-circle-triangle-s').trigger('click');
    }
</script>