Okay
  Public Ticket #3384119
Expand/Collapse all Rows
Closed

Comments

  • Sven started the conversation

    is there any way to create a command that expands or collapses all lines with one click? 

    https://daten.kvno.de/kompasspraxisstart/

    As an example of such a function:
    https://www.kvno.de/praxis/haeufige-fragen/abrechnung-im-ausland 

    Background of the question is that it would then be possible for the users to print the complete table via the browser print function including the hidden columns.

  •  1,848
    Miloš replied

    Hi, Sven.

    Firstly, I would like to sincerely apologize for the delayed response as we have been experiencing an unusually high number of tickets. I am sorry that it has taken longer than usual to respond to your concern and your patience is highly appreciated.

    -

    1. I see what you mean, that is a very good example.

    6861476836.png

    At the moment, we do not have anything like this available with our plugin,

    and no workarounds to achieve it, but it is a nice idea for a future option.

    Please feel free to search on our suggestions page

     to see if someone may be already suggested this feature. If you can't see it, feel free to add your suggestion there,  and as more people vote, the feature will move higher on the priority list.

    You can certainly follow our changeLog page if you'd like ( it is also available in the plugin dashboard), where we state any changes/new features/bug fixes during updates;

    and our newsletter, so you're informed about new features, bug fixes, freebies, etc.

    -

    If you wish to try a custom solution right now, i think it can be done with a custom button you place on the page close to the table,

    and you can add custom JS with an event listener on button click, 

    to add a CSS class to all the table's rows.

    Basically, with the plugin built-in responsive "hidden columns" design, there is a CSS class we named "detail-show", that gets "triggered", whenever we click on the + symbol, 

    and then all the hidden data gets revealed only to the clicked row.

    -

    So, if you can somehow manage to create the button that has a script with an event listener for the click,

    here is the CSS selector for the table rows on your page :

    .wpdt-c.wdt-skin-light .wpDataTablesWrapper table.wpDataTable tr

    If you can add class named "detail-show" to the table row element, for all of the rows - you could achieve a custom solution.

    But, our support does not cover custom solutions, and we did not try something like that yet.

    -


    I will show you a custom workaround to have all rows expanded at all times, with Conditional Formatting, i hope it might help as an idea to get started/ or an alternate solution :

    We will add two Conditional Formatting rules to your first "responsive column" (that has the + expander symbol).

    - For this example, I have this table, and we will make a two-column responsive layout for mobile screens. ( we will select the first two columns to be visible on mobile screens, and hide the others)

    3159265571.png

    - Basically, with the plugin built-in responsive "hidden columns" design, there is a CSS class we named "detail-show", that gets "triggered", whenever we click on the + symbol, 

    and then all the hidden data gets revealed.

    - Now, If we create two conditional statements in the column that has the"+" symbol ( the first column shown on mobile screens); 

    we can "add this class" to the rows, as long as the cell value isn't empty;

    but also another rule to say : if the cell is empty,  also add the same CSS class to that case.

    9371729033.png

    - So, basically, this improvised solution will look as if you pressed the + sign on all the rows by default.

    ( In case if you need to auto-expand only the rows which are not empty  - you can simply remove the second rule)

    - Here is a screenshot of the resulting table:

    2334750878.png


    I hope it helps.smile.png



    2. In regards to being able to print everything visible on the page, yes - if you use the built-in function, for example as in Windows operating system, if we press "Ctrl+P" and if the rows are expanded in that moment,

    you will see everything visible on the page on the Print Preview.

    For example, if i collapse most columns in my table and just leave "ID" and "Client" columns,

    in the Print Preview of Windows, it does show it exactly as it is on the page, when i expand the rows.

    8885245338.png


    1279751919.png
    2455847498.png
    9706692820.png


    But, with our built-in Export Table Tools,

    at the moment it is not possible to export any collapsed columns like that, our CSV/PDF/Excel or "Copy to clipboard" will only take the fully visible columns.

    4996356923.png

    I hope that helps.

    Kind Regards, 

    Miloš Jovanović
    [email protected]

    Rate my support

    Try our FREE mapping plugin! MapSVG - easy Google maps, interactive SVG maps and floor plans, choropleth maps and much more - https://wordpress.org/plugins/mapsvg-lite-interactive-vector-maps/

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia demo sites | Docs | Discord Community

    You can try wpDataTables add-ons before purchasing on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables