Answers

• allan Posts: 63,538Questions: 1Answers: 10,476 Site admin

  November 2016 Answer ✓

  It sounds like the click event is being used for two different things - the mouse move for the row reorder and also the click to inline edit. Is that correct?

  I would suggest that it might be an idea to not allow row reordering on an inline editable cell. The rowReorder.selector option can be used to specify a specific cell.

  Regarding your side point - ordering of rows in the table is entirely determined by the data in the table and the sorting applied to it. If you want a row to appear above another one, the data in it would be to have it sort above it.

  Allan
• anthonys Posts: 19Questions: 4Answers: 0

  November 2016

  The click event starts inline edits.

  jQuery('#mytable').on( 'click', 'tbody td:not(:first-child, :nth-child(4), :last-child)', function (e) {
              editor.inline( this, {
                  onBlur: 'submit'
              });
          } );
  

  Row reorders are done via the rowReorder option using a custom move icon handler in the first table cell. I'm therefore already using the rowReorder.selector option.

  var rowReorder = {
              dataSrc: 'field_order',
              editor: window.editor,
              selector: 'td:first-child .glyphicon-move'
          };
  
  ...
  
  window.table = jQuery('#mytable').DataTable({
     "rowReorder": rowReorder,
     ...
  })
  

  I don't think there's an additional click handler for row reordering besides what goes on inside the datatables/editor code. I'm not sure if you have any other suggestions?

  Thanks for the response on the side point. I have 'create row above/below' options in a menu in a cell at the end of each row. They send ordering information with the request. I then do a background refresh after the row is inserted. My back end server isn't as fast as your examples so I'm having to stop users making further edits until the refresh is complete. I've had a few problems with lines going out of order because edits are made on data that is out of sync with the server. When users are working with the table they seem to like to make a lot of edits fast, as if they were working with excel. I've been thinking it would be nice to let the user make edits client side as fast as they like and then have the front end sync with the back end, although I think that would be hard and long to write.
• anthonys Posts: 19Questions: 4Answers: 0

  November 2016

  Sorry, I didn't mean to accept the answer and can't undo! It's very helpful, and thank you very much for helping, but didn't actually solve it.
• anthonys Posts: 19Questions: 4Answers: 0

  November 2016 edited November 2016

  I think the required approach to solve the issue, in order of preference:
  1. Editor queues up edits and sends them one at a time (I don't think this is possible without major changes)
  2. Editor only allows one edit at a time, and doesn't let you start another edit until one is complete. This is currently the behaviour when switching between inline fields and needs to be extended to row reordering.

  Workaround
  Attempt 1
  I tried submitting any ongoing edit when the move icon was 'mousedowned':

      jQuery('.custom-move-icon').mousedown(function () {
          editor.submit();
      });
  
  

  This came pretty close to a solution and worked if the edit completed whilst the drag was ongoing. If however the drag finished before the edit was complete then the same issue occurred (no edit data was sent to the server regarding the reorder).

  Attempt 2 (working ok)
  My current workaround is to add an event on mousedown that returns false (and prevents the move) whilst manually submitting any edit. It is then removed when the inline edit is closed.

      
    // Prevent user from making edits whilst an inline edit is shown
      editor.on( 'initEdit', function (e) {
          // Submit edits if user attempts to drag the move icon and prevent the drag
          jQuery('.custom-move-icon').bind('mousedown.myNamespace', function () {
              editor.submit();
              return false;
          });
      });
  
      // Allow normal use of the move icon once the inline edit has 'closed'
      editor.on( 'preClose', function (e) {
          jQuery('.custom-move-icon').unbind('mousedown.myNamespace');
      });
  

  When the user first clicks on the move handler they cannot drag it, but the edit is submitted. When they click again to move it then they can move it as normal. Only one request is sent at a time.

  Thoughts
  To reflect, I guess my application is moving towards an online app and away from an editable form. My issues have therefore been things to do with UI experience of waiting between edits and server-client data going out of sync causing conflicting edits.
• allan Posts: 63,538Questions: 1Answers: 10,476 Site admin

  November 2016

  Could you try the nightly version of RowReorder. That will disable row reordering while Editor is submitting data from the last reorder.

  Having said that, I still think it would be important to not have both RowReorder and inline editing being activated on the same cell. From your code above it looks like you should have that already. If you could give me a lnk to the page that would be useful.

  Allan
• anthonys Posts: 19Questions: 4Answers: 0

  December 2016

  Hi Allan

  Sorry for the delayed response. I'll check out the nightly version of RowReorder. The cell used that contains the RowReorder handle does not have inline editing.

  I'll send you a link to the page (and a login for the page) in a private message.

  Anthony