rowGroup expand collapse all row group with button

rowGroup expand collapse all row group with button

bbrindzabbrindza Posts: 299Questions: 68Answers: 1

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);

               }
   }

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736
    Answer ✓

    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

  • bbrindzabbrindza Posts: 299Questions: 68Answers: 1

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

  • OSFOSF Posts: 18Questions: 0Answers: 0

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

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    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

This discussion has been closed.