Configuration Issue? DragAndDrop TreeView item to a ListView

5 posts, 0 answers
  1. Nicole
    Nicole avatar
    5 posts
    Member since:
    Oct 2011

    Posted 07 May 2013 Link to this post

    Hey,
    I'm hoping to find some help on this issue. I have a requirement to enable drag and drop from a kendo ui treeview to a templated listview.
    I've tried the following:
    1. Enabling dragAndDrop on the treeview and configuring the listview as a kendoDropTarget......
    2. Disabling dragAndDrop on the treeview and instead configuring that control as kendoDraggable   to  the listview configured as a kendoDropTarget

    I'm not having much luck with it. Please take a look at my fiddle. Any suggestions would be greatly appreciated http://jsfiddle.net/JQBZN/1/


  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 09 May 2013 Link to this post

    Hi Nicole,

    The example is a bit confusing. I cannot see a ListView component on the page, it seems that there is only a TreeView widget. For your convenience I attached a screenshot.
    Are you sure that this is the correct fiddle link?

    Kind regards,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Nicole
    Nicole avatar
    5 posts
    Member since:
    Oct 2011

    Posted 10 May 2013 Link to this post

    Sorry it was the wrong version

    http://jsfiddle.net/OhenewaDotNet/JQBZN/

    I keep getting close but can't seem to get the exact configuration I need.  I'm actually able to drag the treeview items into my listview in my project (not sure why it's not working in js fiddle) but, using the dragAndDrop property in the treeview, I'm unable to set the group property which would allow be to specify my listview as part of the drag drop group (I hope I'm communicating clearly). So when my drop position is over my list view,  the icon still indicates that I can't drop here (even though I can).

  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 13 May 2013 Link to this post

    Hello Nicole,

    Thank you for providing an updated sample.
    There was a problem which occurs while adding an item to the ListView's DataSource - in order to avoid it, please pass an object as argument of the add method.
    drop: function (e) {
        listDataSource.add({ text: e.draggable.hint.text() });          
    }

    In order to change the status of the draggable element from denied to add, you can use the drag event handler.
    $("#treeview").data("kendoTreeView").bind("drag", function(e) {
        var target = $(e.dropTarget);
        if(target.closest(".k-widget.k-listview").length) {
            e.setStatusClass("k-add");  
        }
    });

    In addition you should prevent the default drop action:
    $("#treeview").data("kendoTreeView").bind("drop", function(e) {
        e.preventDefault();
    });

    For your convenience I updated the sample: http://jsfiddle.net/JQBZN/60/

    Kind regards,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Nicole
    Nicole avatar
    5 posts
    Member since:
    Oct 2011

    Posted 13 May 2013 Link to this post

    That works for me.....

    Thank you
Back to Top
Kendo UI is VS 2017 Ready