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

Selectable

configuration

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

Boolean|Object

Default: true

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

String|Object

Defines the fill configuration for the selection rectangle.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
        { id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
        { id: "2", x: 300, y: 100, content: { text: "Shape 2" } }
    ],
    selectable: {
        key: "shift",
        fill: {
            color: "#8ebc00",
            opacity: 0.2
        }
    }
});
</script>

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.

Default: "none"

<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

Specifies if the multiple selection should be enabled.

Default: true

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

Number

Defines the offset (in pixels) of the selection rectangle from the shape bounds.

Default: 3

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

selectable.stroke

Object

Defines the selection line configuration.

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