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

Shapes.connectors

configuration

Defines the connectors available in the shape. A connector is the point in the shape where a connection between this shape and another one can originate from or end.

shapes.connectors

Array

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapes: [{
      id: "1",
      x: 20,
      y: 40,
      content: {
        text: "Monday"
      },
      connectors: [{name: "top", width: 20, height: 20}, {name: "right", width: 10, height: 10}]
    }, {
      id: "2",
      x: 200,
      y: 40,
      content: {
        text: "Tuesday"
      }
    }, {
      id: "3",
      x: 380,
      y: 200,
      content: {
        text: "Wednesday"
      }
    }],
    connections: [{
      from: "1",
      to: "2",
      fromConnector: "top"
    },{
      from: "2",
      to: "3"
    }],
    connectionDefaults: {
      endCap: "ArrowEnd"
    }
  });
</script>

shapes.connectors.description

String

The connector description.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [{
        id: "1",
        content: { text: "Shape with Custom Connectors" },
        x: 100,
        y: 20,
        connectors: [{
            name: "top",
            description: "Top connection point"
        }, {
            name: "bottom",
            description: "Bottom connection point"
        }]
    }]
});
</script>

shapes.connectors.fill

String|Object

Defines the fill options of the shape connectors.

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapes: [{
      id: "1",
      x: 20,
      y: 40,
      content: {
        text: "Monday"
      },
      connectors: [
        {
          name: "top",
          fill: {
            color: "red",
            opacity: 0.5
          },
          width: 15,
          height: 15
        }, {name: "right", width: 10, height: 10}]
    }, {
      id: "2",
      x: 200,
      y: 40,
      content: {
        text: "Tuesday"
      }
    }, {
      id: "3",
      x: 380,
      y: 200,
      content: {
        text: "Wednesday"
      }
    }],
    connections: [{
      from: "1",
      to: "2",
      fromConnector: "top"
    },{
      from: "2",
      to: "3"
    }],
    connectionDefaults: {
      endCap: "ArrowEnd"
    }
  });
</script>

shapes.connectors.height

Number

Defines the height of the shape connectors.

Default: 8

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [{
        id: "1",
        content: { text: "Tall Connectors" },
        x: 100,
        y: 20,
        connectors: [{
            name: "left",
            height: 20
        }, {
            name: "right",
            height: 20
        }]
    }]
});
</script>

shapes.connectors.hover

Object

Defines the hover configuration of the shape connectors.

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapes: [{
      id: "1",
      x: 20,
      y: 40,
      content: {
        text: "Monday"
      },
      connectors: [
        {
          name: "top",
          hover: {
            fill: {
              color: "pink"
            },
            stroke: {
              dashType: "dash",
              color: "blue",
              width: 2
            }
          },
          width: 15,
          height: 15
        }, {name: "right", width: 10, height: 10}]
    }, {
      id: "2",
      x: 200,
      y: 40,
      content: {
        text: "Tuesday"
      }
    }, {
      id: "3",
      x: 380,
      y: 200,
      content: {
        text: "Wednesday"
      }
    }],
    connections: [{
      from: "1",
      to: "2",
      fromConnector: "top"
    },{
      from: "2",
      to: "3"
    }],
    connectionDefaults: {
      endCap: "ArrowEnd"
    }
  });
</script>

shapes.connectors.name

String

The connector name. The predefined names are:

"top" - top connector
"right" - right connector
"bottom" - bottom connector
"bottomRight" - bottom right connector
"left" - left connector
"auto" - auto connector

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [{
        id: "1",
        content: { text: "Multi-connector Shape" },
        x: 100,
        y: 20,
        connectors: [{
            name: "top"
        }, {
            name: "right"
        }, {
            name: "bottom"
        }, {
            name: "left"
        }]
    }]
});
</script>

Defines the offset applied to the connector position. The offset pushes the connector away from the shape edge by the specified number of pixels in the direction appropriate for the connector's position (e.g., upward for "top", downward for "bottom", etc.).

Default: 10

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [{
        id: "1",
        content: { text: "Shape with Offset Connectors" },
        x: 100,
        y: 100,
        connectors: [{
            name: "top",
            offset: 25
        }, {
            name: "bottom",
            offset: 25
        }, {
            name: "left",
            offset: 15
        }, {
            name: "right",
            offset: 15
        }]
    }, {
        id: "2",
        content: { text: "Target Shape" },
        x: 350,
        y: 100
    }],
    connections: [
        { from: "1", to: "2", fromConnector: "right", toConnector: "left" }
    ],
    connectionDefaults: {
        endCap: "ArrowEnd"
    }
});
</script>

shapes.connectors.position

Function

The function that positions the connector. The function is passed a shape as parameter and should return a kendo.dataviz.diagram.Point indicating where the connector should be placed.

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapes: [{
      x: 100,
      y: 100,
      path: "m1,53.69333l17.5647,-17.56445l0,8.78235l23.15292,0l0,-26.34678l-8.78181,0l17.56417,-17.56444l17.5647,17.56444l-8.78238,0l0,26.34678l23.15297,0l0,-8.78235l17.56473,17.56445l-17.56473,17.56466l0,-8.78231l-63.87057,0l0,8.78231l-17.5647,-17.56466l0,0z",
      connectors: [{
        name: "Upstream",
        position: function(shape) {
          return shape._transformPoint(shape.bounds().top());
        }
      }, {
        name: "SideLeft",
        position: function(shape) {
          var p = shape.bounds().left();
          return shape._transformPoint(new kendo.dataviz.diagram.Point(p.x, p.y+27));
        }
      }, {
        name: "SideRight",
        position: function(shape) {
          var p = shape.bounds().right();
          return shape._transformPoint(new kendo.dataviz.diagram.Point(p.x, p.y + 27));
        }
      }]
    }]
  });
</script>

shapes.connectors.stroke

String|Object

Defines the stroke options of the shape connectors.

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapes: [{
      id: "1",
      x: 20,
      y: 40,
      content: {
        text: "Monday"
      },
      connectors: [
        {
          name: "top",
          stroke: {
            color: "red",
            width: 3
          },
          width: 15,
          height: 15
        }, {name: "right", width: 10, height: 10}]
    }, {
      id: "2",
      x: 200,
      y: 40,
      content: {
        text: "Tuesday"
      }
    }, {
      id: "3",
      x: 380,
      y: 200,
      content: {
        text: "Wednesday"
      }
    }],
    connections: [{
      from: "1",
      to: "2",
      fromConnector: "top"
    },{
      from: "2",
      to: "3"
    }],
    connectionDefaults: {
      endCap: "ArrowEnd"
    }
  });
</script>

shapes.connectors.width

Number

Defines the width of the shape connectors.

Default: 8

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [{
        id: "1",
        content: { text: "Wide Connectors" },
        x: 100,
        y: 20,
        connectors: [{
            name: "top",
            width: 15
        }, {
            name: "bottom",
            width: 15
        }]
    }]
});
</script>

Related Members