Multi-level rowGroup

Pixelo

Hello

How collapsed in multi-level group eny group?
In my working only the lowest group.

example:

   $(document).ready( function () {
    var collapsedGroups = {};
        var moneyGrid =
            $('#example').DataTable({
                paging: false,
                "processing": true,
                //here comes my ajax injection, left out for live.datatables example
                orderFixed: [[0, 'asc'],[1, 'asc']],
                rowGroup: {
                    endRender: null,
                    startRender: function (rows, group) {
                        var collapsed = !!collapsedGroups[group];
                        rows.nodes().each(function (r) {
                            r.style.display = collapsed ? 'none' : '';
                        });
                        var salesGroupSum = rows
                            .data()
                            .pluck(4)
                            .sum();
                        salesGroupSum = $.fn.dataTable.render.number('.', ',', 2, '', ' zł').display(salesGroupSum);

                        return $('<tr/>')
                            .append('<td colspan="4"> ' + group + '</td>')
                            .append('<td>' + salesGroupSum + '</td>')//salesGroupSum
                            .attr('data-name', group)
                            .toggleClass('collapsed', collapsed);
                    },
                    dataSrc:[ 0,1]
                },
                dom: 'lfrtBip',
                //buttons: ['print', 'excel', 'pdf'],
                responsive: true,
                initComplete: function () {
                    // Start with closed groups
                    $('#example tbody tr.dtrg-start').each(function () {
                        var name = $(this).data('name');
                        collapsedGroups[name] = !collapsedGroups[name];
                    });
                    moneyGrid.draw(false);
                }
            });


        // Change the fixed ordering when the data source is updated
        moneyGrid.on('rowgroup-datasrc', function (e, dt, val) {
            moneyGrid.order.fixed({ pre: [[val, 'asc']] }).draw();
        });

        //$('a.group-by').on('click', function (e) {
        //    e.preventDefault();

        //    moneyGrid.rowGroup().dataSrc($(this).data('column'));
        //});

        // Collapse Groups
        $('#example tbody').on('click', 'tr.dtrg-start', function () {
            var name = $(this).data('name');
            collapsedGroups[name] = !collapsedGroups[name];
            moneyGrid.draw(false);
        });
} );

My lib:

    <link rel="stylesheet" type="text/css" href="~/DataTables/DataTables-1.10.18/css/jquery.dataTables.css">
    <link rel="stylesheet" type="text/css" href="~/DataTables/Buttons-1.5.6/css/buttons.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="~/DataTables/Buttons-1.5.6/css/buttons.dataTables.css">
    <link rel="stylesheet" type="text/css" href="~/DataTables/Select-1.3.0/css/select.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="~/DataTables/DataTables-1.10.18/css/jquery.dataTables.css">
    <link rel="stylesheet" type="text/css" href="~/DataTables/RowGroup-1.1.0/css/rowGroup.dataTables.min.css">
    <script type="text/javascript" src="~/DataTables/DataTables-1.10.18/js/jquery.dataTables.js"></script>
    <script type="text/javascript" src="~/DataTables/RowGroup-1.1.0/js/dataTables.rowGroup.min.js"></script>
    <script type="text/javascript" src="~/DataTables/sum().js"></script>
    <script type="text/javascript" src="~/DataTables/datatables.js"></script>
    <script type="text/javascript" src="~/DataTables/JSZip-2.5.0/jszip.min.js"></script>
    <script type="text/javascript" src="~/DataTables/pdfmake-0.1.36/pdfmake.min.js"></script>
    <script type="text/javascript" src="~/DataTables/pdfmake-0.1.36/vfs_fonts.js"></script>
    <script type="text/javascript" src="~/DataTables/Buttons-1.5.6/js/buttons.html5.min.js"></script>
    <script type="text/javascript" src="~/DataTables/Buttons-1.5.6/js/buttons.colVis.min.js"></script>
    <script type="text/javascript" src="~/DataTables/Buttons-1.5.6/js/dataTables.buttons.js"></script>
    <script type="text/javascript" src="~/DataTables/Buttons-1.5.6/js/buttons.print.min.js"></script>
    <script type="text/javascript" src="~/DataTables/Buttons-1.5.6/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" src="~/DataTables/Buttons-1.5.6/js/buttons.flash.min.js"></script>
    <script type="text/javascript" src="~/DataTables/Select-1.3.0/js/dataTables.select.min.js"></script>

kthorngren

Not sure I understand your question. Please provide a link to your page or a test case replicating the problem. Please provide the steps to replicate the issue so we can help you diagnose.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

colin

Hi @Pixelo ,

That was a fun early morning challenge! I didn't use your code, I based this on the code from this earlier thread. You should be able to modify that to suit your needs,

Cheers,

Colin

Pixelo

thank you, it works
live.datatables.net/migixiqi/1/edit

Loren Maxwell

I'll add here that you can get away from hardcoding the colspan by using rows.columns()[0].length, such as:

.append('<td colspan="'+rows.columns()[0].length+'">' + group + ' (' + rows.count() + ')</td>')

rupams87

@collin The example you have provided works velly in two level of grouping but its break when have multilevel grouping. Have you implemented any generic solution?

tangerine

@Pixelo's example has more than two levels.