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>3 Answers, 1 is accepted
0
Hi Lucas,
You could use jQuery to retrieve the hovered item id. For example:
I hope this information will help you to deal with the problem.
Regards,
Alexander Valchev
the Telerik team
You could use jQuery to retrieve the hovered item id. For example:
$("#treeview li").kendoDropTarget({ dragenter: droptargetOnDragEnter});function droptargetOnDragEnter(e) { console.log($(e.target).closest(".k-item").attr("id"));}I hope this information will help you to deal with the problem.
Regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Lucas
Top achievements
Rank 1
Rank 1
answered on 08 Mar 2012, 03:05 PM
Hi Alexander,
Thanks for the quick reply. The solution you provided to get the selected item worked. I am able to get drag and drop to work with a single item. The problem I am now facing is drag and drop of multiple items.
When I turn on multi-select in the kendo grid, by default it enables a multi-select drag box that alows you to click and drag over the number of rows you would like to select. This really interferes with drag and drop. Is there any way to keep multi select on with click + control but remove the multi-select drag box?
If you have any other way to multi-select and drag items to a tree please let me know.
Thank you for your time!
0
Hello Lucas,
Currently it is not possible to turn off this feature in multiple select mode and I am afraid we cannot propose a custom solution for that scenario. I would suggest to post this as a feature request in KendoUI UserVoice so the community can vote and evaluate the idea. If there are more people requesting such functionality, we will rise its priority.
Kind regards,
Alexander Valchev
the Telerik team
Currently it is not possible to turn off this feature in multiple select mode and I am afraid we cannot propose a custom solution for that scenario. I would suggest to post this as a feature request in KendoUI UserVoice so the community can vote and evaluate the idea. If there are more people requesting such functionality, we will rise its priority.
Kind regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!