isShown function behaves differently for mobile

cbasmadjian

I am using the function https://datatables.net/reference/api/row().child.isShown() and it's working fine for tablet and desktop version. However, for mobile it's behaving very differently. Not sure what exactly is going on.

For the mobile version there is a plus in front of my row and when I click it automatically opens the child row then the following gets triggered...

var table = $('#example').DataTable();
 
$('#example tbody').on('click', 'tr', function () {
    var tr = $(this).closest('tr');
    var row = table.row( tr );
 
    if ( row.child.isShown() ) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
    }
    else {
        // Open this row (the format() function would return the data to be shown)
        row.child( format(row.data()) ).show();
        tr.addClass('shown');
    }
} );

How do I make for the mobile version not to open the child row, but the above to function to open it as tablet and desktop does?

I wonder if it has to do with the green plus sign that shows in mobile only.

Thank you.

allan

Can you link to a test case showing the issue please? I've not come across this problem before.

Does it happen also if you use a desktop browser but with a narrow window?

Allan

cbasmadjian

Hi Allan,

Per your recommendation here is the example as follows.

live.datatables.net/zetuquci/1/edit

What am I doing wrong? If you scale the preview window such that the green plus goes away this solution works. But if you minimize the window where the green plus comes back you will see that it just will not open. It keep saying it's open when it is not obviously is not.

Any advice would be greatly appreciated. Thank you.

allan

Because you have Responsive enabled there, with its defaults, it is adding the +/- button on the first column and attempting to control the child row.

What is confusing things is that you are then using the child row API yourself to show / hide a child row. If you remove Responsive your code works no problem: http://live.datatables.net/zetuquci/2/edit .

So the question becomes - how do you want to present a UI that uses both Responsive and child rows? Responsive has a modal option build in which can be used to show its contents in a modal, leaving the child row for you to show / hide. But you would still need to decide on how you want to trigger each - a click on the first cell for both probably isn't a good idea.

Allan

cbasmadjian

Allan,

The reason why I am controlling the open/close of the child row myself is I am showing a custom view that I have designed. However, for mobile this is throwing a wrench to my vision of the website.

Part of me doesn't want to give up the responsive because I would like to be able to organize what column should be displayed for mobile and tablet. Not sure if this scenario is having a cake and wanting to eat it too type of thing.

So I am left with a dilemma. Is there anyway I can disable those plus/minus icons? Is there any way I can override what mobile is doing?

if the answer is no to both of those then I have my answer and need to scrap the responsive which is unfortunate.

Thanks for the help so far.

allan

So I am left with a dilemma. Is there anyway I can disable those plus/minus icons?

Absolutely. That will stop Responsive doing its show / hide, leaving you free to make use of the child rows however you wish, while Responsive will still hide the columns that don't fit into the screen.

Other options are to have Responsive display the hidden details in some other way, or display your own rendered data in some other way.

Allan