Row reorder not update oldPosition and newPosition at drop event

Row reorder not update oldPosition and newPosition at drop event

itajackassitajackass Posts: 165Questions: 49Answers: 3
edited October 24 in Free community support

Hi i don't understand how to update new "position" after a rowreorder event was dropped to new position.

I try to tell what i need (using my example at the end):

I have a table with a time start, duration, and time end.
Every row start at the same time the row before ends.

Now if I want to change position for ROW-4 into position ROW#2, I want that the START value of ROW#4 (at new position 2) become the END of ROW#1, and the END of ROW#4 (at the position 2) must be recalculated by its ORIGINAL DURATION.

So:

Phase W with original start at 20, after positioned into position 2, start must became 16 (the end of row 1) and END must became (16 + 4 (original duration of phaseW)) = 20.
Then next rows are calculated with same logic (start became the END of previous row, and END is calculated by the new START + ORIGINAL duration).

So the last ROW END must be ALWAYS 24 of course!

My example above works only 1 times! (try to position PHASE W before PHASE Y).

But now, If I try to do another ordering after new configuration, (example PHASE Z before PHASE W) you can see all STARTS breaks (and of course ENDS)!

The logic is that LAST ROW has always 24 as END because changing order of rows the duration is always the same!

It seems that datatable after dropped row doesn't update the new oldPosition and newPosition attributes?

Here my example:

https://live.datatables.net/garizoxa/368/edit

Answers

  • itajackassitajackass Posts: 165Questions: 49Answers: 3

    The workaroud is to destroy table:

    https://live.datatables.net/guceyezo/2/edit
    

    But I ask if there is a better way

  • kthorngrenkthorngren Posts: 21,391Questions: 26Answers: 4,961

    Looks like you will want to use the row-reordered event instead of row-reorder. Updated test case:
    https://live.datatables.net/garizoxa/369/edit

    Kevin

  • itajackassitajackass Posts: 165Questions: 49Answers: 3

    Sorry this is the correct link for workaround:

    https://live.datatables.net/guceyezo/3/edit
    

    But it see is a old version 1.x datatables. with 2.x datatables it doesn't work:

    https://live.datatables.net/buxinuve/1/edit
    
  • kthorngrenkthorngren Posts: 21,391Questions: 26Answers: 4,961

    Looks like you replied at the same time I did. Just making sure you saw my above response.

    Kevin

  • itajackassitajackass Posts: 165Questions: 49Answers: 3
    edited October 24

    Hi sorry your test case doesn't work: https://live.datatables.net/garizoxa/369/edit

    If you try to reorder multiple times... the last row end breaks! (it works only on first iteration... then breaks)

    For logic of duration rows, it must be always 24.

    Also the example demo ( https://live.datatables.net/guceyezo/3/edit ) is based on 1.x datatables. switching on 2.x version, my workarouds doesn't work

  • kthorngrenkthorngren Posts: 21,391Questions: 26Answers: 4,961

    I see, sorry I misunderstood the issue. Likely the issue is due to how row().invalidate() works. It doesn't seem to be updating the rows based on re-reading the DOM nodes. Instead of updating the DOM I would use the row().data() API to update the row's data directly.

    Kevin

  • itajackassitajackass Posts: 165Questions: 49Answers: 3

    No success migrating to row.data():

    https://live.datatables.net/zomovaca/2/edit
    
  • kthorngrenkthorngren Posts: 21,391Questions: 26Answers: 4,961

    The problem looks to be using diff[i].oldPosition and diff[i].newPosition as the row-selector in this statement:

    $(tabellaFasi.row(diff[i].oldPosition).node()).find(".start").text($(tabellaFasi.row(diff[i].newPosition).node()).find(".start").text());
    

    This is being used as the row index. The row index does not change throughout the life of the table. This is not to be confused with the index column.

    Just so it's more clear to me I updated the test case to remove accessing the DOM elements. The key change is this:

                  var newData = diff[i].newData;
                  
                  // Find original row in the reordered rows diff
                  var originalData = diff.filter((row) => row.oldData === newData)[0];
                  
                  // Use the original row's node to get the original start
                  var oldRow = tabellaFasi.row( originalData.node ).data();
    

    It finds the original row in the rowreorder diff to get that row's node element. The node is then used as the selector to get the row data. Now each time it should start with the row that was dropped on. Likely you can change your first test case to use this code and still update the DOM nodes if you prefer.
    https://live.datatables.net/tucihiri/1/edit

    Kevin

  • itajackassitajackass Posts: 165Questions: 49Answers: 3

    wow thank you for the help and explanation! Now i'll try to understand better and adapt to my app.!

    Then i'll try to do the opposite case: put a row AFTER another one... because this scenario doesn't work actually :)

  • itajackassitajackass Posts: 165Questions: 49Answers: 3

    Ok i'll update my example (based on DOM) to reach my goal, if anyone interested.
    Also i've implemented the check for phases without end to be ignored.

    https://live.datatables.net/mosidese/3/edit
    
  • kthorngrenkthorngren Posts: 21,391Questions: 26Answers: 4,961

    Very cool, thanks for the updated working test case!

    Kevin

Sign In or Register to comment.