Introduction
Contribution
Knowledge Base
Diagram

selectableBoolean|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.

Example 

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    selectable: false,
    shapes: [
        { id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
        { id: "2", x: 300, y: 100, content: { text: "Shape 2" } }
    ],
    connections: [
        { from: "1", to: "2" }
    ]
});
</script>

selectable.keyString(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.multipleBoolean(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.strokeObject

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.colorString

Defines the selection stroke color. Accepts valid CSS colors.

Example 

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
        { id: "1", x: 100, y: 100, content: { text: "Shape 1" } }
    ],
    selectable: {
        stroke: {
            color: "red"
        }
    }
});
</script>

selectable.stroke.dashTypeString

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

Example 

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
        { id: "1", x: 100, y: 100, content: { text: "Shape 1" } }
    ],
    selectable: {
        stroke: {
            color: "blue",
            dashType: "dash"
        }
    }
});
</script>

selectable.stroke.widthNumber

Defines the selection stroke width.

Example 

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
        { id: "1", x: 100, y: 100, content: { text: "Shape 1" } }
    ],
    selectable: {
        stroke: {
            color: "green",
            width: 3
        }
    }
});
</script>
In this article
selectableselectable.keyselectable.multipleselectable.strokeselectable.stroke.colorselectable.stroke.dashTypeselectable.stroke.width
Not finding the help you need?
Contact Support