Kendo UI droppable drop event not firing

[Chris]

Hi,

I have a simple application that binds to a view model using
Knockout JS. It uses a foreach loop that fires the Knockout afterAdd
event when a new item is added to the view model. The result is supposed
to be a Kendo draggable that can be dropped on a target. For some
reason I can't get the drop event on the target to fire.

http://jsfiddle.net/chriswnichols/rk6qwsy4/

Thanks,
Chris

[Alexander Valchev]

Hello Chris,

I already replied to your question in the support ticket that you submitted.

For convenience I am pasting the reply here so other users that experience same issue may read it.

Thank you for contacting us.

The problem comes from the fact that Kendo Draggable and Kendo DropTarget components are initialized multiple times which is not supported. The code in reference is:

this.bind = function () {
    console.log($(".draggable").length);
    $(".draggable").kendoDraggable({
        hint: function (e) {
            $("#console").append("<li>firing hint</li>");
            return e.clone();
        },
    });

    console.log($(".droptarget").length);
    $(".droptarget").kendoDropTarget({
        drop: function (e) {
            $("#console").append("<li>firing drop</li>");
        }
    });

};

Note that the selectors $(".draggable"), $(".droptarget") will select both the newly added and already appended to the page elements.

Please make sure that only the newly added to the DOM elements should be initialized as Kendo Draggable.

Regards,
Alexander Valchev
Telerik