Search

Client Side Events

Most of the client-side events are raised only when ClientSideMode is set to Canvas, but there are several events raised in ImageMap mode as well. Respectively, if AutoPostBack is enabled, some user actions lead to posting back the page and raising server events instead.

Creating event handlers in JavaScript

To handle a client-side event, create a JavaScript event handler function and assign its name to the respective event property of the DiagramView class. The properties that contain the names of the JavaScript event handlers have the same name as the event with a Script suffix added, in the form of [EventName]Script. The name of a handler function should reflect the name of the event that it handles. For example, add a "function onNodeCreated(sender, args)" script to handle the NodeCreated event.

Every element in the diagram has certain events which can trigger JavaScript functions. For example, when a ShapeNode is created by a user action, the NodeCreated event will be raised invoking the function whose name is specified in the NodeCreatedScript property. For each client-side event, there is a string property of the form [EventName]Script that specifies the respective JavaScript event handler function that should be called. In the Visual Studio Properties window, type in the name of the event handler function in the field of the respective event property, for example [EventName]Script = "onEventName".

Notification events

Most events are raised to notify you that the user has performed some action. A creation event is raised to let your application know about the new item (for example NodeCreated and LinkCreated). When a user presses the DEL key, an item-deleted event is raised (for example NodeDeleted, LinkDeleted). The events LinkClicked, NodeClicked, CellClicked occur when an item is clicked. There are many other events related to various activities a user could carry out on the diagram.

Validation events

Validation events let you approve or reject users actions. The event handler functions can set the Cancel property of event objects to true when an operation should be rejected.

While the user is holding down the mouse button and drawing an item, a creation validation event is raised continuously (for example NodeCreating). There are events raised when users modify items, for example NodeModifying and LinkModifying. When the user presses the Delete key, one of the NodeDeleting or LinkDeleting events are raised to let you confirm the operation.

Client-side events in ImageMap mode

The following events can be handled on the client-side both in Canvas and ImageMap modes: LinkClicked, NodeClicked, LinkDoubleClicked, NodeDoubleClicked.

Note that in ImageMap mode, the respective server-side events are not raised when their client-side counterparts are handled through JavaScript. At this time, the arguments passed to the client-side events are JavaScript objects that contain only two fields - ZIndex and Tag. Any of these values can be used to identify the diagram item on the server side, for example the former can be used as an index in the Objects collection, and the latter can be passed as parameter to one of the Find* methods.

Since version 3.0.1, some client side validation events can be raised in ImageMap mode too, including NodeCreating, LinkCreating, NodeModifying, LinkModifying, NodeDeleting and LinkDeleting. To enable this, set the EnableItemsDOM property to true. You cannot use the same code to handle validation events raised in both modes. The event objects passed to the event handlers in ImageMap mode have functions that follow the Microsoft Ajax naming conventions, such as get_node and set_cancel.