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

ShapeDefaults.content

configuration

Defines the default shapes content settings.

shapeDefaults.content

Object

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

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.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapeDefaults: {
        content: {
            text: "Aligned Text",
            align: "bottom right"
        }
    },
    shapes: [
        { id: "1", x: 100, y: 100, width: 120, height: 80 }
    ]
});
</script>

shapeDefaults.content.color

String

The color of the shape content text.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapeDefaults: {
        content: {
            text: "Colored Text",
            color: "red"
        }
    },
    shapes: [
        { id: "1", x: 100, y: 100, content: { text: "Shape 1" } }
    ]
});
</script>

shapeDefaults.content.fontFamily

String

The font family of the shape content text.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapeDefaults: {
        content: {
            text: "Custom Font",
            fontFamily: "Arial"
        }
    },
    shapes: [
        { id: "1", x: 100, y: 100, content: { text: "Shape 1" } }
    ]
});
</script>

shapeDefaults.content.fontSize

Number

The font size of the shape content text.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapeDefaults: {
        content: {
            text: "Large Text",
            fontSize: 18
        }
    },
    shapes: [
        { id: "1", x: 100, y: 100, content: { text: "Shape 1" } }
    ]
});
</script>

shapeDefaults.content.fontStyle

String

The font style of the shape content text.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapeDefaults: {
        content: {
            text: "Italic Text",
            fontStyle: "italic"
        }
    },
    shapes: [
        { id: "1", x: 100, y: 100, content: { text: "Shape 1" } }
    ]
});
</script>

shapeDefaults.content.fontWeight

String

The font weight of the shape content text.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapeDefaults: {
        content: {
            text: "Bold Text",
            fontWeight: "bold"
        }
    },
    shapes: [
        { id: "1", x: 100, y: 100, content: { text: "Shape 1" } }
    ]
});
</script>

shapeDefaults.content.lineSpacing

Number

The spacing between lines of text in the shape.

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapeDefaults: {
      content: {
        text: "First Line\nSecond Line\nThird Line",
        lineSpacing: 1.5
      },
      width: 120,
      height: 80
    },
    shapes: [
      { x: 50, y: 50 }
    ]
  });
</script>

shapeDefaults.content.padding

Number|Object

The padding of the shape content.

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapeDefaults: {
      content: {
        text: "Padded Content",
        padding: 15
      },
      fill: { color: "lightblue" },
      stroke: { color: "blue" }
    },
    shapes: [
      { x: 50, y: 50, width: 120, height: 60 }
    ]
  });
</script>

shapeDefaults.content.relativePadding

Number|Object

The relative padding of the shape content e.g. 0.03 means 3% of the shape width/height.

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapeDefaults: {
      content: {
        text: "Relative Padding",
        relativePadding: 0.1
      }
    },
    shapes: [
      { x: 50, y: 50, width: 150, height: 80 },
      { x: 250, y: 50, width: 100, height: 60 }
    ]
  });
</script>

shapeDefaults.content.template

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

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

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

shapeDefaults.content.text

String

The text that is displayed in the shape.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapeDefaults: {
        content: {
            text: "Default Text"
        }
    },
    shapes: [
        { id: "1", x: 100, y: 100 },
        { id: "2", x: 300, y: 100, content: { text: "Custom Text" } }
    ]
});
</script>

shapeDefaults.content.textWrap

String

Configures the text wrapping behavior in the shape. Supported values are "nowrap" and "wrap".

Default: "nowrap"

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapeDefaults: {
      content: {
        text: "This is a long text that will wrap within the shape boundaries",
        textWrap: "wrap"
      },
      width: 100,
      height: 80
    },
    shapes: [
      { x: 50, y: 50 }
    ]
  });
</script>

Related Members