New to Kendo UI for jQuery? Download free 30-day trial

Scroll and Drag and Drop on Mobile Devices


Product Version 2018.2.620
Product TreeList for Progress® Kendo UI®


How can I use the Drag-and-Drop functionality of the Kendo UI TreeList on mobile devices?


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>
    $(document).ready(function() {
        var service = "";

        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){
In this article
Not finding the help you need? Improve this article