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

ToFront

methods

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

toFront

Parameters:itemsArray

An array of diagram items.

undoableBoolean

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

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