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

ToolBarClick

events

Fired when the user clicks an item in the toolbar.

toolBarClick

Event Data

e.action `String`

The name of the clicked tool.

e.shapes `Array`

The selected shapes.

e.connections `Array`

The selected connections.

e.target `jQuery`

The jQuery object that represents the clicked toolbar element.

e.sender `kendo.dataviz.ui.Diagram`

The widget instance which fired the event.

<div id="diagram" style="height:600px;"></div>
<script>
  $("#diagram").kendoDiagram({
    dataSource: {
      data: [
        { id: 1, jobTitle: "President" },
        { id: 2, jobTitle: "VP Finance" }
      ],
      schema: {
        model: {
          id: "id",
          fields: {
            jobTitle: { type: "string" }
          }
        }
      }
    },
    connectionsDataSource: {
      data: [
        { id: 1, from: 1, to: 2 }
      ],
      schema: {
        model: {
          id: "id",
          fields: {
            from: { type: "number" },
            to: { type: "number" }
          }
        }
      }
    },
    layout: {
      type: "tree",
      subtype: "tipover",
      underneathHorizontalOffset: 140
    },
    shapeDefaults: {
      content: {
        template: "#: jobTitle #"
      }
    },
    toolBarClick: onToolBarClick
  });

  function onToolBarClick(e){
/* The result can be observed in the DevTools(F12) console of the browser. */
    console.log("Selected action '" + e.action + "' for shapes: " + e.shapes);
  }
</script>