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.
Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
| 151090 | Jan 30,2020 12:46 PM UTC | Apr 29,2020 11:30 AM UTC | Blazor | 14 |
|
Tags: Diagram |
| 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();
} |
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.
You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.
