Geek asks and answers

How at that time could one row expand into <p: dataTable>?

In my application, I have a column <p:datatable>with rowExpansion. I have a requirement to open one line at a time. If someone tries to extend the second line remains the first line will be expanded, there will be created a single message: First close the expanded row and then open another row.

How can this be implemented? Any pointer would be very helpful to me. thank

+6
source share
4 answers

You can use (I tested it in mojarra 2.1.20 and Primefaces 3.5, and it works fine) the following solution, which calls the JavaScript function when expanding the string. When you click on the second line, and there is another extended line, it raises an event click, which, in turn, discards a previously opened line.

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>
+5
source

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

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

This is not exactly what was asked, but I hope this helps others.

+8
source

Browse the datatable.jsfile in the section "Privems here . There is a javascript function called toggleExpansion.

Perhaps you can override this function and call the original one when no lines are expanded, and show the message when another line is already expanded (and the original one is not called).

Just an idea ...

+1
source

You can achieve this with this custom method.

give 'togglerClass' this class for example

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

JavaScript code is 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");
        });
    });
}

calling this method in ready-made windows.

0
source

More articles:


All Articles