All docs
V20.2
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

Self-Referenced Data Structure

  • 3 minutes to read

Use the NodeDataSourceID property (or NodeDataSource in code behind) to bind the control to a self-referenced node list. Each entry in the list can specify another item as its parent.

Specify the following basic properties that allow the control to create a diagram:

Additionally, you can specify a number of optional binding properties for nodes.

The control creates a shape for every bound node and a connector between every pair of nodes linked by the Key - Parent Key pair. Note that edges are not maintained as entities in a data source. If a user detaches a connector, that connector disappears if you refresh control data.

Example

<dx:ASPxDiagram ID="ASPxDiagram1" runat="server">
    <Mappings>
        <Node Key="Key" ParentKey="ParentKey" Text="Text" />
    </Mappings>
</dx:ASPxDiagram>
public class Node {
    public string Key { get; set; }
    public string ParentKey { get; set; }
    public string Text { get; set; }
}

public static class DiagramDataProvider {
    const string NodeSessionKey = "Node";

    static HttpSessionState Session { get { return HttpContext.Current.Session; } }
    public static object GetNodes() { return Nodes; }
    public static List<Node> Nodes {
        get {
            if (Session[NodeSessionKey] == null)
                Session[NodeSessionKey] = CreateNodes();
            return (List<Node>)Session[NodeSessionKey];
        }
    }
    static List<Node> CreateNodes() {
        var result = new List<Node>();
        result.Add(new Node() { Key = "101", Text = "Corporate Headquarters" });
        result.Add(new Node() { Key = "102", ParentKey = "101", Text = "Sales and Marketing" });
        result.Add(new Node() { Key = "103", ParentKey = "101", Text = "Finance" });
        result.Add(new Node() { Key = "104", ParentKey = "101", Text = "Engineering" });
        result.Add(new Node() { Key = "105", ParentKey = "102", Text = "Field Office: Canada" });
        result.Add(new Node() { Key = "106", ParentKey = "102", Text = "Field Office: East Coast" });
        result.Add(new Node() { Key = "107", ParentKey = "102", Text = "Pacific Rim Headquarters" });
        result.Add(new Node() { Key = "108", ParentKey = "102", Text = "Marketing" });
        result.Add(new Node() { Key = "109", ParentKey = "107", Text = "Field Office: Singapore" });
        result.Add(new Node() { Key = "110", ParentKey = "107", Text = "Field Office: Japan" });
        result.Add(new Node() { Key = "111", ParentKey = "104", Text = "Consumer Electronics Div." });
        result.Add(new Node() { Key = "112", ParentKey = "104", Text = "Software Products Div." });
        result.Add(new Node() { Key = "113", ParentKey = "111", Text = "Software Development" });
        result.Add(new Node() { Key = "114", ParentKey = "112", Text = "Quality Assurance" });
        result.Add(new Node() { Key = "115", ParentKey = "112", Text = "Customer Support" });
        result.Add(new Node() { Key = "116", ParentKey = "112", Text = "Research and Development" });
        result.Add(new Node() { Key = "117", ParentKey = "112", Text = "Customer Services" });
        return result;
    }
}

protected void Page_Init(object sender, EventArgs e) {
    ASPxDiagram1.NodeDataSource = DiagramDataProvider.Nodes;
    ASPxDiagram1.DataBind();
}

Diagram

See Also

Online Demo: Tree from Linear Data Structure

Example: Diagram for Web Forms - Tree from Linear Data Structure - How to bind the control to in-memory data sources