Responsive details programmatically

gSibinger

I need to toggle the child rows containing responsive details from a specific button. When using the row API, the function row().child() returns undefined, though. There are several column inside the responsive details area, using the "none" class. How can I access these through the datatables API?

kthorngren

See if Allan's answer in this thread helps. The row().child() APIs are for manually creating Child Rows like in this example.

Kevin

gSibinger

Hi Kevin,

unfortunately this is not helping in my case. This approach apparently still uses the inline-trigger for responsive details, which I can't use. The reason I need to toggle the details from another button is, that I use click events inside the first cell of a row for a different function.

Regards

Georg

colin

Can you create a test case demonstrating what you want, please, as that would help understand the problem here. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

gSibinger

Hi Colin,

I am now using a dedicated, always visible column to handle responsive details. This basically resolves the issue.
I am still curious though, how datatables internally handles the visibility of these details and if you can access these internal functions via the row API.

Regards

Georg

rf1234

I need to toggle the child rows containing responsive details from a specific button.

So did I. This is my custom button for that task.

$.fn.dataTable.ext.buttons.showHideAllChildRows = {
    text: showHideAllChildRowsSelectedLabel,
    name: "showHideAllChildRowsButton",
    action: function ( e, dt, button, config ) {
        $.busyLoadFull("show");
        var selParent;
        if ( dt.rows( ':not(.parent)', { page: 'current' } ).count() > 
             dt.rows( '.parent',       { page: 'current' } ).count()    ) {
            selParent = ':not(.parent)';
        } else {
            selParent = '.parent';
        }
        setTimeout(function() {
            var sel = dt.rows( selParent, { page: 'current' } ).nodes().to$();
            sel.find('td:first-child').trigger('click').promise().done(
                function(){
                    $.busyLoadFull("hide");
                } )
        }, 50);
    }
};

If most of the child rows are visible the button will hide all child rows. If most of the child rows are hidden the button will show all child rows.
It also uses a spinner because this isn't always very fast ...
showHideAllChildRowsSelectedLabel is a global variable containing the language dependent label of the button ('Toggle Child Rows' or 'Details ein-/ausblenden').

in addition I have this code here to make sure the toggle button is only shown when child rows exist at all, i.e. if the responsive extension has hidden some columns:

table
    .on( 'draw column-visibility responsive-resize', function () {
        showHideChildRowsButton(table);
    })
.....
function showHideChildRowsButton(that) {
    if ( that.responsive.hasHidden() && that.data().count() ) {
        that.button('showHideAllChildRowsButton:name').nodes().removeClass('hidden');
    } else {
        that.button('showHideAllChildRowsButton:name').nodes().addClass('hidden');
    }
}

You will need the very latest DT and Editor versions for this to work. There had been a bug in responsive.hasHidden() in previous versions.