This is a migrated thread and some comments may be shown as answers.

Drag and Drop to/from different scopes

5 Answers 50 Views
Drag and Drop
This is a migrated thread and some comments may be shown as answers.
Brad
Top achievements
Rank 1
Brad asked on 14 Sep 2016, 05:46 PM

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.

 

5 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 17 Sep 2016, 06:05 AM
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
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
0
Brad
Top achievements
Rank 1
answered on 18 Sep 2016, 06:44 PM

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.

0
Stefan
Telerik team
answered on 21 Sep 2016, 06:10 AM
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
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
0
Brad
Top achievements
Rank 1
answered on 04 Oct 2016, 11:40 AM

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?

0
Stefan
Telerik team
answered on 05 Oct 2016, 11:46 AM
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
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
Tags
Drag and Drop
Asked by
Brad
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Brad
Top achievements
Rank 1
Share this question
or