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

ShapeDefaults.connectors

configuration

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

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

You can define your own custom connectors or use the predefined types.

shapeDefaults.connectors

Array

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapeDefaults: {
      connectors: [
        {
          name: "top",
          width: 15,
          height: 15,
          fill: {
            color: "green",
            opacity: 0.7
          },
          hover: {
            fill: {
              color: "lightblue"
            },
            stroke: {
              color: "gray",
              dashType: "dot"
            }
          },
          stroke: {
            width: 2,
            color: "white",
            dashType: "solid"
          }
        },
        {
          name: "bottom"
        }]
    },
    shapes: [{
      id: "1",
      content: {
        text: "Monday"
      },
      x: 100,
      y: 20
    }, {
      id: "2",
      content: {
        text: "Tuesday"
      },
      x: 250,
      y: 20
    }, {
      id: "3",
      content: {
        text: "Wednesday"
      },
      x: 250,
      y: 200
    }],
    connections: [{
      from: "1",
      to: "2",
      fromConnector: "top",
      toConnector: "top"
    },{
      from: "2",
      to: "3",
      fromConnector: "bottom",
      toConnector: "top"
    }],
    connectionDefaults: {
      endCap: "ArrowEnd"
    }
  });
</script>

The following example demonstrates how to define a custom shape with connectors adapted to the outline of the shape. You can see how the shape bounds are accessed and used to determine the position of the connectors.

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    dataSource: [{name: "item1"}],
    shapeDefaults: {
      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 + 17));
        }
      }, {
        name: "SideRight",
        position: function(shape) {
          var p = shape.bounds().right();
          return shape._transformPoint(new kendo.dataviz.diagram.Point(p.x, p.y + 17));
        }
      }]
    }
  });
</script>

shapeDefaults.connectors.fill

String|Object

Defines the fill options of the shape connectors.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapeDefaults: {
        connectors: {
            fill: {
                color: "lightblue",
                opacity: 0.8
            }
        }
    },
    shapes: [
        { id: "1", x: 100, y: 100, content: { text: "Shape 1" } }
    ]
});
</script>

shapeDefaults.connectors.height

Number

Defines the height of the shape connectors.

Default: 8

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapeDefaults: {
        connectors: {
            height: 12
        }
    },
    shapes: [
        { id: "1", x: 100, y: 100, content: { text: "Shape 1" } }
    ]
});
</script>

shapeDefaults.connectors.hover

Object

Defines the hover configuration of the shape connectors.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapeDefaults: {
        connectors: {
            hover: {
                fill: {
                    color: "lightblue"
                },
                stroke: {
                    color: "blue",
                    width: 2
                }
            }
        }
    },
    shapes: [
        { id: "1", x: 100, y: 100, content: { text: "Shape 1" } }
    ]
});
</script>

shapeDefaults.connectors.name

String

The connector name. The name is referenced when specifying explicit fromConnector and toConnector values in a connection.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
        {
            id: "1",
            content: {
                text: "Shape with Named Connectors"
            },
            x: 100,
            y: 100
        },
        {
            id: "2",
            content: {
                text: "Target Shape"
            },
            x: 300,
            y: 100
        }
    ],
    shapeDefaults: {
        connectors: [
            {
                name: "topConnector",
                position: function(shape) {
                    return shape._transformedBounds().top();
                }
            }
        ]
    },
    connections: [
        {
            from: "1",
            to: "2",
            fromConnector: "topConnector"
        }
    ]
});
</script>

shapeDefaults.connectors.offset

Number

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({
    shapeDefaults: {
        connectors: [{
            name: "top",
            offset: 20
        }, {
            name: "bottom",
            offset: 15
        }, {
            name: "left",
            offset: 10
        }, {
            name: "right",
            offset: 10
        }]
    },
    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", fromConnector: "right", toConnector: "left" }
    ],
    connectionDefaults: {
        endCap: "ArrowEnd"
    }
});
</script>

shapeDefaults.connectors.position

Function

The function that positions the connector. The function is passed a shape and should return kendo.dataviz.diagram. As a result, a point that holds the connector position appears.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapeDefaults: {
        connectors: {
            position: function(shape) {
                // Position connector at the center of the shape
                return new kendo.dataviz.diagram.Point(shape.x + shape.width/2, shape.y + shape.height/2);
            }
        }
    },
    shapes: [
        { id: "1", x: 100, y: 100, content: { text: "Shape 1" } }
    ]
});
</script>

shapeDefaults.connectors.stroke

String|Object

Defines the stroke options of the shape connectors.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapeDefaults: {
        connectors: {
            stroke: {
                color: "red",
                width: 2,
                dashType: "dot"
            }
        }
    },
    shapes: [
        { id: "1", x: 100, y: 100, content: { text: "Shape 1" } }
    ]
});
</script>

shapeDefaults.connectors.width

Number

Defines the width of the shape connectors.

Default: 8

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapeDefaults: {
        connectors: {
            width: 12
        }
    },
    shapes: [
        { id: "1", x: 100, y: 100, content: { text: "Shape 1" } }
    ]
});
</script>

Related Members