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

Pannable

configuration

Defines the pannable options. Use this setting to disable Diagram pan or change the key that activates the pan behavior.

pannable

Boolean|Object

Default: true

<div id="diagram" style="width:800px"></div>
<script>
  $("#diagram").kendoDiagram({
    layout: {
      type: "tree",
      subtype: "right"
    },
    pannable: false,
    shapes: [{
      id: "1",
      content: {
        text: "Monday"
      }
    }, {
      id: "2",
      content: {
        text: "Tuesday"
      }
    }, {
      id: "3",
      content: {
        text: "Wednesday"
      }
    }],
    connections: [{
      from: "1",
      to: "2"
    },{
      from: "2",
      to: "3"
    }],
    connectionDefaults: {
      endCap: "ArrowEnd"
    }
  });
</script>

pannable.key

String

Defines the meta key that will be used while panning the Diagram. To avoid clashes, verify that the pannable.key and selectable.key options are different. The available values are:

"none" - No activation key
"ctrl" - The activation key will be Ctrl
"shift" - The activation key will be Shift
"alt" - The activation key will be Alt

This option is not applicable for mobile devices.

Default: "ctrl"

<div id="diagram" style="width:800px"></div>
<script>
  $("#diagram").kendoDiagram({
    layout: {
      type: "tree",
      subtype: "right"
    },
    pannable: {
      key: "shift"
    },
    shapes: [{
      id: "1",
      content: {
        text: "Monday"
      }
    }, {
      id: "2",
      content: {
        text: "Tuesday"
      }
    }, {
      id: "3",
      content: {
        text: "Wednesday"
      }
    }, {
      id: "4",
      content: {
        text: "Thursday"
      }
    }, {
      id: "5",
      content: {
        text: "Friday"
      }
    }, {
      id: "6",
      content: {
        text: "Saturday"
      }
    }, {
      id: "7",
      content: {
        text: "Sunday"
      }
    }],
    connections: [{
      from: "1",
      to: "2"
    },{
      from: "2",
      to: "3"
    },{
      from: "3",
      to: "4"
    },{
      from: "4",
      to: "5"
    },{
      from: "5",
      to: "6"
    },{
      from: "6",
      to: "7"
    }],
    connectionDefaults: {
      endCap: "ArrowEnd"
    }
  });
</script>