using rowgroup and responsive at once

MadMax76

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

kthorngren

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

MadMax76

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

kthorngren

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

MadMax76

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

kthorngren

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

MadMax76

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?

kthorngren

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

Kevin

MadMax76

yes, that would be the idea.

kthorngren

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