selectable Boolean|Object (default: true)

Defines the Diagram selection options.

By default, you can select shapes in the Diagram in one of two ways:

• Clicking a single shape to select it and deselect any previously selected shapes.
• Holding the Ctrl key while clicking multiple shapes to select them and any other shapes between them.

Using the selectable configuration, you can enable single selection only, enable selection by drawing a rectangular area with the mouse around shapes in the canvas, or disable selection altogether.

selectable.key String (default: "none")

Defines the meta key when doing a visual selection through drawing a rectangular area around shapes in the canvas. This option does not change the way a single shape is selected when using click or tap. To avoid clashes, verify that the selectable.key and pannable.key are different. The available values are:

• "none" - No activation key, visual selection is disabled.
• "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.

Example - enabling selection through holding the Shift key and drawing a rectangle around shapes

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    layout: {
      type: "tree",
      subtype: "right"
    },
    selectable: {
      key: "shift"
    },
    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>

selectable.multiple Boolean (default: true)

Specifies if the multiple selection should be enabled.

Example - disabling multiple selection

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    layout: {
      type: "tree",
      subtype: "right"
    },
    selectable: {
      multiple: 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>

selectable.stroke Object

Defines the selection line configuration.

Example - customizing the selection stroke

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    layout: {
      type: "tree",
      subtype: "right"
    },
    selectable: {
      stroke: {
        dashType: "longDashDot",
        color: "blue",
        width: 2
      }
    },
    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>

selectable.stroke.color String

Defines the selection stroke color. Accepts valid CSS colors.

selectable.stroke.dashType String

Defines the selection dash type. The following dash types are supported:

• "dash" - a line consisting of dashes
• "dashDot" - a line consisting of a repeating pattern of dash-dot
• "dot" - a line consisting of dots
• "longDash" - a line consisting of long dashes
• "longDashDot" - a line consisting of a repeating pattern of long dash-dot
• "longDashDotDot" - a line consisting of a repeating pattern of long dash-dot-dot
• "solid" - a solid line

selectable.stroke.width Number

Defines the selection stroke width.