Kendo UI ListView Drag - Drop

Question

I have two Kendo UI ListViews. I am able to get the list of available options to load and display values. I am also able to get the drag functionality to work. The issue is the drop functionality of the destination. I can get the second ListView to register as a dropTarget, but I cannot determine how to add the draggable to the destination ListView.

Here is the relevant code:

    var groupDataSource = getReadGroupsDataSourceFor(2819);

    try {
        var readgroups = $("#availableReadGroups").kendoListView({
            selectable: "single",
            navigatable: false,
            template: "#if(!IsSelectedGroup) {# <div style='font-size:13px;padding-left:5px;padding-top:5px;'>${GroupName}</div>#} else {# <div class=\"k-state-selected\" style=\"font-size:13px;padding-left:5px;padding-top:5px;\" aria-selected=\"true\">${GroupName}</div> #}#",
            dataSource: groupDataSource
        });

        var selectedGroups = $("#selectedGroupsValues").kendoListView({
            selectable: "single",
            navigatable: false,
            template: "#if(!IsSelectedGroup) {# <div style='font-size:13px;padding-left:5px;padding-top:5px;'>${GroupName}</div>#} else {# <div class=\"k-state-selected\" style=\"font-size:13px;padding-left:5px;padding-top:5px;\" aria-selected=\"true\">${GroupName}</div> #}#",
        });

        readgroups.kendoDraggable({
            filter: "div[role=option]",  
            hint: function (row) {
                return row.clone();
            }
        });

        selectedGroups.kendoDropTarget({
            drop: function (e) {
                var lvObject= selectedGroups.data();
                lvObject.kendoListView.dataSource.add(e.draggable);
            }
        });
    } catch (err) {
        alert(err);
    }

You're code seems ok, the drop event is all you need. Can you put a complete example in jsfiddle maybe? Then I could check it out and give more help — Dennis Puzak
Thanks for taking a look at it. Here is the jsFiddle Link: jsfiddle.net/TheNephalim/4w2Pw/1 — DerHaifisch

DerHaifisch DerHaifisch · Accepted Answer · 2013-02-16T01:24:53

I finally came up with an answer and got it to work in IE and FireFox on my machine; I couldn't get this solution to work in jsFiddle, though, and I can't figure out why.

Here is the code:

selectedGroups.kendoDropTarget({
        drop: function (e) {
            var lvObject= selectedGroups.data();
            lvObject.kendoListView.dataSource.add(readgroups.data("kendoListview").dataSource.getByUid(e.draggable.hint.data().uid));
        }
    });

The hint property apparently contains the jQuery object which in turn has a data method. When you execute the data method, the only thing returned is an object with the property uid. Using this, you can search the dataSource of the draggable's origin for the data item. The data item is what you want to supply to the add method of the destination's dataSource.

Kendo UI ListView Drag - Drop

1 Answers