Edit this page

connectionDefaults.content Object

Defines the label displayed on the connection path.

connectionDefaults.content.color String

The color of the connection content text.

connectionDefaults.content.fontFamily String

The font family of the connection content text.

connectionDefaults.content.fontSize Number

The font size of the connection content text.

connectionDefaults.content.fontStyle String

The font style of the connection content text.

connectionDefaults.content.fontWeight String

The font weight of the connection content text.

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

connectionDefaults.content.text String

The static text displayed on the connection.

connectionDefaults.content.visual Function

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

Example - Connection content visual

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    dataSource: [{
      "name" : "Telerik",
      "items": [
        {"name": "Kendo"},
        {"name": "Icenium"}
      ]
    }],
    connectionDefaults: {
      content: {
        visual: function(e) {
          var g = new kendo.dataviz.diagram.Group({
            autoSize: true
          });
          var text = new kendo.dataviz.diagram.TextBlock({
            text: "Foo",
            fontSize: 16,
            x: 10,
            y: 5
          });

          g.append(text);
          return g;
        }
      }
    },
    layout: {
      type: "tree"
    }
  });
</script>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy