Kendo UI DragAndDrop TreeView item to a ListView

Question

I have a requirement to enable drag and drop from a kendo-ui tree view to a templated list view. 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

<div>
<div id="treeview">        
</div></div>   


<div id="favorites-window" style="height:185px;width:1170px">
<div class="report-reader" style="height:185px;width:1170px;overflow:auto">
    <div id="listView"></div>
</div>                            
</div>

    $("#favorites-window").kendoWindow({
    width: "1180",
    height: "185",
    resizable: false,
    draggable: false,        
    actions: ["Custom"],
    title: "Favorites"
});
$("#listView").kendoListView({
    selectable: "single",
    navigatable: false
}).kendoDropTarget({
    drop: function (e) {
        console.log(e);
        var item = getObjects(nucleusTreeJsonData, 'text', e.draggable.hint.text());
        $("#listView").data("kendoListView").dataSource.add(item);
    }
});

var inlineDefault = new kendo.data.HierarchicalDataSource({
                data: [
                    { text: "Furniture", items: [
                        { text: "Tables & Chairs" },
                        { text: "Sofas" },
                        { text: "Occasional Furniture" }
                    ] },
                    { text: "Decor", items: [
                        { text: "Bed Linen" },
                        { text: "Curtains & Blinds" },
                        { text: "Carpets" }
                    ] }
                ]
            });


    $("#treeview").kendoTreeView({
        dragAndDrop: true,
        dataSource: inlineDefault,
        dataTextField: "text"

    });
        //.kendoDraggable({
    //    container: $("#tree-pane"),
    //    hint: function () {
    //        return $("#treeview").clone();
    //    },
    //    dragstart: draggableOnDragStart
    //});

    $("#treeview").data("kendoTreeView").bind("dragstart", function (e) {
        if ($(e.sourceNode).parentsUntil(".k-treeview", ".k-item").length == 0) {
            e.preventDefault();
        }
    });

    /*$("#treeview").data("kendoTreeView").bind("drop", function (e) {
            e.preventDefault();
            var copy = this.dataItem(e.sourceNode).toJSON();
            if (e.dropPosition == "over") {
                //var item = getObjects(nucleusTreeJsonData, 'text',   e.sourceNode.textContent);
                $("#listView").data("kendoListView").add(copy);
            }
    });*/

    $('ul.k-group.k-treeview-lines div').children().css('font-weight', 'bold').find('div').css('font-weight', 'normal');

I'm not having much luck with it. Please take a look at my fiddle. Any suggestions would be greatly appreciated

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

Answer 1

I know this is an old question but I had it, too, so I went ahead and figured it out using this fiddle.

http://jsfiddle.net/JQBZN/74/

This is really really basic and is probably architected awfully but I think it at least demonstrates the key point(s):

$("#treeview").kendoTreeView({
    dragAndDrop: true,
    dataSource: inlineDefault,
    dataTextField: "text",
    drag: function (e) {
        /* Manually set the status class. */
        if (!$("#treeview").data('kendoTreeView').dataItem(e.sourceNode).hasChildren && $.contains($('#favorites-window')[0], e.dropTarget)) {
            e.setStatusClass('k-add');
        } else {
            e.setStatusClass('k-denied');
        }
    },
    drop: function (e) {
        if (e.valid) {
            /* Do your adding here or do it in a drop function elsewhere if you want the receiver to dictate. */
        }
        e.preventDefault();
    }
});

Answer 2

If the KendoUI tool set isn't doing what you want it to do, you may find it easier to do what you want to do with jQuery UI. They're both implementing the same jQuery core library.

If you go with jQuery UI, it's simply a matter of binding 'draggable' to the element you want to drag, and 'droppable' to your targets. From there, you can wire up handlers to do pretty much anything you want.

I've set up a simple jsFiddle that demonstrates how this would work:

http://jsfiddle.net/e2fZk/23/

The jQuery code is really simple:

$(".draggable").draggable();
$(".container").droppable({
    drop: function (event, ui) {
        var $target = $(this);
        var $source = ui.draggable;
        var newUrl = $source.find("input").val();
        alert("dropped on " + $target.attr("id") + ", setting URL to " + newUrl);
        $target.find("#imageDiv").html("<img id='myImage' />")
            .find("#myImage").attr("src", newUrl);
    }
});

The API documentation is here:

Draggable

Droppable