I'm trying to add a custom drop event to each tree view node so that I can handle the 'drop' event when a file is dropped onto the node element from Windows File Explorer. My html code (with the style section removed) looks like this:
<
div
id
=
"example"
>
<
div
class
=
"demo-section k-header"
>
<
div
class
=
"box-col"
style
=
"width: 300px"
>
<
h4
>Select a node</
h4
>
<
div
class
=
"files"
data-role
=
"treeview"
data-drag-and-drop
=
"false"
data-text-field
=
"name"
data-spritecssclass-field
=
"type"
data-bind="visible: isVisible,
source: files,
events: { dataBound: onDataBound }"></
div
>
</
div
>
</
div
>
<
script
>
$(document).ready(function ()
{
$("#treeview").kendoTreeView();
});
</
script
>
</
div
>
I'm binding the view model like this:
<
script
>
var viewModel = kendo.observable({
isVisible: true,
onDataBound: function (e)
{
if (e.node)
{
var dataItem = e.sender.dataItem(e.node);
dataItem.bind('drop', function (e1)
{
alert('dropped on item');
});
}
},
files: kendo.observableHierarchy(jobBookAPI.directoryContents)
});
kendo.bind($("#example"), viewModel);
</
script
>
My data looks like this:
var jobBookAPI = new function ()
{
// Public data
this.directoryContents =
[
{
name: "My Web Site", type: "folder", expanded: true, items:
[
{
name: "images", type: "folder", expanded: true, items:
[
{ name: "logo.png", type: "image" },
{ name: "my-photo.jpg", type: "image", id: 12345 }
]
},
{
name: "resources", type: "folder", expanded: true, items:
[
{ name: "resources", type: "folder" },
{ name: "zip", type: "folder" }
]
},
{ name: "about.html", type: "html" },
{ name: "index.html", type: "html" }
]
}
];
};
The drop event does not fire when I drag a file onto a node. I've tried replacing 'drop' with 'click' just to see if I can fire a click event, but that event doesn't fire when a node is clicked. I think that what I'm trying to do should be possible because I've use this same method with simple DIV elements and files dropped on them from File Explorer cause the drop event to fire perfectly.
Any ideas what I'm doing wrong?
Thanks.