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

Render External Content in Shapes

The Diagram is rendered through the Drawing API.

The shape visual templates allow you to override the rendering entirely as demonstrated in the Basic Usage demo. In addition to the manual drawing of the shapes, you can use the HTML Drawing feature to convert existing document content into static drawings.

      .container {
        /* Move rendering container off-screen */
        position: absolute;
        left: -4000px;

        /* Set dimensions */
        width: 100px;
        height: 100px;

      .shape {
        width: 100px;
        border: 2px solid red;
        text-align: center;
        padding-bottom: 10px;

      .title {
        font-size: 20px;
        margin: 5px 0 20px 0;

    <script id="template" type="text/x-kendo-template">
      <div class="shape">
        <div class='title'>#= title #</div>
        Foo Bar

    <div id="diagram"></div>
      // Import the Drawing API namespaces
      var geom = kendo.geometry;
      var draw = kendo.drawing;

      // Compile the shape template
      var contentTemplate = kendo.template($("#template").html());

      function visualTemplate(options) {
        // Render template and bind it to the current data item
        var dataItem = options.dataItem;
        var renderElement = $("<div style='display:inline-block' />").appendTo("body");

        // Create a new group that will hold the rendered content
        var output = new kendo.drawing.Group();
        var width = renderElement.width();
        var height = renderElement.height();
        // Create a rectangle using the renderElement dimensions to expand the group while waiting for its actual content
        var geom = new kendo.geometry.Rect([0, 0], [width, height]);
        output.append(new kendo.drawing.Rect(geom, { stroke: { width: 0 }}));

          .then(function(group) {
          /* Remove helper rectangle */


          /* Clean-up */

        var visual = new kendo.dataviz.diagram.Group();

        return visual;

      var data = [{
        title: "Foo",
        items: [{
          title: "Bar"

        dataSource: {
          data: data,
          schema: {
            model: {
              children: "items"
          type: "tree",
          subtype: "right"
        shapeDefaults: {
          visual: visualTemplate

See Also

In this article
Not finding the help you need? Improve this article