connectionDefaults.contentObject

Defines the label displayed on the connection path.

Example - customizing connection content

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    dataSource: [
      {id:"one", name:"One"},
      {id:"two", name:"Two"},
      {id:"five", name:"Five"},
    ],
    connectionsDataSource:[
      {from:"one", to:"two", label: "plus one"},
      {from:"one", to:"five", label: "plus three"}
    ],
    layout: "layered",
    connectionDefaults: {
      content: {
        color: "green",
        fontFamily: "Segoe UI",
        fontSize: 16,
        fontStyle: "italic",
        fontWeight: 200,
        template: "#: dataItem.label #"
      }
    }
  });
</script>

connectionDefaults.content.colorString

The color of the connection content text.

connectionDefaults.content.fontFamilyString

The font family of the connection content text.

connectionDefaults.content.fontSizeNumber

The font size of the connection content text.

connectionDefaults.content.fontStyleString

The font style of the connection content text.

connectionDefaults.content.fontWeightString

The font weight of the connection content text.

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

Example - showing values from the connectionDataSource in the connection labels

<div id="diagram"></div>
<script>
  var serviceRoot = "https://demos.telerik.com/kendo-ui/service";

  var shapesDataSource = {
    transport: {
      read: {
        url: serviceRoot + "/DiagramShapes",
        dataType: "jsonp"
      }
    },
    schema: {
      model: {
        fields: {
          id: { from: "Id", type: "number" },
          JobTitle: { type: "string" },
          Color: { type: "string" }
        }
      }
    }
  };

  var connectionsDataSource = {
    transport: {
      read: {
        url: serviceRoot + "/DiagramConnections",
        dataType: "jsonp"
      }
    },
    schema: {
      model: {
        id: "id",
        fields: {
          id: { from: "Id", type: "number" },
          from: { from: "FromShapeId", type: "number" },
          to: { from: "ToShapeId", type: "number" },
          fromX: { from: "FromPointX", type: "number" },
          fromY: { from: "FromPointY", type: "number" },
          toX: { from: "ToPointX", type: "number" },
          toY: { from: "ToPointY", type: "number" }
        }
      }
    }
  };

  $("#diagram").kendoDiagram({
    dataSource: shapesDataSource,
    connectionsDataSource: connectionsDataSource,
    layout: {
      type: "layered"
    },
    shapeDefaults: {
      content: {
        template: "#= dataItem.JobTitle #"
      },
      width: 200
    },
    connectionDefaults: {
      content: {
        template: "#: dataItem.from # - #: dataItem.to #"
      }
    },
    dataBound: onDataBound
  });

  function onDataBound(e) {
    var that = this;
    setTimeout(function () {
      that.bringIntoView(that.shapes);
    }, 0);
  }
</script>

connectionDefaults.content.textString

The static text displayed on the connection.

connectionDefaults.content.visualFunction

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

Example - using a content visual for connections

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    dataSource: [{
      "name" : "Telerik",
      "items": [
        {"name": "Kendo UI"},
        {"name": "NativeScript"}
      ]
    }],
    connectionDefaults: {
      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: "Foo",
            fontSize: 16,
            x: 30
          });

          g.append(circle);
          g.append(text);
          return g;
        }
      }
    },
    layout: {
      type: "tree"
    }
  });
</script>