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){
    console.log("Selected action '" + e.action + "' for shapes: " + e.shapes);
  }
</script>
In this article
Not finding the help you need? Improve this article