Handling Client-side Events

Handling the LinkCreated and LinkCreating events

1. Open the Default.aspx file, switch to Design view, and click the NetDiagram control.

In the Properties window, find the DiagramView LinkCreatedScript proprety.

In the field on the right of the LinkCreatedScript proprety, type in the name of the JavaScript function, in this case 'onLinkCreated'.

2. Add the JavaScript 'onLinkCreated' function for handling the LinkCreated event.

In the Default.aspx file, switch to Source view. Add a <script> element and add the JavaScript "onLinkCreated" function as shown below: 

JavaScript

function onLinkCreated(diagram, args)
{
    // get info about the DiagramLink just created
    var link = args.getLink();
    var points = link.getControlPoints();
    var destPoint = points[points.length - 1];
}

The client-side Diagram instance is passed as the first (sender) argument of event handlers. 

The Javascript function 'onLinkCreating' is performed to handle the LinkCreating client-side event. It specifies starting of links only from ShapeNodes.

JavaScript

function onLinkCreating(diagram, args)
{
    var link = args.link;
    var origin = link.origin;

    // allow links start only from ShapeNodes
    if (!MindFusion.Diagramming.ShapeNode.isInstanceOfType(origin))
        args.setCancel(true);
}

3. Execute the Website application.

As implemented, you can draw links beginning from the root node and ending at an unoccupied point in the diagram canvas. You cannot draw another shape node yet. You can only draw a link because the Behavior is DrawLinks.

Follow the next topic to understand how to extend the onLinkCreated handler to draw a new shape node at the end point of the link, and to connect the new shape node to the link.