Skip to main content

Optional Binding Properties

  • 5 minutes to read

The ASPxDiagram control allows you to bind a number of shape and connector visual properties, such as type, size, and style.

Note

If a binding property is undefined, the corresponding shape or connector property value will be maintained inside the loaded ASPxDiagram control and will then be lost after the page is reloaded.

Optional Binding Properties

Node property Value the property should return Sample return value
ContainerKey A parent container node key. The parent container node must be of the VerticalContainer or HorizontalContainer type. “102”
Height A node’s height, in Units. 0.625
ImageUrl A node image’s URL. This option is in effect for nodes of the CardWithImageOnLeft, CardWithImageOnTop, or CardWithImageOnRight type. “images/employees/30.png”
Left The x-coordinate of a node’s left border, in Units. 0.5
Locked A value that indicates whether a node is locked. Should return true or false. true
Style A node’s style. “stroke: red”
Text A node’s text. “ASP.NET”
TextStyle A node’s text style. “font-weight: bold; text-decoration: underline”
Top The y-coordinate of a node’s top border, in Units. 0.875
Type A node’s shape type. Built-in shape types are listed in the DiagramShapeType enumeration. “HorizontalContainer”
Width A node’s width, in Units. 1
ZIndex A node’s z-index. 1

Note

If you bind ASPxDiagram to a tree-like data structure, edge binding properties will not be in effect, because connectors are not bound to specific edges.

Edge property Value the property should return Sample return value
FromKey An edge’s start node key. “101”
FromLineEnd An edge’s line start tip. Should return the name of the ConnectorLineEnding enumeration’s field. “None”
FromPointIndex A shape’s connection point index where an edge begins. 1
LineType An edge’s line type. Should return the name of the ConnectorLineType enumeration’s field. “Straight”
Locked A value that indicates whether a node is locked. Should return true or false. false
Points An edge’s key points. “1.5,1.125 1.75,0.875 2.5,0.875”
Style An edge’s style. “stroke-dasharray: 4”
Text An edge’s text. “yes” or “{ 0.4: “text1”, 0.6: “text2” }”
TextStyle An edge’s text style. “font-weight: bold”
ToKey An edge’s end node key. “102”
ToLineEnd An edge’s line end tip. Should return the name of the ConnectorLineEnding enumeration’s field. “FilledTriangle”
ToPointIndex A shape’s connection point index where an edge ends. 11
ZIndex An edge’s z-index. 0

Example

<dx:ASPxDiagram ID="ASPxDiagram1" runat="server">
    <Mappings>
        <Node Key = "Key" Text = "Text" ContainerKey = "ContainerKey" Height = "Height" Width = "Width" 
            ImageUrl = "ImageUrl" Left = "Left" Top = "Top" Locked = "Locked" 
            Style = "Style" TextStyle = "TextStyle" Type = "Type" ZIndex = "ZIndex" />
        <Edge Key = "Key" Text = "Text" FromKey = "FromKey" FromLineEnd = "FromLineEnd" FromPointIndex = "FromPointIndex" 
            ToKey = "ToKey" ToLineEnd = "ToLineEnd" ToPointIndex = "ToPointIndex" LineType = "LineType" 
            Locked = "Locked" Points = "Points" Style = "Style" TextStyle = "TextStyle" ZIndex = "ZIndex" />
    </Mappings>
</dx:ASPxDiagram>
public class Node {
    public string Key { get; set; }
    public string Text { get; set; }
    public string ContainerKey { get; set; }
    public Decimal Height { get; set; }
    public Decimal Width { get; set; }
    public string ImageUrl { get; set; }
    public Decimal Left { get; set; }
    public Decimal Top { get; set; }
    public Boolean Locked { get; set; }
    public string Style { get; set; }
    public string TextStyle { get; set; }
    public string Type { get; set; }
    public int ZIndex { get; set; }

    public Node() { }
    public Node(string key, string text, string containerKey, string height, string width, string imageUrl, 
        string left, string top, Boolean locked, string style, string textStyle, string type, string zIndex) {
        Key = key;
        Text = text;
        ContainerKey = containerKey;
        Height = Convert.ToDecimal(height);
        Width = Convert.ToDecimal(width);
        ImageUrl = imageUrl;
        Left = Convert.ToDecimal(left);
        Top = Convert.ToDecimal(top);
        Locked = locked;
        Style = style;
        TextStyle = textStyle;
        Type = type;
        ZIndex = Convert.ToInt32(zIndex);
    }
}
public class Edge {
    public string Key { get; set; }
    public string Text { get; set; }
    public string FromKey { get; set; }
    public string FromLineEnd { get; set; }
    public int FromPointIndex { get; set; }
    public string ToKey { get; set; }
    public string ToLineEnd { get; set; }
    public int ToPointIndex { get; set; }
    public string LineType { get; set; }
    public Boolean Locked { get; set; }
    public string Points { get; set; }    
    public string Style { get; set; }
    public string TextStyle { get; set; }
    public int ZIndex { get; set; }
}

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

    static HttpSessionState Session { get { return HttpContext.Current.Session; } }
    public static object GetNodes() { return Nodes; }
    public static object GetEdges() { return Edges; }
    public static List<Node> Nodes {
        get {
            if (Session[NodeSessionKey] == null)
                Session[NodeSessionKey] = CreateNodes();
            return (List<Node>)Session[NodeSessionKey];
        }
    }
    public static List<Edge> Edges {
        get {
            if (Session[EdgeSessionKey] == null)
                Session[EdgeSessionKey] = CreateEdges();
            return (List<Edge>)Session[EdgeSessionKey];
        }
    }
    static List<Node> CreateNodes() {
        var result = new List<Node>();
        result.Add(new Node("101", "Product Manager", "", "0.625", "1", "", "0.5", "0.875", true, "", 
            "font-weight: bold; text-decoration: underline", "Rectangle", "2"));
        result.Add(new Node("102", "Team", "", "1.375", "2", "", "2.5", "0.5", false, "stroke: red", 
            "font-weight: bold; text-decoration: underline", "HorizontalContainer", "1"));
        result.Add(new Node("103", "Team Leader", "102", "0.5", "1.5", "images/employees/30.png", "2.875", 
            "0.625", false, "", "", "CardWithImageOnLeft", "1"));
        result.Add(new Node("104", "Developers", "102", "0.5", "1.5", "", "2.875", "1.25", false, 
            "", "", "Rectangle", "1"));
        return result;
    }
    static List<Edge> CreateEdges() {
        var result = new List<Edge>();
        result.Add(new Edge() { Key = "121", Text = "Task", LineType = "Straight", Locked = false, 
            FromKey = "101", FromLineEnd = "None", FromPointIndex = 1, ToKey = "102", 
            ToLineEnd = "FilledTriangle", ToPointIndex = 11, Points = "1.5,1.125 1.75,0.875 2.5,0.875", Style = "stroke-dasharray: 4", 
            TextStyle = "font-weight: bold", ZIndex = 0 });
        return result;
    }
}

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

Diagram