Show Confirmation in TreeList When Doing Drag-and-Drop
Environment
Product | Progress® Kendo UI® TreeList for jQuery |
Product Version | 2016.3.1026 |
Description
How can I add a dialog confirmation to the TreeList on dragging a row and prevent the transfer of the row if the user selects Cancel?
Solution
The dialog confirmation is an asynchronous action. To add it during the drag-and-drop, prevent the drop action so it does not complete while you wait for a confirmation from the user. When the user confirms the drag action, manually change the parent id
of the dragged element to move it under the new parent.
- Handle the
drop
event and calle.preventDefault()
. - Show a confirmation dialog.
- In the confirmation callback function, change the parent
id
value of the dragged row to theid
value of the destination row.
<div id="example">
<div id="treelist"></div>
<script id="photo-template" type="text/x-kendo-template">
<div class='employee-photo'
style='background-image: url(../content/web/treelist/people/#:data.EmployeeID#.jpg);'></div>
<div class='employee-name'>#: FirstName #</div>
</script>
<script>
var service = "https://demos.telerik.com/kendo-ui/service";
$("#treelist").kendoTreeList({
dataSource: {
transport: {
read: {
url: service + "/EmployeeDirectory/All",
dataType: "jsonp"
}
},
schema: {
model: {
id: "EmployeeID",
parentId: "ReportsTo",
fields: {
ReportsTo: { field: "ReportsTo", nullable: true },
EmployeeID: { field: "EmployeeId", type: "number" },
Extension: { field: "Extension", type: "number" }
},
expanded: true
}
}
},
height: 540,
editable: {
move: true
},
columns: [
{ field: "FirstName", title: "First Name", width: 280,
template: $("#photo-template").html() },
{ field: "LastName", title: "Last Name", width: 160 },
{ field: "Position" }
],
drop: function(e){
if(e.valid){
e.preventDefault();
kendo.confirm("Are you sure that you want to move "+ e.source.FirstName
+ " under " + e.destination.FirstName + "?").then(function () {
e.source.set("ReportsTo", e.destination.EmployeeID);
e.sender.refresh();
});
}
}
});
</script>
<style>
.employee-photo {
display: inline-block;
width: 32px;
height: 32px;
border-radius: 50%;
background-size: 32px 35px;
background-position: center center;
vertical-align: middle;
line-height: 32px;
box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
margin-left: 5px;
}
.employee-name {
display: inline-block;
vertical-align: middle;
line-height: 32px;
padding-left: 3px;
}
</style>
</div>