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:

1. Add an additional column for dragging.
2. 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>