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

Connections.content

configuration

Defines the connection content settings.

connections.content

Object

<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.content.background

String

The background color of the connection label. Accepts valid CSS colors.

<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",
        content: {
            text: "Important",
            background: "#ffeb3b",
            border: {
                color: "#000",
                width: 1
            }
        }
    }]
});
</script>

connections.content.border

Object

The border options of the connection label. Applicable when background is set.

<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",
        content: {
            text: "Connection",
            background: "#fff",
            border: {
                color: "#000",
                width: 1
            }
        }
    }]
});
</script>

connections.content.color

String

The color of the connection content text.

<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",
      content: {
        text: "Connection",
        color: "#ff6358"
      }
    }]
});
</script>

connections.content.fontFamily

String

The font family of the connection content text.

<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",
      content: {
        text: "Connection",
        fontFamily: "Arial, sans-serif"
      }
    }]
});
</script>

connections.content.fontSize

Number

The font size of the connection content text.

<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",
      content: {
        text: "Connection",
        fontSize: 14
      }
    }]
});
</script>

connections.content.fontStyle

String

The font style of the connection content text.

<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",
      content: {
        text: "Connection",
        fontStyle: "italic"
      }
    }]
});
</script>

connections.content.fontWeight

String

The font weight of the connection content text.

<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",
      content: {
        text: "Connection",
        fontWeight: "bold"
      }
    }]
});
</script>

connections.content.offset

Number

Defines the distance (in pixels) between the label and the connection path.

Default: 5

<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",
        content: {
            text: "Connection",
            offset: 15
        }
    }]
});
</script>

connections.content.padding

Number|Object

The padding options of the connection label. Applicable when background or border is set.

Default: { left: 4, right: 4, top: 2, bottom: 2 }

<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",
        content: {
            text: "Connection",
            background: "#ffeb3b",
            padding: 10
        }
    }]
});
</script>

connections.content.position

String|Object

Defines the position of the label relative to the connection path. Can be set to "inline" to position the label along the connection path, or an object with vertical and horizontal properties.

Default: { vertical: "top", horizontal: "right" }

<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",
        content: {
            text: "Connection",
            position: "inline"
        }
    }]
});
</script>

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
        { id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
        { id: "2", x: 300, y: 200, content: { text: "Shape 2" } }
    ],
    connections: [{
        from: "1",
        to: "2",
        content: {
            text: "Connection",
            position: {
                vertical: "bottom",
                horizontal: "left"
            }
        }
    }]
});
</script>

connections.content.template

String|Function

The template which renders the labels.

pseudo

    <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: {
              template: () => {
                return (
                  "Iteration on " + kendo.toString(new Date(), "MM/dd/yyyy")
                );
              },
            },
          }
        ]
      });
    </script>

connections.content.text

String

The text displayed for 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",
      content: {
        text: "Connection Label"
      }
    }]
});
</script>

connections.content.visual

Function

A function returning a visual element to render for the content of the connection.

<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: {
          visual: function(e) {
            var g = new kendo.dataviz.diagram.Group({
              autoSize: true
            });
            var circle = new kendo.dataviz.diagram.Circle({
              width: 15,
              height: 15,
              fill: {
                color: "LimeGreen"
              }
            });
            var text = new kendo.dataviz.diagram.TextBlock({
              text: "Valid",
              fontSize: 16,
              x: 20
            });

            g.append(circle);
            g.append(text);
            return g;
          }
        }
      }
    ]
  });
</script>

Related Members