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

Connections

configuration

Defines the connections configuration.

connections

Array

<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: 300,
        y: 20
      }
    ],
    connections:[
      {
        from: "1",
        to: "2",
        content: {
        	text: "Step 1"
        },
        stroke: {
        	color: "#33ccff",
          width: 2
        }
      }
    ]
  });
</script>

connections.accessibility

Object

Defines accessibility options for the connection.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
        { id: "1", x: 100, y: 100, content: { text: "Manager" } },
        { id: "2", x: 300, y: 100, content: { text: "Employee" } }
    ],
    connections: [
        {
            from: "1",
            to: "2",
            accessibility: {
                ariaLabel: "Reports to relationship"
            }
        }
    ]
});
</script>

connections.content

Object

Defines the connection content settings.

<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: 300,
        y: 20
      }
    ],
    connections:[
      {
        from: "1",
        to: "2",
        content: {
        	text: "Step 1",
          color: "purple",
          fontFamily: "Tahoma",
          fontSize: 16,
          fontStyle: "italic",
          fontWeight: 600
        }
      }
    ]
  });
</script>

connections.cornerRadius

Number

Defines the corner radius of the connection.

Default: 0

<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: 300, y: 100 }
    ],
    connections:[
      {
        from: "1",
        to: "2",
        points: [
          {x: 150, y: 20},
          {x: 150, y: 150}
        ],
        type: "polyline",
        cornerRadius: 10
      }
    ]
  });
</script>

connections.dataItem

Object

Defines the connection dataItem.

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapes:[
      { id:"1", content: { text: "Start" }, x: 20, y: 20 },
      { id:"2", content: { text: "End" }, x: 200, y: 20 }
    ],
    connections:[
      {
        from: "1",
        to: "2",
        dataItem: {
          name: "Primary Connection",
          priority: "high",
          type: "workflow"
        },
        content: {
          template: "#= dataItem.name #"
        }
      }
    ]
  });
</script>

connections.editable

Boolean|Object

Defines the shape editable options.

Default: true

<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: 300,
        y: 20
      }
    ],
    connections:[
      {
        from: "1",
        to: "2",
        content: {
          text: "Step 1"
        },
        editable: {
          tools: ["delete"]
        }
      }
    ]
  });
</script>

connections.endCap

String|Object

The connection end cap configuration or type name.

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapes: [{
      id: "1",
      content: {
        text: "Monday"
      }
    }, {
      id: "2",
      x: 200,
      content: {
        text: "Tuesday"
      }
    }],
    connections: [{
      from: "1",
      to: "2",
      endCap: {
        type: "FilledCircle",
        fill: {
          color: "red"
        },
        stroke: {
          color: "blue",
          width: 2
        }
      }
    }]
  });
</script>

connections.from

Object|String|Number

Defines the source of the connection. You can set this property to a value matching a shape id or to an object with XY-coordinates.

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapes: [{
      id: "1",
      content: {
        text: "Monday"
      },
      x: 100,
      y: 20
    }, {
      id: "2",
      content: {
        text: "Tuesday"
      },
      x: 300,
      y: 20
    }],
    connections: [
      {
        from: {
          x: 20,
          y: 70
        },
        to: "1",
        startCap: "FilledCircle"
      },
      {
        from: "1",
        to: "2",
        endCap: "ArrowEnd"
      }]
  });
</script>

connections.fromConnector

String

Specifies the name of the source shape connector that should be used by the connection.

Default: "Auto"

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapes: [{
      id: "1",
      content: {
        text: "Monday"
      },
      x: 100,
      y: 20
    }, {
      id: "2",
      content: {
        text: "Tuesday"
      },
      x: 300,
      y: 20
    }],
    connections: [
      {
        fromConnector: "bottom",
        from: "1",
        to: "2",
        endCap: "ArrowEnd"
      }]
  });
</script>

connections.hover

Object

Defines the hover configuration.

<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: 300,
        y: 20
      }
    ],
    connections:[
      {
        from: "1",
        to: "2",
        content: {
          text: "Step 1"
        },
        hover: {
          stroke: {color: "red"}
        }
      }
    ]
  });
</script>

connections.points

Array

Sets the intermediate points (in global coordinates) of the connection. These points cannot be manipulated by user action.

<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: 300,
        y: 20
      }
    ],
    connections:[
      {
        from: "1",
        to: "2",
        points: [
          {x: 150, y: 20},
          {x: 270, y: 20}
        ]
      }
    ],
    connectionDefaults: {
      type: "polyline"
    }
  });
</script>

connections.selectable

Boolean

Specifies if the connection can be selected.

Default: true

<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" } }
    ],
    connections: [{
        from: "1",
        to: "2",
        selectable: false
    }]
});
</script>

connections.selection

Object

Defines the connection selection configuration.

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

String|Object

The start cap (arrow, head or decoration) of the connection.

<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" } }
    ],
    connections: [{
      from: "1",
      to: "2",
      startCap: {
        type: "ArrowStart",
        fill: {
          color: "red"
        },
        stroke: {
          color: "blue",
          width: 2
        }
      }
    }]
});
</script>

connections.stroke

Object

Defines the stroke configuration.

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapes: [{
      id: "1",
      content: {
        text: "Step 1"
      }
    }, {
      id: "2",
      x: 200,
      content: {
        text: "Step 2"
      }
    }],
    connections: [{
      from: "1",
      to: "2",
      stroke: {
        color: "#33ccff",
        width: 3
      }
    }]
  });
</script>

connections.to

Object|String|Number

Defines the target of the connection. You can set this property to a value matching a shape id or to an object with XY-coordinates.

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapes: [{
      id: "1",
      content: {
        text: "Step 1"
      },
      x: 100,
      y: 20
    }, {
      id: "2",
      content: {
        text: "Step 2"
      },
      x: 300,
      y: 20
    }],
    connections: [
      {
        from: "1",
        to: "2",
        startCap: "FilledCircle",
        endCap: "ArrowEnd"
      },
      {
        from: "2",
        to: {x: 450, y: 70},
        endCap: "FilledCircle"
      }]
  });
</script>

connections.toConnector

String

Specifies the name of the target shape connector that should be used by the connection.

Default: "Auto"

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapes: [{
      id: "1",
      content: {
        text: "Step 1"
      },
      x: 100,
      y: 20
    }, {
      id: "2",
      content: {
        text: "Step 2"
      },
      x: 300,
      y: 20
    }],
    connections: [
      {
        toConnector: "bottom",
        from: "1",
        to: "2",
        endCap: "ArrowEnd"
      }]
  });
</script>

connections.type

String

Speifies the connection type, which defines the way it routes.

The routing of a connection is the way intermediate points of a connection define a route. A route is usually defined on the basis of constraints or behaviors. Currently there are two routing mechanisms for Diagram connections:

polyline route - connects the defined intermediate points, see connections.points.
cascading route - a simple rectangular route that creates a cascading path between the two ends of a connection, ignoring given connection points. The cascading type is useful when using tree layout and hierarchies. The routed connection will in this case enhance the representation of the hierarchy, reproducing a classic organization diagram.

The available values for the type property are:

"polyline" - connects the defined intermediate points. See connections.points.
"cascading" - discards given points and defines a cascading path between the endpoints.

Default: "cascading"

<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: 300,
        y: 100
      }
    ],
    connections:[
      {
        from: "1",
        to: "2",
        points: [
          {x: 150, y: 20},
          {x: 150, y: 150}
        ],
        type: "polyline"
      }
    ]
  });
</script>

Related Members