shapeDefaults.contentObject

Defines the default shapes content settings.

Example - customizing the shapes content appearance

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapeDefaults: {
      content: {
        align: "top left",
        color: "yellow",
        fontFamily: "Tahoma",
        fontSize: 16,
        fontStyle: "italic",
        fontWeight: 200
      }
    },
    shapes: [{
      id: "1",
      content: {
        text: "Monday"
      },
      x: 100,
      y: 20
    }, {
      id: "2",
      content: {
        text: "Tuesday"
      },
      x: 250,
      y: 20
    }, {
      id: "3",
      content: {
        text: "Wednesday"
      },
      x: 250,
      y: 200
    }],
    connections: [{
      from: "1",
      to: "2"
    },{
      from: "2",
      to: "3"
    }],
    connectionDefaults: {
      endCap: "ArrowEnd"
    }
  });
</script>

shapeDefaults.content.alignString

The alignment of the text inside the shape. You can do combinations between "top", "middle" and "bottom" for vertical align and "right", "center" and "left" for horizontal align. For example, "top right", "middle left", "bottom center", and so on.

shapeDefaults.content.colorString

The color of the shape content text.

shapeDefaults.content.fontFamilyString

The font family of the shape content text.

shapeDefaults.content.fontSizeNumber

The font size of the shape content text.

shapeDefaults.content.fontStyleString

The font style of the shape content text.

shapeDefaults.content.fontWeightString

The font weight of the shape content text.

shapeDefaults.content.templateString|Function

The template which renders the labels.

The fields which can be used in the template are:

  • dataItem - The data item if a field has been specified

Example - using a template for the shapes content

<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
    },
    dataBound: onDataBound
  });

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

shapeDefaults.content.textString

The text that is displayed in the shape.