Optional Binding Properties

Feb 25, 2021
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.

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

ASPX

aspx

<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>

csharp

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();
}