shapeVisual Object

The visual element representing the shape.

This is either the result returned from shape.visual or a predefined type.

Example - accessing the shape visual element

<div id="diagram"></div>
<script>
  var shapesDataSource = {
    data: [
      { id: 1, JobTitle: "Job 1", Color: "red" },
      { id: 2, JobTitle: "Job 2", Color: "blue" },
      { id: 3, JobTitle: "Job 3", Color: "green" }
    ]
  };

  var connectionsDataSource = {
    data: [
      { id: 1, from: 1, to: 2},
      { id: 2, from: 1, to: 3},
    ]
  };

  var diagram = $("#diagram").kendoDiagram({
    dataSource: shapesDataSource,
    connectionsDataSource: connectionsDataSource,
    layout: {
      type: "tree"
    },
    shapeDefaults: {
      content: {
        template: "#= dataItem.JobTitle #"
      }
    }
  }).getKendoDiagram();
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log(diagram.shapes[0].shapeVisual);
</script>
In this article