Problem with rowgroup expand and collapse with same name
Problem with rowgroup expand and collapse with same name
devilfish
Posts: 7Questions: 3Answers: 0
I have a working table using rowGroup plugin.
rowGroup: {
dataSrc: [
'instructor_name',
'hours_spend',
],
startRender: function ( rows, group, level ) {
var collapsed = !!collapsedGroups[group];
rows.nodes().each(function (r) {
r.style.display = 'none';
if (collapsed) {
r.style.display = '';
}
});
return $('<tr/>')
.append('<td colspan="7">' + group + ' (' + rows.count() + ')</td>')
.attr('data-name', group)
.toggleClass('collapsed', collapsed);
}
}
$('#my-table tbody').on('click', 'tr.dtrg-start', function() {
var name = $(this).data('name');
collapsedGroups[name] = !collapsedGroups[name];
$('#billing-table').DataTable().draw(false);
});
The problem here is that my 'hours_spend' can have the same name under different 'instructor_name'. So when clicking a rowGroup with 'hours_spend', all rowGroups with same name expand and collapses.
I can solve this problem by making the names unique, i.e. adding an ID to the source. But i dont want this ID to be visible in the table. Any suggestions to make my expand/collapse work when the rows have same name?
This question has an accepted answers - jump to answer
Answers
My guess is that you aren't sorting the table to properly build the groups. You defined two columns to group and for rowGroup to work properly you need to sort both columns. See this example. If sorted properly I would expect all the group names to be unique.
You can use
columns.visibleto hide the ID or any other column. Not sure if adding an ID will help without trying it. If you want suggestions please build a simple test case with an example of your table and data.https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin
The rowGrouping already works. It is the expand/collapse function that is the problem.
I have created a test case here.
If you click
Math AorMath B, you can see both rows expands, as the share the same name.Looks like you need to incorporate the code from this example from this thread. It sets the
data-nameattribute based on keeping track of the level names using global variables top and parent.Kevin
Thank you. That thread you linked solved my problem