toolBarClick

Fired when the user clicks an item in the toolbar.

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.

Example - handling the toolBarClick 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>