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

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

vv7v7vv7v7 Posts: 9Questions: 3Answers: 0
edited October 2017 in Free community support

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

This question has an accepted answers - jump to answer

Answers

  • FabianRiedlFabianRiedl Posts: 8Questions: 1Answers: 1
    edited October 2017

    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

  • vv7v7vv7v7 Posts: 9Questions: 3Answers: 0
    edited October 2017

    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

  • FabianRiedlFabianRiedl Posts: 8Questions: 1Answers: 1

    "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

  • FabianRiedlFabianRiedl Posts: 8Questions: 1Answers: 1

    "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 ?

  • vv7v7vv7v7 Posts: 9Questions: 3Answers: 0
    edited October 2017

    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

  • FabianRiedlFabianRiedl Posts: 8Questions: 1Answers: 1

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

    https://jsfiddle.net/prxeq29m/

  • vv7v7vv7v7 Posts: 9Questions: 3Answers: 0

    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

  • FabianRiedlFabianRiedl Posts: 8Questions: 1Answers: 1
    edited October 2017

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

  • FabianRiedlFabianRiedl Posts: 8Questions: 1Answers: 1
    Answer ✓

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

    https://jsfiddle.net/o0j1bfrz/

  • vv7v7vv7v7 Posts: 9Questions: 3Answers: 0
    edited October 2017

    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

  • vv7v7vv7v7 Posts: 9Questions: 3Answers: 0

    Dear FabianRiedl,

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

    Best regards,
    vv7v7

This discussion has been closed.