CODEWITHSUNDEEP
jsf-2primefacesdatatable
Diganta
Diganta

Reputation: 691

How at a time one row can expand in <p:dataTable>?

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

Upvotes: 7

Views: 11043

Answers (4)

Irfan Nasim
Irfan Nasim

Reputation: 2242

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.

Upvotes: 0

Anton
Anton

Reputation: 1419

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.

Upvotes: 9

Rong Nguyen
Rong Nguyen

Reputation: 4189

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>

Upvotes: 5

Jens
Jens

Reputation: 6383

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...

Upvotes: 1

Related Questions