rowGroup expand collapse all row group with button

bbrindza

I have a table the uses the rowGoup extension with startRender function that expands and collapses the row groups.

By default all groups are collapsed. All this works great.

Now I am trying to code a function for 2 buttons that would "expand all" and "collapse all"

I am having a difficult time trying to figure this out.

Has anyone did this before? Of has an idea how to do this?

Below is the code from rowGroup function.

   rowGroup: {
               dataSrc: [ 'employee_full_name', 'out_of_office'],
               startRender: function (rows, group, level) {
                   var all;

                   if (level === 0) {
                       level_1 = group;
                       all = group;
                       level_2 ='';
                   } else {
                       // if parent collapsed, nothing to do
                       if (!!collapsedGroups[level-1]) {
                           return;
                       }

                    if (level === 1) {
                           level_2 = group
                         }
                       
                    all = level_1 + level_2 + group;
                   }
                   console.log(group, level, all)
                     
                   var collapsed = !!collapsedGroups[all];

                   rows.nodes().each(function (r) {
                       r.style.display = 'none';
                       if (collapsed) {
                         r.style.display = '';
                       }});

                  //fontawsome + and - 
                  var toggleClass = collapsed ? 'fa fa-minus-circle' : 'fa fa-plus-circle';
                  var groupTD = '';

                    if(level == 0){
                                  groupTD = '<td colspan="' + rows.columns()[0].length +'">' + group + ' (' + rows.count() + ')</td>'
                    }else{
                                  groupTD = '<td colspan="' + rows.columns()[0].length +'">' + '<span style="color:#007bff;" class="fa fa-fw ' + toggleClass + ' toggler"/> ' + group + ' (' + rows.count() + ')</td>'
                     }

                // Add category name to the <tr>
                return $('<tr/>')
                  .append(groupTD)
                  .attr('data-name', all)
                  .toggleClass('collapsed', collapsed);

               }
   }

kthorngren

You are tracking the collapsed groups in the global variable collapsedGroups. One option is to manipulate that object variable in your "expand all" and "collapse all" event handlers to show or hide the grouped rows.

Another option is to use another global variable as a flag. The flag would have three values; 1 to process normally, 2 show all and 3 show none. Use that flag in startRender.

You button event handlers will need to call draw() to redraw the rowGroups.

Kevin

bbrindza

Thank you for the suggestions. I will work these options out.

OSF

I have the same problem. Have any a simple example code, please ?

kthorngren

Start with this thread. There are many other threads with variations of the example in this thread. Search for collapsedGroups to find other discussions.

Kevin