Edit this page

click

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

Example - handling the click 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)
        console.log(e.item.options.content? e.item.options.content.text: "No content.");
      else
        console.log("Clicked a connection.");
    },
    shapeDefaults: {
      type: "circle",
      width: 70,
      height: 70,
      hover: {
        fill: "Orange"
      }
    },
    connectionDefaults: {
      type: "polyline",
      startCap: "FilledCircle",
      endCap: "ArrowEnd"
    }
  })
</script>

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.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy