Treerable Drag and Drop crash, and error

Webix JS
1

Hello webix team…

I did some treetable snippet here http://webix.com/snippet/00bde652

  1. When you press plus button on the upper treetable, it only copy one row only, the child isn’t copied. How to change it so all of the child is copied too just like drag and drop behavior?

  2. After I copied some the row, I tried to drag and drop the row from bottom table to upper table. When I drop it, the webix get crash and said that the script error. On my project (not on the snippet) it says Dynamic loading not implemented. How to fix this?

Please help… thank you…

2

Hello,

(1) You should loop through all the children of the copied node (eachChild method) and add them to the bottom treetable. The add method allows specifying the parent node:

if($$("tree").isBranch(id)){ //if a branch is copied
        $$("tree").data.eachChild(id, function(obj){
          obj.id = webix.uid(); //generates ID
          $$("tree2").add(obj, 0, copy.id); //item, order, parent
        });
      }

I recommend you to change ID of the item you copy to an automatically generated one. It will prevent “Non unique ID” error if you copy the same node twice or drag-n-drop it back.

http://webix.com/snippet/cd7d2357

(2) Didn’t manage to reproduce the problem locally, could you please specify the actions that lead to it?

3

Thank you very much for your help Helga, I really appreciate your solution.

Just some little more question on the new generated id. I read the api here http://docs.webix.com/api___uid.html said that

“The generated id is unique per page but not globally.
So you can use the method in the on-page logic. It’s not good enough for use as the DB id.”

With that explanation, what do you think I should do? Is there any better method for differentiate the id?

btw, for the second question I guess that caused by same id so the script went error. You can try by drag and drop 2 item with same Id at once. I guess I should use .uid all the time. Any suggestion?

4

Hey Helga…

I discover some problem with your answer. If you try to random one of the object, the copied or the original one will be both changed. So the right way to do it is to do deep copy so that only one of the item’s id randomized.

Here’s what I did http://webix.com/snippet/a0b0d990

5

Using webix.copy() is a good practice as well.

As to the webix.uid(), it answers your requirements well since all the ids that are generated for these treetables are unique. But it is not advised to save such IDs to the database, you’d better let it auto increment and return the real value to the client side.

If you want to control drag and drop, use the onBeforeDrop event to modify ID of the dragged item.

6

Thank you for you suggestion Helga. I’ll try both method and post the display here the result.

7

I tried to make some recursion function to make auto increment the id.

It succeed in some cases, but the result get strange when you change folder position. The result become doubled and failed in the next try.

Here’s the snippet http://webix.com/snippet/2d04d7d9

8

Sorry, but I don’t see any reason to change item IDs this way. webix.uid() is just enough to create a unique id for the treetable item.

9

All right then, here is the final snippet for the function http://webix.com/snippet/9242ac02 I made it to a recursion so the grandchild would be copied too.

Thank your for your help and guidance Helga, Have a nice day.