Scroll and Drag and Drop on Mobile Devices
Environment
Product Version | 2018.2.620 |
Product | Progress® Kendo UI® TreeList for jQuery |
Description
How can I use the Drag-and-Drop functionality of the Kendo UI TreeList on mobile devices?
Solution
To overcome the interference of the device scrolling and the drag-and-drop:
- Add an additional column for dragging.
- Stop the propagation of the
touchstart
event for all other cells.
Test the following code on a mobile device.
<div id="example">
<div id="treelist"></div>
<script>
$(document).ready(function() {
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"
},
{
template: "<span class='k-icon k-i-handler-drag'></span>",
width: 35
}
]
});
$("#treelist").on("touchstart", "td:not(:last-child)", function(e){
e.stopPropagation();
});
});
</script>
</div>