Problem with rowgroup expand and collapse with same name

Problem with rowgroup expand and collapse with same name

devilfishdevilfish 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

  • kthorngrenkthorngren Posts: 21,336Questions: 26Answers: 4,951

    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.visible to 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

  • devilfishdevilfish Posts: 7Questions: 3Answers: 0

    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 A or Math B, you can see both rows expands, as the share the same name.

  • kthorngrenkthorngren Posts: 21,336Questions: 26Answers: 4,951
    Answer ✓

    Looks like you need to incorporate the code from this example from this thread. It sets the data-name attribute based on keeping track of the level names using global variables top and parent.

    Kevin

  • devilfishdevilfish Posts: 7Questions: 3Answers: 0

    Thank you. That thread you linked solved my problem :)

Sign In or Register to comment.