Edit this page

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.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy