We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
BoldSignEasily embed eSignatures in your .NET applications. Free sandbox with native SDK available.
|
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,
}
}
}; |
