connectionDefaults.selection Object

Defines the connections selection configuration.

Example - styling the connections selection
<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapes:[
      {
        id:"1",
        content:{
          text: "State 1"
        },
        x: 20,
        y: 20
      },
      {
        id:"2",
        content: {
          text: "State 2"
        },
        x: 200,
        y: 20
      }
    ],
    connections:[
      {
        from: "1",
        to: "2"
      }
    ],
    connectionDefaults: {
      type: "polyline",
      startCap: "FilledCircle",
      endCap: "ArrowEnd",
      selection: {
        handles: {
          fill: {color: "Yellow"},
          stroke: {color: "White"},
          height: 20,
          width: 20
        }
      }
    }
  });
</script>

connectionDefaults.selection.handles Object

Defines default handles configuration for selected connections.

connectionDefaults.selection.handles.fill String|Object

Defines the handles fill options when connections are selected.

connectionDefaults.selection.handles.fill.color String

Defines the handles fill color when connections are selected.

connectionDefaults.selection.handles.stroke Object

Defines the handles stroke options when connections are selected.

connectionDefaults.selection.handles.stroke.color String

Defines the handles stroke color when connections are selected.

connectionDefaults.selection.handles.width Number

The width of the handle elements when connections are selected.

connectionDefaults.selection.handles.height Number

The height of the handle elements when connections are selected.

In this article