RowGroup collapse

antoniocib

Hi guys i just tried to add in my code the collapse for the row Group, but whatever i make never work..
Can you help me?

        var collapsedGroups = {};

var table = $('#Buono').DataTable( {

    paging: false,
    ajax: {
            url: 'php/table.Buono.php',
            type: 'POST',
            data: function (d) {
                d.startDate = $('#startDate').val();
                d.endDate = $('#endDate').val();
                d.autista = $('#autista').val();
            }

    },
    order:[10,8],

columns:[

            {
                "data": "buono.prov_mittente",
                orderable:false,
            searchable:false //3
            },
            {
                "data": "buono.destinatario",
                orderable:false,
            searchable:false //4
            },


            {
                "data": "buono.n_bancali",
                orderable:false,
            searchable:false //7
            },
            {
                "data": "buono.n_bxd" //8
            },
            {
                "data": "buono.data_bxd",
                orderable:true
    //9
            },
            {
                "data": "buono.autista" //10
            },
            {
                "data": "buono.prezzo",
                orderable:false,
            searchable:false,
            visible:false //10
            },
            {
                "data": "cond.zona",
                orderable:false,
            searchable:false
        } //11


],

    rowGroup: {
    dataSrc: ['buono.autista', 'buono.n_bxd'],

    startRender: function ( rows, group, level) {

        var collapsed = !!collapsedGroups[group];

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

var subLevelCount = '';
 if ( level === 0 ) {
var subLevelCount =rows.data().pluck( 'buono' ).pluck( 'n_bxd').unique().count();
return group+' ('+subLevelCount+' Viaggi)';
         } else {
     return group +' ('+rows.count()+' Scarichi)';
         }
     },
     endRender: function ( rows, group, level ) {
     var stipendio_parziale = 500;
     var subLevelCount = '';
     if  ( level === 0 ) {
                                var colore = 'verde';
                 return $('<tr/>')
                 .addClass(colore)
             }
             else {
                 var colore= 'giallo';
                    return $('<tr/>')
                      .addClass(colore)
             }
             },

},

} );
$('#dateSearch').on('click', function () {
  table.ajax.reload();

});

  editor.on( 'submitSuccess', function () {
        table.ajax.reload();

} );

$('#Buono tbody').on('click', 'td.dtrg-group dtrg-start', function() {
    var name = $(this).data('').pluck('buono').pluck('n_bxd');
    collapsedGroups[name] = !collapsedGroups[name];
    table.draw(false);
});
} );
}(jQuery));

allan

Where did you get the code from? Collapsing groups isn't something that has built in support in RowGroup. Can you link to a running test case showing the issue so we can help to debug it please?

Allan

antoniocib

Idk how to do a test case but the code i find it: https://jsfiddle.net/lbriquet/k2zr5Lws/1/

allan

Thanks for the link. The show / collapse appears to work just fine for me there.

Allan

antoniocib

@allan but why in my code doesnt work, i think the problem is there:

$('#Buono tbody').on('click', 'td.dtrg-group dtrg-start', function() {
    var name = $(this).data('').pluck('buono').pluck('n_bxd');
    collapsedGroups[name] = !collapsedGroups[name];
    table.draw(false);

allan

Honestly, I don't know because I can't see the broken case. The example you posted works okay. I would need to be able to see a broken case to have any chance of debugging it!

Allan

colin

If you can update the test case to demonstrate the problem, please, we can debug it then,

Colin

antoniocib

@allan and @colin i can give you only this http://www.comidb.it/pos1/scrivania.php

Can u help me plssssssssssssss?

colin

There isn't any code in that link to collapse/expand the groups! For us to progress this, as I said, "update the test case to demonstrate the problem, please, we can debug it then"

Colin

kthorngren

You have $('#buono tbody').on('click', 'tr.group-start', function() { for your click event. tr.group-start is no longer used by RowGroup. Change tr.group-start to tr.dtrg-start.

Kevin

antoniocib

@kthorngren anyway not works

colin

It' would be worth looking at this example as it's doing exactly what you want - hopefully that'll get you going,

Colin

antoniocib

@colin work in this way, but i need that when i load the data the rows have to load in collapse

colin

With this tweak, the rows are collapsed at the start: http://live.datatables.net/migixiqi/620/edit . That should give you a starting point to continue with the customisation,

Colin

antoniocib

Yes @colin but i try in another method:

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

HangarLabs

Yes, it was only the class selector just as @kthorngren said! Thanks!

As the example,
- you just have to declare a variable (var mytable) to the Datatable instance
- Copy and paste the startRender within the rowGroup as it is
- Copy and paste the jquery onclick routine and change the table id in the selector
- ** Change the class just as as @kthorngren said
- and the last line should be with the variable of the datatable instance myTable.draw(false);

info@i-it.se

I would really like the RowGroup to work as Bootstrap accordion