Collapse / Expand Click Groups

thowi · November 2018

Hi all together,

https://datatables.net/extensions/rowgroup/examples/initialisation/customRow.html

I like to have a possibility to click on the group name like "Averages for Edinburgh" and the group should expand/collapse. Per default when loading the site, the group should be collapsed.

For doing that, I also found this thread here, where redwall was able to embed such a function for his DataTable:
https://datatables.net/forums/discussion/comment/61474/#Comment_61474

But my Javascript skills are less than available

Would someone of you be so kind and help me out here? How can I reach the above described functionality on the basic example of "Custom row rendering / aggregates"?

Thank you for your help!!

colin · November 2018

Hi @thowi,

See this example from this thread,

Cheers,

Colin

thowi · November 2018

Hi Colin! Wow, thank you - great example, exactly what I looked for and I also got it running in my application

Can you please also help me out on the issue "Per default when loading the site, the group should be collapsed."?

Which part do I need to change so the site will start in collapsed mode?

Thank you for your help!!

colin · November 2018

Hi @thowi ,

This will do it! Hope that does the trick,

Cheers,

Colin

thowi · November 2018

Thank you @colin! I see the change.
You added the following lines ahead of the last block from the previous example.

$('#example tbody tr.group-start').each(function() {
    var name = $(this).data('name');
    collapsedGroups[name] = !collapsedGroups[name];
  });
  table.draw(false);

When I add this snipped to the previous example it works just fine! But when I add it to my file at the same place, it doesn't work - and doesn't work mean, that it starts "open" and won't collapse on click any more. So, completely broken.

    // Collapse Groups
$('#example tbody tr.group-start').each(function() {
    var name = $(this).data('name');
    collapsedGroups[name] = !collapsedGroups[name];
 });
 example.draw(false);
        
$('#example tbody').on('click', 'tr.group-start', function () {
      var name = $(this).data('name');
      collapsedGroups[name] = !collapsedGroups[name];
      example.draw(false);
 });

I also checked the javascript console in my browser - no errors, no warnings.
Do you have any clue which things can block the snipped?
This is my current project where I added the snipped to line 134.

Thank you for your time! I really appreciate your help here!

colin · November 2018

That's a private paste, I haven't got permission to view it.

C

thowi · November 2018

Sorry @colin, my mistake: https://pastebin.com/XQJ3XK5k

thowi · November 2018

Maybe much better to use: http://live.datatables.net/surifeda/1/

colin · November 2018

Hi @thowi ,

Thanks for the example. Here you go - the closing of the groups need to happen in the initComplete because of your language config. See this thread here for an explanation.

Cheers,

Colin

thowi · November 2018

Hi @colin ,

ah, I would have never found that
I just tried to move that closing snippet to the initComplete option: http://live.datatables.net/wafemabi/1/edit
I assume I did not do that correctly... because it doesn't do any better

initComplete: function () {
      $('#example tbody tr.group-start').each(function() {
        var name = $(this).data('name');
        collapsedGroups[name] = !collapsedGroups[name];
      });
      table.draw(false);
    }
What did I miss here?

Thank you for your help!

colin · November 2018

Annoyingly, I had done it, but in my "Here you go" I forgot to paste the line. Here it is now - daft problem, you were referring to the wrong variable (table, not example).

C

thowi · November 2018

@Colin aaaah, thank you so much, now it is working! Awesome

kthorngren · September 2020

The later versions of RowGroup have changed the classes used for the RowGroup tr. These examples still work but the click event selector needs to be changed from tr.group-start to tr.dtrg-start. Here is the first example updated to illustrate:
http://live.datatables.net/neyaxalo/1/edit

This line is changed:
$('#example tbody').on('click', 'tr.dtrg-start', function () {

Kevin

pirex360 · January 2021

Hi,

This examples are all for fixed colspan, i wonder how to fix this to support automatic colspan, because the cells could be dynamic.

Pirex

colin · January 2021

@pirex360 I'm not clear what you mean, but it sounds like a different issue to the main thread so it would be worth raising a new issue with a test case to demonstrate the issue. It's worth noting that DataTables doesn't support colspan inside the table's body, only in the header or footer,

Colin

omarfarooq787 · February 2021

@colin I have a question, I used your code to collapse all groups on page load but the problem is it only collapses rows on first page, here is the code I used

$('#table tbody tr.dtrg-start').each(function() {
var name = $(this).data('name');
collapsedGroups[name] = !collapsedGroups[name];

});

I took the example from this link http://live.datatables.net/nitemova/1/edit

Any idea how this can be done so that on load the collapsed is implemented on all rows on all pages?

kthorngren · February 2021

@omarfarooq787 From the example you linked this code sets the initial collapsed value:

  $('#example tbody tr.group-start').each(function() {
    var name = $(this).data('name');
    collapsedGroups[name] = !collapsedGroups[name];
  });

If you look at it you will see it only loops through the RowGroups on the page displayed as those are the only rows in the DOM.

In order to initially set the collapsedGroups object for all the groups you will need to get all the unique values for the column using `-api column().data(), something like this:

  table.column(2).data().unique().each( function ( d, j ) {
    collapsedGroups[d] = !collapsedGroups[d];
  } );

I updated the example to show this:
http://live.datatables.net/nitemova/97/edit

Kevin

omarfarooq787 · February 2021

Dear @kthorngren, Thanks for your quick reply. I am sorry but I have multi row groups for which I took the code using this example http://live.datatables.net/migixiqi/304/edit and on page load I only want the level-1 items to be collapsed for all pages. I added your code to the example link and it's not working.

you help is very appreciated.
Omar

colin · February 2021

Yep, you can do that in the rowGroup.startRender function by checking level 1 - see here: http://live.datatables.net/migixiqi/307/edit

Colin

omarfarooq787 · February 2021

Dear @colin thanks for your answer, much appreciated. It worked pretty well.

omarfarooq787 · February 2021

Dear @colin and @kthorngren thanks for your help in the last couple of days. I just have one more query. I have implemented a collapse all and expand all button using the code to collapse/expand all 2 level groups
$('#table tbody tr.dtrg-level-1').each(function () {
var name = $(this).data('name');
collapsedGroups[name] = !collapsedGroups[name];
});
$('#table tbody tr.dtrg-level-0').each(function () {
var name = $(this).data('name');
collapsedGroups[name] = !collapsedGroups[name];
});
table.draw(false);

The issue is this doesn't work for the row which is already expanded. If there a way to put a check if expanded then collapse, if collapsed then expand.

Thanks for your help on this. Much appreciated.

kthorngren · February 2021

Its difficult to say where the problem is. Please update or provide a test case with the code you have so we can take a look.

You can debug the values of collapsedGroups[name] and see they are boolean. Debug the value in the area where the code isn't working to see if it is as expected.

Kevin

Schnitzer · May 2021

Hi @kthorngren @colin

Thanks for your replies on this post. I've got a similar requirement where I'm using rowgroup to aggregate rows and would like them to be expandable on click. The only difference is my data is Ajax sourced.

I tried various solutions posted above and while I did get the aggregate row showing up and working, the click to expand/collapse is not working. The aggregate and child rows are always displaying.

Is there a different approach for Ajax source data? Here's my JS:

$(document).ready(function() {
    var collapsedGroups = {};
    var table = $('#example').DataTable({
        "ajax": "my ajax datasource",
        "order": [[ 2, "desc" ]],
        rowGroup: {
            dataSrc: 'Office',
            startRender: function ( rows, group ) {
                var collapsed = !!collapsedGroups[group];
                rows.nodes().each(function (r) {
                    r.style.display = collapsed ? 'none' : '';
                });

                return $('<tr/>')
                    .append('<td colspan="8">' + group + ' (' + rows.count() + ')</td>')
                    .attr('data-name', group)
                    .toggleClass('collapsed', collapsed);
            },
        },
        columns: [
            { "data": "Name" },
            { "data": "Position" },
            { "data": "Office" },
            { "data": "Age" },
            { "data": "Start_date" },
            { "data": "Salary" },
        ],
    });

    $('#example tbody tr.group-start').each(function() {
        var name = $(this).data('Office');
        collapsedGroups[name] = !collapsedGroups[name];
    });
    table.draw(false);
    
    $('#example tbody').on('click', 'tr.group-start', function () {
        var name = $(this).data('Office');
        collapsedGroups[name] = !collapsedGroups[name];
        table.draw(false);
    });  
});

colin · May 2021

This is a tricky one to debug looking at the code. We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

kthorngren · May 2021

You probably need to move lines 30-33 inside initComplete. Using ajax is an asynchronous process so this code is running before Datatables has completed initialization.

Kevin

Schnitzer · May 2021

I tried creating a test case by looks like there is no way to provide the Ajax datasrc. Here's the current example using HTML: http://live.datatables.net/hoyilobi/1/edit

I've commented out the ajax pieces just for the example.

Also, @kthorngren I tried moving that block inside initComplete but didn't work. Hopefully the test case might give a better view of the problem.

Thanks in advance for your help!

PS: To add, with the ajax bits, the aggregate and child rows are showing up, but the click to hide/show isn't working.

colin · May 2021

This example here is ajax sourced, so you could use this to create that test case that demonstrates the issue,

Colin

Schnitzer · May 2021

Thanks Colin. I've updated the test case: http://live.datatables.net/ruhuguwu/9/edit.

Not sure why even the aggregate rows aren't working in the test case when the exact same code is working in my environment.

colin · May 2021

The ordering of the libraries was wrong - you need to put DataTables before RowGroup - I've updated it here .

Colin

Schnitzer · May 2021

Awesome, thanks! I've added the bits I grabbed from this thread for having childrows collapsed: http://live.datatables.net/ruhuguwu/12/edit

Seems like it has now impact on the outcome

Schnitzer · May 2021

Any suggestions?

Collapse / Expand Click Groups

Collapse / Expand Click Groups

Replies

Howdy, Stranger!

Categories

DataTables

Collapse / Expand Click Groups

Collapse / Expand Click Groups

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables