Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
151056 | Jan 29,2020 02:07 PM UTC | Feb 19,2020 09:58 AM UTC | Blazor | 7 |
![]() |
Tags: Diagram |
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,
}
}
}; |
This post will be permanently deleted. Are you sure you want to continue?
Sorry, An error occured while processing your request. Please try again later.
This page will automatically be redirected to the sign-in page in 10 seconds.