Hello,
I am currently evaluating the KendoUI product against other toolsets. I am looking to be able to drag and drop an item from the grid to the tree view. I seem to have almost everything working except for finding out what element I am hovering over in the tree.
I have debugged the code below in Chrome and I am able to see the text of the item I am hovering over but not the id I assigned to it. The application I am working on can have the same folder name in different parent folders.
Any suggestions as to how to get this to work? I would really like to use KendoUI but this seems to be a deal breaker.
I am currently evaluating the KendoUI product against other toolsets. I am looking to be able to drag and drop an item from the grid to the tree view. I seem to have almost everything working except for finding out what element I am hovering over in the tree.
I have debugged the code below in Chrome and I am able to see the text of the item I am hovering over but not the id I assigned to it. The application I am working on can have the same folder name in different parent folders.
Any suggestions as to how to get this to work? I would really like to use KendoUI but this seems to be a deal breaker.
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
/>
<
title
>Viewer</
title
>
<
script
src
=
"../../Scripts/kendoUI/jquery.min.js"
type
=
"text/javascript"
></
script
>
<
script
src
=
"/Scripts/kendoUI/kendo.all.min.js"
type
=
"text/javascript"
></
script
>
<
link
href
=
"../../Content/styles/kendo.common.min.css"
rel
=
"stylesheet"
/>
<
link
href
=
"../../Content/styles/kendo.default.min.css"
rel
=
"stylesheet"
/>
<
script
src
=
"../../Scripts/kendoUI/people.js"
type
=
"text/javascript"
></
script
>
</
head
>
<
body
>
<
div
class
=
"page"
>
<
section
id
=
"main"
>
<
div
id
=
"example"
class
=
"k-content"
style
=
"height: 650px;"
>
<
div
id
=
"horizontal"
style
=
"height: 100%; width: 100%;"
>
<
div
id
=
"vertical"
>
<
div
>
<
p
>
Inner splitter :: Top
</
p
>
</
div
>
<
div
>
<
ul
id
=
"treeview"
>
<
li
id
=
"3.6"
data-expanded
=
"true"
>Item 1
<
ul
>
<
li
id
=
"1.6"
>Item 1.1</
li
>
<
li
id
=
"2.6"
>Item 1.2</
li
>
<
li
id
=
"9.6"
>Item 1.3</
li
>
</
ul
>
</
li
>
<
li
id
=
"4.6"
>Item 2
<
ul
>
<
li
id
=
"7.6"
>Item 2.1</
li
>
<
li
id
=
"5.6"
>Item 2.2</
li
>
<
li
id
=
"6.6"
>Item 2.3</
li
>
</
ul
>
</
li
>
<
li
id
=
"8.6"
>Item 3</
li
>
</
ul
>
</
div
>
</
div
>
<
div
>
<
div
id
=
"grid"
style
=
"height: 100%; width: 100%;"
></
div
>
</
div
>
</
div
>
</
div
>
<
script
>
function droptargetOnDrop(e) {
var treeView = $("#treeview").data("kendoTreeView");
var selectedNode = treeView.select();
treeView.append({ text: "Add test node..." }, selectedNode);
}
$(document).ready(function () {
$("#vertical").kendoSplitter({
orientation: "vertical",
panes: [
{ collapsible: true, size: "50%" },
{ collapsible: true, size: "50%" }
]
});
$("#horizontal").kendoSplitter({
panes: [
{ collapsible: true, size: "20%" },
{ collapsible: true, size: "80%" }
]
});
$("#treeview").kendoTreeView({
dragAndDrop: true
});
$("#grid").kendoGrid({
dataSource: {
data: createRandomData(50),
pageSize: 10
},
selectable: true,
groupable: true,
scrollable: true,
sortable: true,
pageable: true,
columns: [{
field: "FirstName",
width: 90,
title: "First Name"
}, {
field: "LastName",
width: 90,
title: "Last Name"
}, {
width: 100,
field: "City"
}, {
field: "Title"
}, {
field: "BirthDate",
title: "Birth Date",
template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #'
}, {
width: 50,
field: "Age"
}
]
});
});
$("#grid").kendoDraggable({
filter: "tr",
hint: function () {
var g = $("#grid").data("kendoGrid")
return g.select().clone()
}
});
$("#treeview").kendoDropTarget({
drop: droptargetOnDrop
});
</
script
>
</
section
>
<
footer
>
</
footer
>
</
div
>
</
body
>
</
html
>