getShapeById

Returns the shape or connection with the specified identifier.

Parameters

id String

The unique identifier of the Shape or Connection

Returns

Object the item that has the provided ID.

Example - get shape by id

<button id="getConnBtn">Select From shape of the first connection</button>
<div id="diagram"></div>
<script>
  $("#getConnBtn").on("click", function(){
    var diagram = $("#diagram").getKendoDiagram();
    // Using getShapeById for the pursposes of the example. In this case, diagram.connections[0].from points directly to the shape.
    var shape = diagram.getShapeById(diagram.connections[0].from.id);
    diagram.select(shape);
  });
  var serviceRoot = "https://demos.telerik.com/kendo-ui/service";

  var shapesDataSource = {
    batch: false,
    transport: {
      read: {
        url: serviceRoot + "/DiagramShapes",
        dataType: "jsonp"
      }
    },
    schema: {
      model: {
        id: "id",
        fields: {
          id: { from: "Id", type: "number", editable: false }
        }
      }
    }
  };

  var connectionsDataSource = {
    batch: false,
    transport: {
      read: {
        url: serviceRoot + "/DiagramConnections",
        dataType: "jsonp"
      }
    },
    schema: {
      model: {
        id: "id",
        fields: {
          id: { from: "Id", type: "number", editable: false },
          from: { from: "FromShapeId", type: "number" },
          to: { from: "ToShapeId", type: "number" }
        }
      }
    }
  };

  $("#diagram").kendoDiagram({
    layout: {
      type: "layered"
    },
    dataSource: shapesDataSource,
    connectionsDataSource: connectionsDataSource,
    shapeDefaults: {
      content: {
        template: "#= dataItem.JobTitle #"
      }
    }
  });
</script>