How at a time one row can expand in ?

Question

In my application I have a <p:datatable> with rowExpansion column. I have a requirement to open a single row at a time. If anyone tries to expand second row, remaining first row expanded then one message will be generated saying First close the expanded row and then open another row.

How this can be implemented ? Any pointer will be very helpful to me. Thanks

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

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>

Answer 4

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.