This is a migrated thread and some comments may be shown as answers.

Drag and drop item from Grid to Tree

3 Answers 700 Views

Drag and Drop

This is a migrated thread and some comments may be shown as answers.

Lucas asked on 06 Mar 2012, 02:58 PM

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.

<!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 id="grid" style="height: 100%; width: 100%;"></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

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!