responsive edit form not showing properly

rwgreenwood

When using responsive support in the editor on a small device, if I do an edit via a link that I have created in the row (as oppsed to an editor button), the edit form comes up blank. With a link in the datatable column that has the editor_edit class I do this:

$(this.$el).on('click','a.editor_edit', function(e) {
          e.preventDefault();
           editor.edit( $(this).closest('tr'), {
             title: 'Edit  record',
             buttons: 'Update'
          } );
});

and get a blank edit form - just the title bar and button. If I use the editor Edit button, it all works properly.

I am using Chrome Developer tools to test different devices.

If I go back to my normal desktop, the link in the datatable row works properly. So it is only when on a smaller device that I am having the issue.

I am including this style sheet for responsive:
https://cdn.datatables.net/responsive/2.2.1/css/responsive.dataTables.min.cs

When I inspect, I get

 <div data-dte-e="form_content" class="DTE_Form_Content"></div>  

and the div is empty.

Thanks for any ideas.

allan

The problem is this:

$(this).closest('tr')

In the child row, that will get the child row, not the parent row and thus Editor won't know anything the row that you are asking it to edit (the row selector doesn't automatically resolve child rows - that is something I'm going to add in future!).

At the moment what you need to do is add a check to see if you are in a Responsive child row or not:

var tr = $(this).closest('tr');

if ( tr.hasClass('child') ) {
  tr = tr.prev();
}

editor.edit( tr, ... );

Regards,
Allan

allan

I've committed a change which will allow the child row to be used as a selector for row() in future. Its in the v2 branch as all new features are going there now. It will be sometime in 2018 when v2 is released - I'm not sure when though!

Allan

rwgreenwood

Thanks for both the current fix and future change.