Titel |
Value 1 |
Value 2 |
Value 3 |
HTMLNode.razor
<EjsDiagram ModelType="@model" Width="1000" Height="1000" Nodes="@NodeCollection" >
<DiagramTemplates>
<NodeTemplate>
@{
<style>
th {
border: 5px solid #c1dad7
}
td {
border: 5px solid #c1dad7
}
.c1 {
background: #4b8c74
}
.c2 {
background: #74c476
}
.c3 {
background: #a4e56d
}
.c4 {
background: #cffc83
}
</style>
<table style="width:100%;">
<tbody>
<tr> <th class="c1">ID</th> <th class="c2">offsetX</th> <th class="c3">offsetY</th></tr>
<tr>
<td class="c1"> @((context as Node).Id) </td>
<td class="c2"> @((context as Node).OffsetX) </td>
<td class="c3"> @((context as Node).OffsetY) </td>
</tr>
</tbody>
</table>
}
</NodeTemplate>
</DiagramTemplates>
</EjsDiagram>
//binding node offset and id
public Type model = typeof(Node);
public class Node
{
public string Id { get; set; }
public double OffsetX { get; set; }
public double OffsetY { get; set; }
}
//Initialize node collection with node
ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>()
{
//Creates an HTML node
new DiagramNode()
{
Id="node1",
//Size of the node
Height=50,
Width=200,
//Position of the node
OffsetX=400,
OffsetY=100,
//sets the type of the shape as HTML
Shape=new DiagramShape()
{
Type=Shapes.HTML,
}
}
}; |
@((context as Node).Annotations[0].Content)
@((context as Node).Annotations[1].Content)
new DiagramNode()
{
Id="node1",
//Size of the node
Height=50,
Width=200,
//Position of the node
OffsetX=400,
OffsetY=100,
Annotations = new ObservableCollection() { new DiagramNodeAnnotation() { Content = "Hi" },new DiagramNodeAnnotation() { Content = "Hello" } },
//sets the type of the shape as HTML
Shape=new DiagramShape()
{
Type=Shapes.HTML,
}
},
new DiagramNode()
{
Id="node2",
//Size of the node
Height=50,
Width=200,
//Position of the node
OffsetX=800,
OffsetY=200,
Annotations = new ObservableCollection() { new DiagramNodeAnnotation() { Content = "Hey" },new DiagramNodeAnnotation() { Content = "Hallo" } },
//sets the type of the shape as HTML
Shape=new DiagramShape()
{
Type=Shapes.HTML,
}}Problem 2: When i manage to solve the problem with offsetY in Annotation, the order of showing the results doesn't match anymore. It seems, that the annotations are sorted at the end somehow automatically.Greets,
<EjsDiagram id="diagram" @ref="@diagram" Width="100%" Height="350px" >
</EjsDiagram>
@code{
EjsDiagram diagram;
// after the node and connectors initialized
diagram.DoLayout();
} |