Editor: no reorder request sent to server if inline editing box live

anthonys

I have found an issue using Editor whereby no reorder edit is sent to the server when using inline editing if an inline edit box is 'live' at the time the drag was started. I don't think I can create a JS fiddle for editor examples. To reproduce:
1) Create an editor with inline editing and row reordering
2) Start an in line edit (but do not click off the box)
3) Drag the row to reorder it

The row is reordered but the reorder edit is not sent to the server. This can cause problems for subsequent edits, when rows can jump around and go out of order as the ordering data does not match the server.

I am using a custom row drag handler, although I'm not sure that would make a difference.

On a side point, has anyone had any experience of creating a click-to-edit interface with reordering and things like 'create row above/below'? Have they found they need to create a lot of extra code relating to row ordering?

Thanks

Anthony

allan

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

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

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

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

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

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