Bug in combination of rowreorder and rowgroup - Items sometimes appear at top of group after reorder

Bug in combination of rowreorder and rowgroup - Items sometimes appear at top of group after reorder

fprinsfprins Posts: 3Questions: 0Answers: 0

When using rowreorder and rowgroup together sometimes when moving an item from one group to another the item doesn't end up at the position the item was dragged to but at the top of the group.

Probably related to https://datatables.net/forums/discussion/44263/possible-bug-combining-rowreorder-and-rowgroup

Replies

  • colincolin Posts: 15,143Questions: 1Answers: 2,586

    Hi @fprins ,

    RowReorder is a funny one - if you drag it into a group, it may not stay within that group depending upon how the group is formed. For example, in this example here, groups are formed by the Office column - if you drop someone from London into the Edinburgh group, they won't stay there since the ordering means they need to belong with London.

    Could you modify my example above to show the problem, please, and provide steps on how to reproduce it.

    Cheers,

    Colin

  • JaZoJaZo Posts: 4Questions: 0Answers: 0
    edited May 2020

    Hi @colin,

    These problems can be reproduced on http://live.datatables.net/tavikoma/1/edit?html,js,console,output

    1. Row is placed above the header when dragging to the first position. Reproduction:
      1. Drag a row in group "Edinburgh" to the top of the group;
      2. See it is placed above the group header until you drop it.
    2. Row can't be dragged back to group when it's the only one in the group. Reproduction:
      1. Drag and hold the row in group "Tokyo" to any other position;
      2. See you can't drag it back to where it was.
    3. No details are provided when dragging the first item of a group to the last position of the group before. Reproduction:
      1. Drag the first row in group "London" to any position (except the last) in group "Edinburgh";
      2. Check console and see row-reorder event is triggered with details array;
      3. Drag the first row in group "London" to the last position in group "Edinburgh";
      4. Check console and see row-reorder event is triggered, but with empty details array.

    Please let me know if I can help!

    Regards, Jasper

  • kthorngrenkthorngren Posts: 20,292Questions: 26Answers: 4,768
    edited May 2020

    You have rowReorder.update disabled so the table is not redrawn to reflect the reordering. This is ok depending on what you really want to do.

    The key with RowReorder is this from the rowReorder.dataSrc docs:

    Typically this option will be used to point to a column with a sequence number that defines an order.

    Generally you will want this to be ordered. I updated your example to order first by the rowGroup.dataSrc then by rowReorder.dataSrc. I commented out update: false, so the table is automatically redrawn on each reorder.

    This results in not being able to move a row outside of its group. If you want the ability to move the rows into another group then that can be coded by using update: false, and the row-reorder to update the rowReorder.dataSrc with the appropriate value.

    http://live.datatables.net/losomabo/1/edit

    Does this help?

    Kevin

  • JaZoJaZo Posts: 4Questions: 0Answers: 0

    @kthorngren, thanks for your detailed reply! I'm sorry for the confusion, I do know about update: false. I was fiddling with it without realizing it changes the content of the link I had already shared. I noticed this a few minutes after I posted the comment and quickly updated it with another link. That link does not include the update: false part.

    Nevertheless, all issues I described can be reproduced in your example so no luck with that :(

  • kthorngrenkthorngren Posts: 20,292Questions: 26Answers: 4,768

    Nevertheless, all issues I described can be reproduced in your example so no luck with that

    Yes, you are right. There are some interesting things that happen with this combination. Will let @allan and @colin comment on your examples and any thoughts about making changes.

    However, depending on what your requirements are, you could solve some of the problems with some custom code. One of the problems I see is the rows are reordered when dropping in a different group but this might be wanted. We could go with the approach of reverting back if trying to drop outside of the rowGroup. I took the last example in this thread and modified it to revert the rowReorder if the row is dropped outside the group.
    http://live.datatables.net/losomabo/2/edit

    It gets the group of the row being moved in the pre-row-reorder event then checks all the rows involved have the same group data. If not it will revert the row order.

    Kevin

  • JaZoJaZo Posts: 4Questions: 0Answers: 0

    @kthorngren, that's an interesting approach to disallow dragging to another group! I do want to allow dragging to a different group though.

    N.B. I created a PR for the first issue I described: https://github.com/DataTables/RowReorder/pull/24

  • kthorngrenkthorngren Posts: 20,292Questions: 26Answers: 4,768

    I do want to allow dragging to a different group though.

    That will be an interesting piece of code to keep all the rows between the source and destination groups in order :smile:

    Nice detail on your PRs!

    Kevin

  • allanallan Posts: 61,683Questions: 1Answers: 10,100 Site admin

    Thanks for the pull requests :). I've merged them in now.

    Allan

  • JaZoJaZo Posts: 4Questions: 0Answers: 0

    Thanks for your swift replies @allan! One issue down, two to go :smile: Although I'm afraid these are a little harder to tackle...

This discussion has been closed.