RowGroup collapse

RowGroup collapse

antoniocibantoniocib Posts: 277Questions: 62Answers: 1
edited April 2022 in Free community support

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));

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • antoniocibantoniocib Posts: 277Questions: 62Answers: 1

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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

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

    Allan

  • antoniocibantoniocib Posts: 277Questions: 62Answers: 1

    @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);
    
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

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

    Colin

  • antoniocibantoniocib Posts: 277Questions: 62Answers: 1

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

    Can u help me plssssssssssssss?

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • antoniocibantoniocib Posts: 277Questions: 62Answers: 1

    @kthorngren anyway not works

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

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

    Colin

  • antoniocibantoniocib Posts: 277Questions: 62Answers: 1

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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583
    Answer ✓

    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

  • antoniocibantoniocib Posts: 277Questions: 62Answers: 1

    Yes @colin but i try in another method:

           rows.nodes().each(function(r) {
                         r.style.display = collapsed ? '' : 'none';
                       });
    
  • HangarLabsHangarLabs Posts: 1Questions: 0Answers: 0
    edited October 2022

    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.seinfo@i-it.se Posts: 9Questions: 3Answers: 0

    I would really like the RowGroup to work as Bootstrap accordion :)

Sign In or Register to comment.