Drag and Drop to/from different scopes

[Brad]

I'm trying to configure a DnD from a TreeList view onto custom sidebar. I'm using Angular 1.x, and the the sidebar is configured as a directive complete with its own scope.

Is there a recommended way to transfer the data model that's tied to the treelist row to and from this sidebar given they are separate in scope?

Looking as many of the demos, it was difficult for me to determine how exactly to apply those techniques to my scenario.

 

[Stefan]

Hello Brad,

I can suggest checking some examples demonstrating, Drag and Drop between Kendo UI widgets and drag and drop from different AngularJS directives:

- Drag and drop from different AngularJS directives:

http://stackoverflow.com/questions/19578130/angularjs-directives-with-html5-drag-and-drop-issue-with-scope-object

- Drag and Drop between Kendo UI widgets:

http://stackoverflow.com/questions/16423867/kendo-ui-draganddrop-treeview-item-to-a-listview

- Drag and Drop with Kendo UI widget and AngularJS:

http://www.telerik.com/forums/kendo-angular-treeview-drag-and-drop-question

If additional assistance is needed, please send a fully runnable example, so I can give suggestions best suited for it.

Regards,
Stefan
Telerik by Progress

 

 

[Brad]

Not sure what happened with my last response. But here it is again. Please disregard if this is posted in duplicate:

Thanks, Stefan.

I've prepared this plunkr to help clarify what I'm trying to do.Note that because I'm using TreeList, and didn't want to upload the pro files to the internet, you'll need to swap out the applicable version of the Kendo libs.

https://plnkr.co/edit/rQukiUGgIuxKIB4lLhMg?p=preview

Also, I should note that I was able to work around part of the issue (dragging from the tree list into my custom directive) by using a service to send the data over. It's now dragging back from that custom directive into the tree list where I'm having the biggest issue. That and updating the parent IDs.

[Stefan]

Hello Brad,

I modified the provided Plunker and now you can Drag and Drop from both the sidebar and the TreeLIst. Please have in mind that I did not add the logic the add the new items:

https://plnkr.co/edit/utzWaUO6kMmgl4kNzgPZ

I can suggest using the Drop event of the Drop target to add the new data:

http://docs.telerik.com/kendo-ui/api/javascript/ui/droptarget#events-drop

The new item can be added by using the add method of the DataSource, by first adding an Id to the dataItem:

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-add

I hope this will help you to achieve the desired result.

Regards,
Stefan
Telerik by Progress

 

 

[Brad]

Thanks.

I see there's just one onDrop function being leveraged for both. What would you recommend to be the best method to differentiate which direction the drag has occurred?

[Stefan]

Hello Brad,

There are two different functions onDrop, just in the example, they both have the same name which has to be changed.

I can suggest changing the names based on the information if the drop function is fired from the TreeList or from the sidebar.

The functions are located at lines 92 and 120.

Regards,
Stefan
Telerik by Progress