Edit this page

connectionDefaults.selection Object

Defines the connection selection configuration.

Example - Styling the connection selection
<div id="diagram"></div>
  var Point = kendo.dataviz.diagram.Point;
  var diagram = $("#diagram").kendoDiagram({
    connectionDefaults: {
      hover: {
        stroke: {color: "red"}
      stroke: {
        color: "#979797",
        width: 4
      type: "polyline",
      startCap: "FilledCircle",
      endCap: "ArrowEnd",
      selection: {
        handles: {
          fill: {color: "Yellow"},
          stroke: {color: "White"}

  diagram.connect(new Point(100,100), new Point(300,100));

connectionDefaults.selection.handles Object

Defines the connection selection handles configuration.

connectionDefaults.selection.handles.fill String |Object

Defines the handles fill options.

connectionDefaults.selection.handles.fill.color String

Defines the handles fill color.

connectionDefaults.selection.handles.stroke Object

Defines the handles stroke options.

connectionDefaults.selection.handles.stroke.color String

Defines the handles stroke color.

connectionDefaults.selection.handles.width Number

The width of the handle elements.

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