Events
RadDiagram provides a rich set of Client-Side events which allow easy and flexible use in a wide range of application scenarios. Many of the events are cancelable giving you the possibility to cancel any operation performed on the image:
OnLoad—raised when the control is initialized. You can use it to store object references.You can get the underlying Kendo widget from the RadDiagram object via the get_kendoWidget() method.
OnAdd—raised when the user adds a new shape or a new connection.
OnChange—raised when an item is added or removed to/from the diagram.
OnClick—raised when the user clicks on a shape or a connection.
OnDataBound—raised when the widget is bound to data from a dataDource and a connectionsDataSource.
OnItemBoundsChange—raised when the location or size of an item are changed.
OnItemRotate—raised when an item is rotated.
OnMouseEnter—raised when the mouse enters a shape or a connection. Will not fire for disabled items.
OnMouseLeave—raised when the mouse leaves a shape or a connection. Will not fire for disabled items.
OnPan—raised when the user pans the diagram.
OnRemove—raised when the user deletes a shape or a connection.
OnSelect—raised when the user selects one or more items.
OnZoomStart—raised when the user starts changing the diagram zoom level.
OnZoomEnd—raised when the user changes the diagram zoom level.
To use these events, simply write a JavaScript function that can be called when the event occurs. Then assign the name of this function as the value of the the corresponding property in the ClientEvents RadDiagram subtag.
<telerik:RadDiagram ID="RadDiagram1" runat="server">
<ClientEvents OnLoad="OnLoad" />
<ShapesCollection>
<telerik:DiagramShape Id="s1"></telerik:DiagramShape>
</ShapesCollection>
</telerik:RadDiagram>
<script type="text/javascript">
function OnLoad(diagram) {
alert("OnLoad event fired by RadDiagram with ID: " + diagram.get_id());
}
</script>
All Client-Side events, except OnLoad, are references to their corresponding events of the Kendo UI diagram object. You can get familiar will the full set of arguments coming with each event in the Kendo UI diagram API reference. For example:
<telerik:RadDiagram ID="RadDiagram2" runat="server">
<ClientEvents OnClick="OnClick" />
<ShapesCollection>
<telerik:DiagramShape Id="DiagramShape1"></telerik:DiagramShape>
</ShapesCollection>
</telerik:RadDiagram>
<script type="text/javascript">
function OnClick(args) {
var kendoWidget = args.sender;
var itemId = args.item.id;
var point = args.point;
alert("You have just clicked on an item with ID: " + itemId + " at position: {x=" + point.x + ", y=" + point.y + "}");
}
</script>