Responsive + Editor with opt-in for inline editable fields

Responsive + Editor with opt-in for inline editable fields

trendsictrendsic Posts: 6Questions: 2Answers: 1

I'm using a setup similar to this, but instead of using this

$('#example').on( 'click', 'tbody td:not(.child)', function (e) {
    editor.inline( this );
} );

I'm doing this

$('#example').on( 'click', 'tbody td.editable', function (e) {
    editor.inline( this );
} );

which makes it a more "opt-in" method than just assuming the user can edit all the fields. This has worked great until I realized that same method isn't carrying over to the "DTR" child elements (the elements that get pushed off the page when the viewport isn't large enough to show them - see screenshot below). I'm hoping to find a way to carry my className: 'editable' classes set in the columns option over to the child elements as well. Any help would be much appreciated!

DTP child elements

Answers

  • allanallan Posts: 51,272Questions: 1Answers: 7,724 Site admin

    Good question! Currently, no I'm sorry, there isn't a way to do that. But, in hindsight at least, it seems like a fairly obvious thing to want to do - use whatever is given for the column class name on the li. I will look into how that can be done.

    The best work around I can offer would be to add a listener on the dtr-data elements which checks to see what the class of the host cell is - e.g.:

    $('#myTable').on('click', 'span.dtr-data', function () {
      var cell = table.cell(this).node();
    
      if ($(cell).hasClass('editable')) {
        editor.inline(this);
      }
    });
    

    Allan

Sign In or Register to comment.