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

ConnectionDefaults.content

configuration

Defines the label displayed on the connection path.

connectionDefaults.content

Object

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

String

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

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    connectionDefaults: {
        content: {
            text: "Connection",
            background: "#ffeb3b"
        }
    },
    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" }
    ]
});
</script>

connectionDefaults.content.border

Object

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

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    connectionDefaults: {
        content: {
            text: "Connection",
            background: "#fff",
            border: {
                color: "#000",
                width: 1
            }
        }
    },
    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" }
    ]
});
</script>

connectionDefaults.content.color

String

The color of the connection content text.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    connectionDefaults: {
        content: {
            color: "#FF0000",
            text: "Connection Text"
        }
    },
    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" }
    ]
});
</script>

connectionDefaults.content.fontFamily

String

The font family of the connection content text.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    connectionDefaults: {
        content: {
            fontFamily: "Arial, sans-serif",
            text: "Connection Text"
        }
    },
    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" }
    ]
});
</script>

connectionDefaults.content.fontSize

Number

The font size of the connection content text.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    connectionDefaults: {
        content: {
            fontSize: 16,
            text: "Connection Text"
        }
    },
    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" }
    ]
});
</script>

connectionDefaults.content.fontStyle

String

The font style of the connection content text.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    connectionDefaults: {
        content: {
            fontStyle: "italic",
            text: "Connection Text"
        }
    },
    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" }
    ]
});
</script>

connectionDefaults.content.fontWeight

String

The font weight of the connection content text.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    connectionDefaults: {
        content: {
            fontWeight: "bold",
            text: "Connection Text"
        }
    },
    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" }
    ]
});
</script>

connectionDefaults.content.offset

Number

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

Default: 5

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    connectionDefaults: {
        content: {
            text: "Connection",
            offset: 15
        }
    },
    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" }
    ]
});
</script>

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

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

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    connectionDefaults: {
        content: {
            text: "Connection",
            position: {
                vertical: "bottom",
                horizontal: "left"
            }
        }
    },
    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" }
    ]
});
</script>

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

<div id="diagram"></div>
<script>
  var serviceRoot = "https://demos.telerik.com/service/v2/core";

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

  var connectionsDataSource = {
    transport: {
      read: {
        url: serviceRoot + "/DiagramConnections"
      }
    },
    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.text

String

The static text displayed on the connection.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    connectionDefaults: {
        content: {
            text: "Connection Text"
        }
    },
    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" }
    ]
});
</script>

connectionDefaults.content.visual

Function

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

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

Related Members