connections.selection Object

Defines the connection selection configuration.

Example - customizing the connection selection handles

<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",
        startCap: "FilledCircle",
        endCap: "ArrowEnd",
        selection: {
          handles: {
            fill: {color: "Yellow"},
            stroke: {color: "White"},
            height: 20,
            width: 20
          }
        }
      }
    ]
  });
</script>

connections.selection.handles Object

Defines the connection selection handles configuration.

connections.selection.handles.fill String|Object

Defines the handles fill options.

connections.selection.handles.fill.color String

Defines the handles fill color.

connections.selection.handles.stroke Object

Defines the handles stroke options.

connections.selection.handles.stroke.color String

Defines the handles stroke color.

connections.selection.handles.width Number

The width of the handle elements.

connections.selection.handles.height Number

The height of the handle elements.

In this article