What is the right way to manually rearrange items via drag&drop in a Treelist

[Hans-Jürgen]

Hello,

I have treelists with two levels of items (titles and positions). The titles can be rearranged via drag&drop. Dragging a title onto another title changes the order of titles. Positions can both be dragged under the same title but also to an other title.

Examples:

• Dragging title 4 onto title 2 makes title 4 the new title 2, title 2 becomes title 3 and title 3 becomes title 4. All subitems (positions) stay with their titles.
• Dragging position 4 in title 3 (3.4) onto position 2 in title 3 (3.2) makes 4 the new 2 (3.2), 2 the new 3 (3.3) and 3 the new 4 (3.4).
• Dragging position 4 in title 3 (3.4) onto position 2 in title 2 (2.2) makes 4 the new 2 in title 2 (2.2), 2 in title 2 the new 3 in title 2 (2.3) and position 5 in title 3 (3.5) the new position 4 in title 3 (3.4).

To do this (see code in attachment) I manipulate the title field and the parentId of the datasource. This worked fine as long as I dirctly saved items that were added to the list. But now I have to use batch save.

Now when I add a new title to the list and add or rearrange positions to that title or rearrange titles via drag&drop before saving the affectet titles and positions are attached to wrong parent items, sometimes items get duplicated. Doing the same thing after saving works as intended.

I assume the reason for this is that new items have an Id of 0 before saving.

I see that it is possible to rearrange items in treelists via drag & drop in your demos without manipulating these fields manually. But I don't see how can do this and get the same results as in the examples above. Could you please help me figure this out?

Note: in the attached files I have included sampledata as local data. In the project we bind to remote data. Not sure if this affects the beavior

[Georgi Denchev]

Hello, Hans,

Given that the logic behind the drag and drop is quite extensive, I would suggest creating a custom "Batch Save" instead. You mentioned that the reordering works correctly when the items are saved.

In this case you could configure the dataSource to save the items only locally and once you're ready with all the changes, make a manual request to the server and update the items.

         destroy: function(e) {
             // Notify the dataSource that the destroy has been successful without making a request to the server.
             e.success([]);
         },
         update: function(e) {
             // Notify the dataSource that the update has been successful without making a request to the server.
             e.success([]);
         },
         create: function(e) {
             // Notify the dataSource that the create has been successful without making a request to the server.
             e.success([]);
         },

This way you can keep saving the rows one by one as you did before(make a custom array and add the modified rows to it) and once you are done, you can call your custom Save All method and send the array of changed items to the server.

Make sure you also set the Read transport configuration as a function instead of an object.

Let me know what you think.

Best Regards,
Georgi Denchev
Progress Telerik

[Hans-Jürgen]

Thank you for your answer. I will try this out though it could take a few days

[Hans-Jürgen]

Thank you again for the hint. It didn't solve my problem but I could narrow it a bit more.
We are using primarykeys for the ID-Field. When we save new items, the item is persisted to the database and gets a key that is sent back to the datasource. If this field is empty in the datasource our way of reordering the items via drag&drop fails. If we set the field in the client we get conflicts with our database. So I'll now try to use a different field as refference for the parentID, one I can manipulate in the client without running into problems.

[Georgi Denchev]

Hello, Hans,

Thank you for sharing your findings and proposing a possible solution.

Let me know in case you need additional information regarding the Treelist.