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.
Maximize productivity with
30% off* for a limited time
using BOOSTDEV30.
Includes 3- and 5-packs.
*Some exclusions may apply.
New Product LaunchBoldDesk: Help desk ticketing software starts at $10 for 3 agents.
Try it for free.|
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,
}
}
}; |
