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

Shapes.connectorDefaults

configuration

Defines default options for all connectors belonging to a given shape.

shapes.connectorDefaults

Object

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapes: [{
      id: "1",
      x: 20,
      y: 40,
      content: {
        text: "Monday"
      },
      connectorDefaults: {
        width: 10,
        height: 10,
        fill: {
          color: "blue",
          opacity: 0.5
        },
        stroke: {
          width: 2,
          color: "lightgreen"
        },
        hover: {
          fill: {
            color: "yellow"
          },
          stroke: {
            color: "lightgreen"
          }
        }
      }
    }, {
      id: "2",
      x: 200,
      y: 40,
      content: {
        text: "Tuesday"
      }
    }, {
      id: "3",
      x: 380,
      y: 200,
      content: {
        text: "Wednesday"
      }
    }],
    connections: [{
      from: "1",
      to: "2"
    },{
      from: "2",
      to: "3"
    }],
    connectionDefaults: {
      endCap: "ArrowEnd"
    }
  });
</script>

shapes.connectorDefaults.fill

String|Object

Defines the fill options of the shape connectors.

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

shapes.connectorDefaults.height

Number

Defines the height of the shape connectors.

Default: 8

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

shapes.connectorDefaults.hover

Object

Defines the hover configuration of the shape connectors.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [{
        id: "1",
        content: { text: "Hover Default Config" },
        x: 100,
        y: 20,
        connectorDefaults: {
            hover: {
                fill: {
                    color: "#ffcc00"
                },
                stroke: {
                    color: "#cc6600",
                    width: 2
                }
            }
        }
    }]
});
</script>

shapes.connectorDefaults.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({
    shapes: [{
        id: "1",
        x: 100,
        y: 100,
        content: { text: "Offset Connectors" },
        connectorDefaults: {
            offset: 20
        }
    }, {
        id: "2",
        x: 300,
        y: 100,
        content: { text: "Shape 2" }
    }],
    connections: [
        { from: "1", to: "2", fromConnector: "right", toConnector: "left" }
    ],
    connectionDefaults: {
        endCap: "ArrowEnd"
    }
});
</script>

shapes.connectorDefaults.stroke

String|Object

Defines the stroke options of the shape connectors.

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

shapes.connectorDefaults.width

Number

Defines the width of the shape connectors.

Default: 8

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [{
        id: "1",
        content: { text: "Custom Connector Defaults" },
        x: 100,
        y: 20,
        connectorDefaults: {
            width: 12
        }
    }]
});
</script>

Related Members