Drag and Drop to/from different scopes

6 posts, 0 answers
  1. Brad
    Brad avatar
    13 posts
    Member since:
    Jun 2016

    Posted 14 Sep Link to this post

    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.

     

  2. Stefan
    Admin
    Stefan avatar
    272 posts

    Posted 17 Sep Link to this post

    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.
     
  3. Kendo UI is VS 2017 Ready
  4. Brad
    Brad avatar
    13 posts
    Member since:
    Jun 2016

    Posted 18 Sep Link to this post

    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.

  5. Stefan
    Admin
    Stefan avatar
    272 posts

    Posted 21 Sep Link to this post

    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.
     
  6. Brad
    Brad avatar
    13 posts
    Member since:
    Jun 2016

    Posted 04 Oct in reply to Stefan Link to this post

    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?

  7. Stefan
    Admin
    Stefan avatar
    272 posts

    Posted 05 Oct Link to this post

    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.
     
Back to Top
Kendo UI is VS 2017 Ready