Handling Server-side Events

This tutorial shows how to create a new TableNode in response to a click on a node in the organizational chart described in the previous topic. The table displays additional information about the employee corresponding to the clicked shape node.

1. Switch to the Default.aspx tab in the Code editor and click the Design tab.
2. Select the NetDiagram control. In the Properties window, click on the Events button. Double-click the NodeClicked event in the field on the right.

Visual Studio generates the DiagramView1_NodeClicked method for handling the NodeClicked event.

Switch to the Default.aspx.cs file. The DiagramView1_NodeClicked method should contain the necessary code for displaying information about the personnel in the clicked node.

C#

protected void DiagramView1_NodeClicked(object sender, NodeEventArgs e)
{}

3. In the DiagramView1_NodeClicked method, call the CreateTableNode method through the Factory property of the Diagram class. To create a rectangle TableNode object and show additional information, add the code:

C#

protected void DiagramView1_NodeClicked(object sender, NodeEventArgs e)
{
    Factory factory = DiagramView1.Diagram.Factory;
    TableNode t1 = factory.CreateTableNode(7, 5, 35, 24,2,3);
    t1.Caption = "Executive Director";
    t1[0, 0].Text = "Forename";
    t1[2, 0].Text = "Surname";
    t1[2, 1].Text = "Contact";
    t1[1, 0].Text = "George";
    t1[3, 0].Text = "John";
    t1[1, 2].Text = "email";
}

Well, this displays the same table regardless which employee is clicked, but let's pretend the data is queried from a database depending on the Tag of the clicked node.

4. Switch to the Default.aspx area in the Code editor and click the Design tab.

Select the NetDiagram control. In the Properties window, select the following Diagram properties: set TableShape to RoundedRectangle, set TableRowCount to 3, TableColumnCount to 2, choose TableBrush, TableColumnWidth, TableRowHeight as desired.

5. Execute the web application (press CTRL+F5).

After drawing the diagram, click on a diagram node. A table node is created containing information about the clicked node: