Fix child row to SlideDown and SlideUp ( Cannot read property '_detailsShow' of undefined )

vv7v7

Dear Reader,

As you can see at this example these child rows slide down and up slowly as them should, but please look at this or this and you'll see that it doesn't work and child rows just open immediately. So why then ?

I guess the main would be: Cannot read property '_detailsShow' of undefined which means that row.child doesn't work here ... but why ?

Other example:

$( "#" + name ).find( "tbody" ).on('click', 'td.control', function () {
  var tr = $( this ).closest( 'tr' );
  console.log( tr );
  var row = tbl.row( tr );
  console.log( row );
  if ( row.child.isShown() ) {
    $('div.slider', row.child()).slideUp( function () {
       row.child.hide();
       tr.removeClass('shown');
    } );
  } else {
    row.child( format(row.data()), 'no-padding' ).show();
    tr.addClass('shown');
    $('div.slider', row.child()).slideDown();
  }
});

and the error message:

As you see the "parent" and "row" is set, but row.child says an error ... why ?
This's when I've changed var tr = $( this ).closest( 'tr' );" to "var tr = $( this ).closest( 'tr' ).next( "tr" );:

So no error here, but it won't work when you'd hided a child via button because we'll get an "even" tr if child wouldn't exist with this ...
And console.log( row.child ); returns (){var d=b.apply(a,arguments);s.extend(d,d,c.methodExt);return d} which is a function ... isn't it ?

Best regards,
vv7v7

FabianRiedl

Hello vv7v7,

the issue is in the definition of the Table, your table is defined as "responsive" so if your window / container whatever is too small the datatable reduces the columns of the table.
So if that happens you can display the hidden information by clicking a Button you initialized

  responsive: {
    'details': {
      'type': 'column',
      'target' : 0
} }
....

The datatable got this definition so far and performs that well...

So if you want to display your default information , you defined in your format function - you have to define another button in the Datatable that executes that.

I changed your example - so you can look up whats happening.
The first "+" displays your content , the second plus (in my example the 3rd col) displays the "hidden" data from de responsive Datatable
because of this new definition:

  responsive: {
    'details': {
      'type': 'column',
      'target': 3
    }
  },
  'columnDefs': [{
    'data': null,
    'defaultContent': 'extend',
    'className': 'control',
    'orderable': false,
    'targets': 3
  },
  {
    'data': null,
    'defaultContent': '',
    'className': 'control-mytext',
    'orderable': false,
    'targets': 0
  }],

https://jsfiddle.net/081oew7w/ - working example.

Cheers , hopefully i could help

vv7v7

THANK YOU very much FabianRiedl also as you may see:

Shall we hide default buttons permanently ?
By the way, now this table is always in that state (in responsive). Even if table is smaller than container.
Is it possible to make it hide column as it was before when table climbs to container fully ?

Here you may see that colums don't have display: none anymore even if table if tiny:

Also ... thank you very much for your answer !

Best regards,
vv7v7

FabianRiedl

"Shall we hide default buttons permanently ?" - dont know exactly what youre meaning

The table itself is responsive , but in our test case the 3rd col isn´t.
This is because if this column would hide on resizeing the table you wont be able to display the content hidden because you hide the button which would perform that action.

If you want to hide the column too , you have to put the Button in another column
(like this : https://jsfiddle.net/6wz0otcs/1/)

on resizing the container , and all columns are shown - the button '+' (last one) will hide -> because there is no content to display (all columns are shown)

the other '+' button which displayes your "personal" defined informations is always shown

Best regards

FabianRiedl

"Here you may see that colums don't have display: none anymore even if table if tiny:"

yeah true, so you want to hide that first button -which performs loading the data from the function format()- responsive too ?

vv7v7

Dear FabianRiedl,

All in all it would be great if table was responsive by deafult and was able to slide down a child. So I.e. default responsive table without any, modifications, but only slide slowly child opening and closing. Is it possible ?

Best regards,
vv7v7

FabianRiedl

something like this ?
by default there is no '+' to display the "hidden" responsive columns now

https://jsfiddle.net/prxeq29m/

vv7v7

Dear FabianRiedl,

Thank you very much and I'm very glad to know that some people answers ...
Yes, something like , but now it doesn't close by button press. Is it ok ? Btw it strange that that table scrolls horizontal when it has hidden columns is it ?

Best regards,
vv7v7

FabianRiedl

By checking the behavior , i guess it just depends on the frame which jsfiddle displays the table

FabianRiedl

and the i applied a fix - so the child closes now properly

https://jsfiddle.net/o0j1bfrz/

vv7v7

Dear FabianRiedl,

Thank you very much for your answer !
I've checked all of your codes and they are great really ! Also it's strange that table doesn't hide this buttons when all columns are visible by default which Responsive plugin gave. I guess that because we added .control-mytext isn't it ?

Best regards,
vv7v7

vv7v7

Dear FabianRiedl,

Thank you very much ! I'll try to continue
You're pro and very wonderful person

Best regards,
vv7v7