Creating Items Programmatically

To create shape nodes for a sample organizational chart, add the code below to the Default.aspx.cs file:

1. Specify a default shape, in this example the rectangle.

C#

this.DiagramView1.Diagram.DefaultShape = Shapes.Rectangle;

2. Create a shape node by calling the CreateShapeNode method of the Factory class:

C#

Factory factory = DiagramView1.Diagram.Factory;
ShapeNode n1 = factory.CreateShapeNode(32, 12, 45, 18);

3. Activate the EnableStyledText property of the shape node to allow text formatting:

C#

n1.EnableStyledText = true;

4. Specify the description of the personnel position in each shape node in its Text property.

5. Embed some HTML formating tags within the C# code to display the text italic or bold or with the desired color. In this example:

• "\n" specifies a new line;
• "<i> George Smith </i>" specifies italic text style;
• "<b><color=#009900> President and CEO</color></b>" displayes bold and colored text as specified in the <color> tag;

C#

n1.Text = "Executive Director" + "\n" + "<i> George Smith </i>" + "\n" + "<b><color=#009900> President and CEO</color></b>";

6. To connect the shape nodes, use the CreateDiagramLink method of the Factory class.
   

   C#

   DiagramLink d12 = factory.CreateDiagramLink(n1, n2);

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

Select the NetDiagram control. In the Properties window, expand the area of the Diagram properties, set LinkHeadShape to None. Choose LinkPen and LinkBrush.

8. The diagram elements are preserved in the viewstate of the page. To prevent creating additional items after post-backs, use the IsPostBack property. IsPostBack is true if the page is being loaded in response to a client postback; it is false at first loading the page.

C#

if (!IsPostBack)
{
}

The source code for drawing an organizational chart on the web form is shown below:

C#(Default.aspx.cs)

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
        this.DiagramView1.Diagram.DefaultShape = Shapes.Rectangle;
        Factory factory = DiagramView1.Diagram.Factory;
        // Root shape node
        ShapeNode n1 = factory.CreateShapeNode(32, 12, 35, 18);
        n1.EnableStyledText = true;
        n1.Text = "Executive Director" + "\n" + "<i> George Smith </i>" + "\n" + "<b><color=#009900> President and CEO</color></b>";
        // Second shape node
        ShapeNode n2 = factory.CreateShapeNode(2, 36, 25, 18);
        n2.EnableStyledText = true;
        n2.Text = "Administrative services" + "\n" + "<i> Thomas Jones </i>" + "\n" + "<b><color=#009900> Vice President</color></b>";
        //  
        ShapeNode n3 = factory.CreateShapeNode(32, 36, 25, 18);       
        n3.EnableStyledText = true;
        n3.Text = "Information services" + "\n" + "<i> James Miller</i>" + "\n" + "<b><color=#009900> Vice President</color></b>";
        //
        ShapeNode n4 = factory.CreateShapeNode(62, 36, 25, 18);
        n4.EnableStyledText = true;
        n4.Text = "Communication" + "\n" + "<i> Ann Brown</i>" + "\n" + "<b><color=#009900> Vice President</color></b>";
        //
        ShapeNode n5 = factory.CreateShapeNode(92, 36, 25, 18);
        n5.EnableStyledText = true;
        n5.Text = "Innovation" + "\n" + "<i> Tom Jackson</i>" + "\n" + "<b><color=#009900> Vice President</color></b>";
        //
        ShapeNode n6 = factory.CreateShapeNode(2, 58, 25, 18);
        n6.EnableStyledText = true;
        n6.Text = "Personnel management" + "\n" + "<i> Tim Miller</i>" + "\n" + "<b><color=#009900> Manager</color></b>";
        //
        ShapeNode n7 = factory.CreateShapeNode(32, 58, 25, 18);
        n7.EnableStyledText = true;
        n7.Text = "Publications" + "\n" + "<i> Alice Cross</i>" + "\n" + "<b><color=#009900> Manager</color></b>";
        //
        ShapeNode n8 = factory.CreateShapeNode(62, 58, 25, 18);
        n8.EnableStyledText = true;
        n8.Text = "Multi-media" + "\n" + "<i> Kathy Foster</i>" + "\n" + "<b><color=#009900> Manager</color></b>";
        //
        ShapeNode n9 = factory.CreateShapeNode(92, 58, 25, 18);
        n9.EnableStyledText = true;
        n9.Text = "Science" + "\n" + "<i> Mike Roberts</i>" + "\n" + "<b><color=#009900> Manager</color></b>";
        //
        //Draw links between shape nodes
        DiagramLink d12 = factory.CreateDiagramLink(n1, n2);
        DiagramLink d13 = factory.CreateDiagramLink(n1, n3);
        DiagramLink d14 = factory.CreateDiagramLink(n1, n4);
        DiagramLink d15 = factory.CreateDiagramLink(n1, n5);
        DiagramLink d26 = factory.CreateDiagramLink(n2, n6);
        DiagramLink d37 = factory.CreateDiagramLink(n3, n7);
        DiagramLink d48 = factory.CreateDiagramLink(n4, n8);
        DiagramLink d59 = factory.CreateDiagramLink(n5, n9);
        }
    }
}

Visual Basic

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then
            Dim diagram As Diagram = diagramView.Diagram
            diagram.SelectAfterCreate = False
            Dim n1 As ShapeNode = diagram.Factory.CreateShapeNode(32, 12, 35, 18)
            n1.EnableStyledText = true
            n1.Text = "Executive Director" + "\n" + "<i> George Smith </i>" + "\n" + "<b><color=#009900> President and CEO</color></b>"
        End If
    End Sub

9. Execute the web application (press CTRL+F5). The nodes are drawn as shown below: