Collapse / Expand Click Groups

Collapse / Expand Click Groups

thowithowi Posts: 67Questions: 7Answers: 0

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!!

«1

Replies

  • colincolin Posts: 12,608Questions: 0Answers: 2,154

    Hi @thowi,

    See this example from this thread,

    Cheers,

    Colin

  • thowithowi Posts: 67Questions: 7Answers: 0

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

    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!!

  • colincolin Posts: 12,608Questions: 0Answers: 2,154

    Hi @thowi ,

    This will do it! Hope that does the trick,

    Cheers,

    Colin

  • thowithowi Posts: 67Questions: 7Answers: 0

    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!

  • colincolin Posts: 12,608Questions: 0Answers: 2,154

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

    C

  • thowithowi Posts: 67Questions: 7Answers: 0
  • thowithowi Posts: 67Questions: 7Answers: 0

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

  • colincolin Posts: 12,608Questions: 0Answers: 2,154

    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

  • thowithowi Posts: 67Questions: 7Answers: 0

    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!

  • colincolin Posts: 12,608Questions: 0Answers: 2,154

    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

  • thowithowi Posts: 67Questions: 7Answers: 0

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

  • kthorngrenkthorngren Posts: 13,786Questions: 25Answers: 3,242
    edited 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

  • pirex360pirex360 Posts: 4Questions: 0Answers: 0

    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

  • colincolin Posts: 12,608Questions: 0Answers: 2,154

    @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

  • omarfarooq787omarfarooq787 Posts: 4Questions: 0Answers: 0

    @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?

  • kthorngrenkthorngren Posts: 13,786Questions: 25Answers: 3,242

    @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

  • omarfarooq787omarfarooq787 Posts: 4Questions: 0Answers: 0

    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

  • colincolin Posts: 12,608Questions: 0Answers: 2,154
    edited February 3

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

    Colin

  • omarfarooq787omarfarooq787 Posts: 4Questions: 0Answers: 0

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

  • omarfarooq787omarfarooq787 Posts: 4Questions: 0Answers: 0

    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.

  • kthorngrenkthorngren Posts: 13,786Questions: 25Answers: 3,242

    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

  • SchnitzerSchnitzer Posts: 6Questions: 0Answers: 0
    edited May 23

    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);
        });  
    });
    
  • colincolin Posts: 12,608Questions: 0Answers: 2,154

    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

  • kthorngrenkthorngren Posts: 13,786Questions: 25Answers: 3,242

    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

  • SchnitzerSchnitzer Posts: 6Questions: 0Answers: 0
    edited May 24

    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.

  • colincolin Posts: 12,608Questions: 0Answers: 2,154

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

    Colin

  • SchnitzerSchnitzer Posts: 6Questions: 0Answers: 0

    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 :confused: when the exact same code is working in my environment.

  • colincolin Posts: 12,608Questions: 0Answers: 2,154

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

    Colin

  • SchnitzerSchnitzer Posts: 6Questions: 0Answers: 0

    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

  • SchnitzerSchnitzer Posts: 6Questions: 0Answers: 0

    Any suggestions?

Sign In or Register to comment.