row group - deactivate specific row

MadMax76

HI, I have this datatable:

$(document).ready(function() {
    $.fn.dataTable.moment( 'DD.MM.YYYY' );
    var collapsedGroups = {};
    var top = '';
    var parent = '';

    var table = $('#table_orders').DataTable({
        dom: "<'toolbarfreig'>Bfrtip",
        ajax: "../../../../../../../DataTables/Editor/controllers/XXX.php",
        columns: [
            { data: "GLT_GLREIHENFOLGE"},
            { data: "Eb1", title: "Ebene 1" },
            { data: "Eb2", title: "Ebene 2" },
            { data: "Eb3", title: "Ebene 3" },
            { data: "Eb4", title: "Ebene 4" },
            { data: "Eb5", title: "Ebene 5" },
            { data: "Eb6", title: "Ebene 6" },
            { data: "SAD_KONTONR", title: "KtoNr" }, //7
            { data: "KTO_KONTOBEZ", title: "KtoBez" },
            { data: "SAD_Saldo" , title:"Betrag",  render: $.fn.dataTable.render.number( '.', ',', 2, '' ),  className: 'dt-body-right' },
            { data: "VJ_saldo" , title:"Betrag Vorjahr",  render: $.fn.dataTable.render.number( '.', ',', 2, '' ),  className: 'dt-body-right' },
            { data: "diff_j_vj" , title:"Differenz",  render: $.fn.dataTable.render.number( '.', ',', 2, '' ),  className: 'dt-body-right' }, //11
     ],
        columnDefs:[
            { type: "num", targets: 0 },
            {targets: [ 0, 1, 2,3,4,5,6,7,8,9,10,11], orderable: false },
            {targets: [0, 1, 2, 3, 4 ,5 ,6 ], visible: false},
    ],
        order: [[0, 'asc']],
        orderable: false,
        stripeClasses: [],
        paging: false,
        select: true,
        "info": "",
        buttons: [
            {extend: 'copy', text: 'kopieren Zwischenablage',},
            {extend: 'csv', text: 'download als csv',}
            ],

        rowGroup: {
            dataSrc: ["Eb1", "Eb2", "Eb3" ],
            startRender: function(rows, group, level) {
                var api = $('#table_orders').DataTable();
              if (level === 0) {
                    top = group;
                    all = group;
                } else if (level == 1) {
                    parent = top + group;
                    all = parent;
// if parent collapsed, nothing to do
                  //  if (collapsedGroups[top]) {return;}
                } else {

// if parent collapsed, nothing to do
                    if (collapsedGroups[parent]) {return;}

                    all = top + parent + group;
                }
                var collapsed = collapsedGroups[all];
                console.log(group, collapsed);

                rows.nodes().each(function(r) {
                    r.style.display = collapsed ? 'none' : '';
                });


                var intVal = function ( i ) {
                    return typeof i === 'string' ?
                            i.replace(/[\$,]/g, '') * 1 :
                            typeof i === 'number' ?
                                    i : 0;
                };

                sum_j = rows.data().pluck("SAD_Saldo").toArray().reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );
                sum_j = Intl.NumberFormat('de-DE').format(sum_j);

                sum_vj = rows.data().pluck("VJ_saldo").toArray().reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );
                sum_vj = Intl.NumberFormat('de-DE', { maximumFractionDigits: 0}).format(sum_vj);

                sum_diff = rows.data().pluck("diff_j_vj").toArray().reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );
                sum_diff = Intl.NumberFormat('de-DE').format(sum_diff);


                return $('<tr/>')
                        .append('<td colspan=2>' + group + '</td><td style="text-align: right">' + sum_j +'</td><td style="text-align: right">' + sum_vj +'</td><td style="text-align: right">' + sum_diff +'</td>')
                        .attr('data-name', all)
                        .toggleClass('collapsed', level === 0 ? false : collapsed);
            }
        },
        initComplete: function () {
            var api = this.api();

            var dataSrc = api.rowGroup().dataSrc();
            console.log(dataSrc);
            api.rows().every( function ( rowIdx, tableLoop, rowLoop ) {
                var data = this.data();

                var key = '';

                for (i=0; i<dataSrc.length; i++) {
                    key += data[dataSrc[i]];
                    collapsedGroups[key] = true;
                }
            } );
            console.log(collapsedGroups);
            api.draw();
        },
    });

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

This always shows Eb1+Eb2 at the beginning, works fine so far. But if GLT_GLREIHENFOLGE == 9999 I would like NOT to show Eb2 as start and also deactivate clicking Eb1, so Eb2 (and the others) never get shown.

Thanks
Max

allan

Hi Max,

I'm afraid what you are looking for isn't possible with RowGroup at the moment. There isn't a way to define a condition on the match other than the default exact grouping.

Nice idea for an enhancement though.

Allan

MadMax76

I would like the enhancement ;-) I still hope for the row-group-functionalities we discussed about a year or so ago.

regards,Max

kthorngren

also deactivate clicking Eb1, so Eb2 (and the others) never get shown.

Try an if condition for GLT_GLREIHENFOLGE == 9999 in the click event, lines 116-120) to skip lines 117-119 if you don't want to toggle the group display.

Kevin

allan

I know sorry - too much on the plate at the moment . RowGroup is an extension that has a lot of possible future enhancements that I'd like to see myself.

Allanb

MadMax76

Thanks Kevin, you brought me on the right way: This is the way it works for me:

if(group!="ausblenden")
   {
   return $('<tr/>')
    .append('<td colspan=2>' + group + '</td><td style="text-align: right">' + sum_j +'</td><td style="text-align: right">' + sum_vj +'</td><td style="text-align: right">' + sum_diff +'</td>')
    .attr('data-name', all)
    .toggleClass('collapsed', level === 0 ? false : collapsed);
      } else {
     return $('<tr/>')
    }

group being the value in Eb1 (therefore "ausblenden" instead of "9999".

Thanks!
Max