rowGroup expand collapse all row group with button
rowGroup expand collapse all row group with button
bbrindza
Posts: 329Questions: 78Answers: 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
This discussion has been closed.
Answers
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
Thank you for the suggestions. I will work these options out.
I have the same problem. Have any a simple example code, please ?
Start with this thread. There are many other threads with variations of the example in this thread. Search for
collapsedGroupsto find other discussions.Kevin