DataTables & rowGroup: Multi-level Collapse / Expand

sswm

Hi all.

By the article https://datatables.net/extensions/rowgroup/examples/initialisation/multipleGroups.html
created a grid with multi-level grouping.

Now I'm trying to complement the opportunity Collapse / Expand by clicked by groups.
But, it does not work correctly at the 0th level. Nested items are not collapsed.
Please see live.datatables.net/kuruvipi/1/edit?js,output

Sorry for my english.

Thank you for your help!!

kthorngren

I didn't debug what you had. It looked like you found this example from this thread. I copied the startRender into your example and it seems to work.
http://live.datatables.net/kuruvipi/2/edit

Kevin

sswm

Thanks for the answer, Kevin.
Initially, the code was taken from the example you are talking about.
But, in this option, click on any group of the 2nd level, for example, "A-Plus 4 (1)" or "Royal Queen (5)" - there is no collapse.
If you click on a group of the 3rd level "2020-06-19", then all groups with the date "2020-06-19" that belong to the 1st level are collapsed.

colin

I just tried that with Chrome and Firefox, and both those groups collapsed as expected:

Could you give some more instructions on how to reproduce, please.

Colin

sswm

I click on the group "2020-06-19" in the group "A-Plus 4". But, the group "2020-06-19" also collapses in the group "Royal Queen". Watch the video:

sswm

This is how it works for me (in both Crome and Firefox):

kthorngren

This is the Sonya Frost group:

Sonya Frost (6) A-Plus 4 (1) 2020-06-19 (1) 1358666 Royal Queen (5) 2020-06-19 (5) 1358589 1358622 1358708 1358713 1358797

As you said the current example will close 2020-06-19 for both A-Plus 4 and Royal Queen when clicked. This is due to how its keeping track of the closed groups using all = top + group;. This creates a data-name with the parent+group.

Are you wanting that when clicking A-Plus 4 (1) > 2020-06-19 it will close only that group and leave the other 2020-06-19 groups open? If so the code will need to be updated to keep track of the middle groups so that data-name contains the full "grouping path". Maybe a middle variable can be added for this.

If you need help with this or are expecting something different please let us know.

EDIT: I updated the example to track the middle group:
http://live.datatables.net/gasoculo/1/edit

Maybe this is what you want. If you are going to have more levels then you will need to update the code to track all the levels.

Kevin

sswm

Unfortunately, in your version the 2nd level has ceased to be collapsed ("A-Plus 4", "Royal Queen", etc.). But the 1st and 3rd levels collapse / expand correctly.

sswm

Corrected the code and now everything works correctly:
live.datatables.net/memamoci/1/watch?js,output
Thanks for the idea.

How else to make all groups was collapsed by default?

sswm

Collapse all groups by default done.

Nessler

Hello,

I adjusted to manipulate N columns, just add them to "dataSrc" array.
I also fixed the event of collpase and expand, now all children collapse and expand.

http://live.datatables.net/zucasaca/1/edit

HuiBin

Thanks Nessler, your code is working perfectly in my project. Cheers!

rayncy

@Nessler how can I add auto counter number every webmaster? like 1. Sonya Frost; 2. Tiger Nixon ?

colin

You would need to use a global counter for that - something like this:
http://live.datatables.net/cobokime/1/edit
Colin

rayncy

@colin Thanks for the response. Yes , I already applied your answer but when the row expanded counter also increment. please see attached link:

http://live.datatables.net/zucasaca/44/

kthorngren

The rowGroup.startRender documents the parameters available to the function. You will want to use the level parameter:

The nesting level. Top level is index 0.

If its 0 then increment the counter if not then don't increment.

Kevin