toFront

Brings the specified items in front, i.e. it's reordering items to ensure they are on top of the complementary items.

Parameters

items Array

An array of diagram items.

undoable Boolean

Whether the change should be recorded in the undo-redo stack.

Example - bring shape 1 on top of other shapes

<button id="showBtn">Shape 1 to front</button>
<div id="diagram"></div>
<script>
  $("#showBtn").on("click", function(){
    var diagram = $("#diagram").getKendoDiagram();
    diagram.toFront(diagram.shapes[0]);
  });
  $("#diagram").kendoDiagram({
    shapes:[
      {
        id:"1",
        content:{
          text: "State 1"
        },
        x: 20,
        y: 20,
        stroke: {
          width: 1,
          color: "#0000ff"
        }
      },
      {
        id:"2",
        content: {
          text: "State 2"
        },
        x: 70,
        y: 20,
        stroke: {
          width: 1,
          color: "#00ff00"
        }
      },
      {
        id:"3",
        content: {
          text: "State 3"
        },
        x: 100,
        y: 20,
        stroke: {
          width: 1,
          color: "#00ff00"
        }
      }
    ]
  });
</script>