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

Editable.drag.snap

configuration

Specifies the shapes drag snap options. By default, during dragging, the shapes move by a given number of pixels at once. You can disable this behavior to make shapes movement smooth or you can specify a different number for the drag snap size to simulate a snap-to-grid functionality.

editable.drag.snap

Boolean|Object

Default: true

<div id="diagram"></div>
<script>
  var dataSource = new kendo.data.HierarchicalDataSource({
    data: [{
      "name": "Progress",
      "items": [
        {"name": "Kendo UI",
         "items":[
           {"name": "TreeList"},
           {"name": "Chart"}
         ]
        },
        {"name": "NativeScript"}
      ]
    }],
    schema: {
      model: {
        children: "items"
      }
    }
  });
  $("#diagram").kendoDiagram({
    dataSource: dataSource,
    editable: {
      drag: {
        snap: false
      }
    },
    layout: {
      type: "tree",
      subtype: "down"
    },
    shapeDefaults: {
      content: {
        template: "#= name #"
      },
      width: 80,
      height: 80
    },
    connectionDefaults: {
      type: "polyline",
      startCap: "FilledCircle",
      endCap: "ArrowEnd"
    }
  });
</script>

editable.drag.snap.size

Number

Specifies the shapes drag snap size.

Default: 10

<div id="diagram"></div>
<script>
  var dataSource = new kendo.data.HierarchicalDataSource({
    data: [{
      "name": "Progress",
      "items": [
        {"name": "Kendo UI",
         "items":[
           {"name": "TreeList"},
           {"name": "Chart"}
         ]
        },
        {"name": "NativeScript"}
      ]
    }],
    schema: {
      model: {
        children: "items"
      }
    }
  });
  $("#diagram").kendoDiagram({
    dataSource: dataSource,
    editable: {
      drag: {
        snap: {
            size: 80
        }
      }
    },
    layout: {
      type: "tree",
      subtype: "down"
    },
    shapeDefaults: {
      content: {
        template: "#= name #"
      },
      width: 80,
      height: 80
    },
    connectionDefaults: {
      type: "polyline",
      startCap: "FilledCircle",
      endCap: "ArrowEnd"
    }
  });
</script>