New to Kendo UI for jQueryStart a free 30-day trial

Click

events

Fired when the user clicks on a shape or a connection.

Event Data

e.item kendo.dataviz.diagram.Shape | kendo.dataviz.diagram.Connection

The clicked shape or connection.

meta Object

An object with fields indicating which keys(altKey, ctrlKey, shiftKey, metaKey) were pressed.

e.point kendo.dataviz.diagram.Point

The clicked location.

e.sender kendo.dataviz.ui.Diagram

The widget instance which fired the event.

<div id='diagram'></div>
<script>
  $("#diagram").kendoDiagram({
    shapes: [
      {
        id: "1",
        content: {
          text: "Monday"
        }
      },
      {
        id: "2",
        content: "Tuesday"
      }
    ],
    connections: [

      {
        from: "1",
        to: "2"
      }
    ],
    layout: {
      type: "tree"
    },
    click: function(e) {
      if(e.item instanceof kendo.dataviz.diagram.Shape)
/* The result can be observed in the DevTools(F12) console of the browser. */
        console.log(e.item.options.content? e.item.options.content.text: "No content.");
      else
/* The result can be observed in the DevTools(F12) console of the browser. */
        console.log("Clicked a connection.");
    },
    shapeDefaults: {
      type: "circle",
      width: 70,
      height: 70,
      hover: {
        fill: "Orange"
      }
    },
    connectionDefaults: {
      type: "polyline",
      startCap: "FilledCircle",
      endCap: "ArrowEnd"
    }
  })
</script>
Not finding the help you need?
Contact Support