connections.content Object

Defines the connection content settings.

Example - configuring the connections content (text)

<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.color String

The color of the connection content text.

connections.content.fontFamily String

The font family of the connection content text.

connections.content.fontSize Number

The font size of the connection content text.

connections.content.fontStyle String

The font style of the connection content text.

connections.content.fontWeight String

The font weight of the connection content text.

connections.content.template String|Function

The template which renders the labels.

Example - using a template for the connection label

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

connections.content.text String

The text displayed for the connection.

connections.content.visual Function

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

Example - using a custom visual to render additional content in the connection label

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