p:dataTable expand all/Collapse all rows

UI Components for JSF
Post Reply
srao_kanuri
Posts: 1
Joined: 09 Nov 2017, 18:03

14 Dec 2017, 21:03

Hi Team,

I am using dataTable rowgroup control (One in the link below), And added two buttons "Expand All" and "Collapse All" to expand and collapse all the header rows. Unfortunately the code we used is not working. Can i have some inputs to proceed further on this issue?

Control details :
https://www.primefaces.org/showcase/ui/ ... roup.xhtml

Code :
<div>
<p:commandButton type="button"
onclick="jQuery('.ui-row-toggler').click()" value="Expand All" />
<p:commandButton type="button"
onclick="jQuery('.ui-row-toggler').click()" value="Collapse All" />
</div>

Expectation :
Expand and collapse all the car.brand.


Thanks,
R

dougnlizt
Posts: 31
Joined: 30 Apr 2013, 15:10

22 May 2019, 19:20

I realize this is an old post... were you able to find a way to change the rowGroup expansion? I'm trying to change it so it is not expanded by default, but I can't figure out yet how to do that (or if I can). I noticed there was a feature suggested to have an attribute, which I think would be awesome (https://github.com/primefaces/primefaces/issues/2443). Any guidance here would be great.
PrimeFaces version 10.0.0; Payara Server 5.2021; NetBeans 12.1

dougnlizt
Posts: 31
Joined: 30 Apr 2013, 15:10

22 May 2019, 22:24

I have a temporary (patch) solution that seems to be working well for me. In this particular case, I simply want all rowgroups collapsed. Here's what I have...

Code: Select all

	<script type="text/javascript">
            $(document).ready(function () {
                collapseDetailsRows();
            });
            /*A property to set row groups to auto-collapse does not currently
             * exist with the primefaces component.  This will auto-collapse
             * every rowgroup, which is what I want in this case.*/
            function collapseDetailsRows() {
                var rowGroups = $('.ui-rowgroup-toggler');
                for (var i = 0; i &lt; rowGroups.length; i ++) {
                    $(rowGroups[i]).trigger('click');
                }
            }
        </script>
I can then call this js function from an ajax component as needed:

Code: Select all

		<p:ajax process="@this"
                                    update=":myForm"
                                    oncomplete="collapseDetailsRows();"
                                    />
Ideally this would be added as an attribute to this PF component. It's been a while, so maybe it's too low of a priority.
PrimeFaces version 10.0.0; Payara Server 5.2021; NetBeans 12.1

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 19 guests