Collapse / Expand Click Groups

Collapse / Expand Click Groups

thowithowi Posts: 64Questions: 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!!

Replies

  • colincolin Posts: 3,280Questions: 0Answers: 584

    Hi @thowi,

    See this example from this thread,

    Cheers,

    Colin

  • thowithowi Posts: 64Questions: 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: 3,280Questions: 0Answers: 584

    Hi @thowi ,

    This will do it! Hope that does the trick,

    Cheers,

    Colin

  • thowithowi Posts: 64Questions: 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: 3,280Questions: 0Answers: 584

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

    C

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

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

  • colincolin Posts: 3,280Questions: 0Answers: 584

    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: 64Questions: 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: 3,280Questions: 0Answers: 584

    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: 64Questions: 7Answers: 0

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

Sign In or Register to comment.