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 ASPx
Node property | Value the property should return | Sample return value |
---|---|---|
Container |
A parent container node key. The parent container node must be of the Vertical |
“102” |
Height | A node’s height, in Units. | 0. |
Image |
A node image’s URL. This option is in effect for nodes of the Card |
“images/employees/30. |
Left | The x-coordinate of a node’s left border, in Units. | 0. |
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. |
Text |
A node’s text style. | “font-weight: bold; text-decoration: underline” |
Top | The y-coordinate of a node’s top border, in Units. | 0. |
Type | A node’s shape type. Built-in shape types are listed in the Diagram |
“Horizontal |
Width | A node’s width, in Units. | 1 |
ZIndex | A node’s z-index. | 1 |
Note
If you bind ASPx
Edge property | Value the property should return | Sample return value |
---|---|---|
From |
An edge’s start node key. | “101” |
From |
An edge’s line start tip. Should return the name of the Connector |
“None” |
From |
A shape’s connection point index where an edge begins. | 1 |
Line |
An edge’s line type. Should return the name of the Connector |
“Straight” |
Locked | A value that indicates whether a node is locked. Should return true or false. | false |
Points | An edge’s key points. | “1. |
Style | An edge’s style. | “stroke-dasharray: 4” |
Text | An edge’s text. | “yes” or “{ 0. |
Text |
An edge’s text style. | “font-weight: bold” |
To |
An edge’s end node key. | “102” |
To |
An edge’s line end tip. Should return the name of the Connector |
“Filled |
To |
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();
}