using rowgroup and responsive at once

using rowgroup and responsive at once

MadMax76MadMax76 Posts: 149Questions: 33Answers: 1

Hi,

I have seen in
https://datatables.net/extensions/rowgroup/examples/initialisation/responsive.html
that this "generally" works.

If I add this code in order to have a click-to-collapse-feature:

startRender: function(rows, group, level) {
                var api = $('#table_orders').DataTable();
                var all;

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

                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;
                };
                var numFormat = $.fn.dataTable.render.number( '.', ',', 0, '' ).display;

                sumzahl = rows.data().pluck("BUC_BUCHUNGSBETRAG").toArray().reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );
                sumzahl = numFormat(sumzahl);

                sumoff = rows.data().pluck("BUC_OPBETRAG").toArray().reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );
                sumoff = numFormat(sumoff);

                return $('<tr/>')
                                        .append('<td colspan=4>' + group + ' (' + rows.count() + ')</td><td style="text-align: right">' + sumzahl +'</td><td style="text-align: right">' + sumoff +'</td>')
                                        .attr('data-name', all)
                                        .toggleClass('collapsed', level === 0 ? false : collapsed);
            }

the responsive part does not work anymore.

PLUS: is there any way to have the colspan=4 react to the number of cols that are visible?

Thanks
Max

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 19,462Questions: 26Answers: 4,610
    edited October 2022

    the responsive part does not work anymore.

    Do you meant the columns don't get hidden or clicking the responsive icon doesn't work? Please provide a test case showing the issue so we can take a look.
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Kevin

  • MadMax76MadMax76 Posts: 149Questions: 33Answers: 1
    edited October 2022

    columns are not hidden - that is the problem.

    tried to set it up here
    http://live.datatables.net/gayiyibo/1/edit
    but not very sucessful.... does not run at all...

    also here
    http://live.datatables.net/hijiholo/15/edit
    when adding "responsive: true" and also the responsive library, this does not work (not change anything)

    Thanks
    Max

  • kthorngrenkthorngren Posts: 19,462Questions: 26Answers: 4,610
    edited October 2022

    The first test case has lots of errors in the browser's console. The second is getting this error in dataTables.responsive.js:

    Uncaught ReferenceError: jQuery is not defined.

    The problem is you are loading responsive.js before datatables.js adn jquery.js. Order is important and responsive.js requires datatables.je which requires jquery.js. I changed the load oder in this updated test case and responsive works:
    http://live.datatables.net/hijiholo/16/edit

    Best practice is to use the Download Builder to get all the appropriate files in the proper order.

    Kevin

  • MadMax76MadMax76 Posts: 149Questions: 33Answers: 1

    Hi Kevin,

    still no success, I downloaded newest versions of everything, checked the order,....
    Here is the "real" scenario:

    https://portal.kontura.at
    User: allan@datatables.net
    PW: Kevin123

    on the top right hand there is the menu, go to "offene Posten Kreditoren"

    Thanks!

    Thanks!
    Max

  • kthorngrenkthorngren Posts: 19,462Questions: 26Answers: 4,610

    I'm not a CSS expert and not familiar with Flexbox but that seems to be causing the issue as the container is not resizing with the page. Since its not resizing Responsive doesn't need to kick in. There are lots of threads, like this one discussing how to use Flexbox with Responsive. I tired Allan's answer by adding max-width: 100%; to one of the containers.

    body > div.main-panel > div.content {
        flex-basis: 400px;
        flex-grow: 1;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        max-width: 100%;
        /* background-color: #f1f1f1; */
    }
    

    That seems to have fixed the Responsive column hiding:

    More may be needed but that should get you started.

    Kevin

  • MadMax76MadMax76 Posts: 149Questions: 33Answers: 1

    thats the solution - thansk a lot!!!!

    Have you also got an idea about the second part: PLUS: is there any way to have the colspan=4 react to the number of cols that are visible?

  • kthorngrenkthorngren Posts: 19,462Questions: 26Answers: 4,610

    When you say react do you mean change the number from 4 to the number of visible columns?

    Kevin

  • MadMax76MadMax76 Posts: 149Questions: 33Answers: 1

    yes, that would be the idea.

  • kthorngrenkthorngren Posts: 19,462Questions: 26Answers: 4,610
    Answer ✓

    In the rowGroup.startRender function you could get the number of visible columns with columns().visible() and chaining count(). Use this number to set the colspan size. The table isn't redrawn, ie, the rowGroup.startRender function isn't executed when responsive hides or shows columns. I think you will want to use responsive-resize to call draw() for this.

    Kevin

Sign In or Register to comment.