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

Content

configuration

Defines the options for the label displayed on the connection path.

content

Object

<div id="diagram"></div>
<script>
  var Shape = kendo.dataviz.diagram.Shape;
  $("#diagram").kendoDiagram();
  var diagram = $("#diagram").data("kendoDiagram");
  var shape1 = diagram.addShape( new Shape({x:100, y: 100}));
  var shape2 = diagram.addShape( new Shape({x:300, y: 100}));

  var connection = new kendo.dataviz.diagram.Connection(shape1, shape2, {
    content: {
      text: "Step 1",
      color: "#336699",
      fontSize: 16,
      fontStyle: "italic",
      fontWeight: "bold"
    },
    selectable: false
  });

  diagram.addConnection(connection);
</script>

content.color

String

The color of the connection content text.

<div id="diagram"></div>
<script>
  var Shape = kendo.dataviz.diagram.Shape;
  $("#diagram").kendoDiagram();
  var diagram = $("#diagram").data("kendoDiagram");
  var shape1 = diagram.addShape( new Shape({x:100, y: 100}));
  var shape2 = diagram.addShape( new Shape({x:300, y: 100}));

  var connection = new kendo.dataviz.diagram.Connection(shape1, shape2, {
    content: {
      text: "Connection",
      color: "red"
    },
    selectable: false
  });

  diagram.addConnection(connection);
</script>

content.fontFamily

String

The font family of the connection content text.

<div id="diagram"></div>
<script>
  var Shape = kendo.dataviz.diagram.Shape;
  $("#diagram").kendoDiagram();
  var diagram = $("#diagram").data("kendoDiagram");
  var shape1 = diagram.addShape( new Shape({x:100, y: 100}));
  var shape2 = diagram.addShape( new Shape({x:300, y: 100}));

  var connection = new kendo.dataviz.diagram.Connection(shape1, shape2, {
    content: {
      text: "Connection",
      fontFamily: "Arial"
    },
    selectable: false
  });

  diagram.addConnection(connection);
</script>

content.fontSize

Number

The font size of the connection content text.

<div id="diagram"></div>
<script>
  var Shape = kendo.dataviz.diagram.Shape;
  $("#diagram").kendoDiagram();
  var diagram = $("#diagram").data("kendoDiagram");
  var shape1 = diagram.addShape( new Shape({x:100, y: 100}));
  var shape2 = diagram.addShape( new Shape({x:300, y: 100}));

  var connection = new kendo.dataviz.diagram.Connection(shape1, shape2, {
    content: {
      text: "Connection",
      fontSize: 16
    },
    selectable: false
  });

  diagram.addConnection(connection);
</script>

content.fontStyle

String

The font style of the connection content text.

<div id="diagram"></div>
<script>
  var Shape = kendo.dataviz.diagram.Shape;
  $("#diagram").kendoDiagram();
  var diagram = $("#diagram").data("kendoDiagram");
  var shape1 = diagram.addShape( new Shape({x:100, y: 100}));
  var shape2 = diagram.addShape( new Shape({x:300, y: 100}));

  var connection = new kendo.dataviz.diagram.Connection(shape1, shape2, {
    content: {
      text: "Connection",
      fontStyle: "italic"
    },
    selectable: false
  });

  diagram.addConnection(connection);
</script>

content.fontWeight

String

The font weight of the connection content text.

<div id="diagram"></div>
<script>
  var Shape = kendo.dataviz.diagram.Shape;
  $("#diagram").kendoDiagram();
  var diagram = $("#diagram").data("kendoDiagram");
  var shape1 = diagram.addShape( new Shape({x:100, y: 100}));
  var shape2 = diagram.addShape( new Shape({x:300, y: 100}));

  var connection = new kendo.dataviz.diagram.Connection(shape1, shape2, {
    content: {
      text: "Connection",
      fontWeight: "bold"
    },
    selectable: false
  });

  diagram.addConnection(connection);
</script>

content.template

String|Function

The template which renders the labels.

The fields which can be used in the template are:

dataItem - the data item, in case a field has been specified

<div id="diagram"></div>
<script>
  var Shape = kendo.dataviz.diagram.Shape;
  $("#diagram").kendoDiagram();
  var diagram = $("#diagram").data("kendoDiagram");
  var shape1 = diagram.addShape( new Shape({x:100, y: 100}));
  var shape2 = diagram.addShape( new Shape({x:300, y: 100}));

  var connection = new kendo.dataviz.diagram.Connection(shape1, shape2, {
    content: {
      template: function(dataItem){
        return `Connection --->`
      }
    },
    selectable: false
  });

  diagram.addConnection(connection);
</script>

content.text

String

The static text displayed on the connection.

<div id="diagram"></div>
<script>
  var Shape = kendo.dataviz.diagram.Shape;
  $("#diagram").kendoDiagram();
  var diagram = $("#diagram").data("kendoDiagram");
  var shape1 = diagram.addShape( new Shape({x:100, y: 100}));
  var shape2 = diagram.addShape( new Shape({x:300, y: 100}));

  var connection = new kendo.dataviz.diagram.Connection(shape1, shape2, {
    content: {
      text: "Custom Connection Text"
    },
    selectable: false
  });

  diagram.addConnection(connection);
</script>

content.visual

Function

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

<div id="diagram"></div>
<script>
  var Shape = kendo.dataviz.diagram.Shape;
  $("#diagram").kendoDiagram();
  var diagram = $("#diagram").data("kendoDiagram");
  var shape1 = diagram.addShape( new Shape({x:100, y: 100}));
  var shape2 = diagram.addShape( new Shape({x:300, y: 100}));

  var connection = new kendo.dataviz.diagram.Connection(shape1, shape2, {
    content: {
      text: "Step 1",
      visual: function(e){
        var group = new kendo.dataviz.diagram.Group();
        group.append(new kendo.dataviz.diagram.TextBlock({ text: e.text }));
        group.rotate(-90, new kendo.dataviz.diagram.Point(10, 0));
        return group;
      }
    },
    selectable: false
  });

  diagram.addConnection(connection);
</script>