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. Image for the cookie policy date

Binding data to Custom HTML Diagramnode

Hi,
I want to add 4 boxes under eachother in a node (a table with 4 rows in each node). Eachbox has a texutual value and a color background.
Here is explained, how to add the input values in the node but how can i bind this values to html emlement to show them?

example node:

Titel
Value 1
Value 2
Value 3


14 Replies

SG Shyam G Syncfusion Team January 31, 2020 11:26 AM UTC

Hi Nima, 
 
We have created a sample in which we have bind the node properties such as Id, offsetX and offsetY to the HTML template. Please refer to a code example and the sample below. 
 
Code example: 
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, 
             } 
          } 
        }; 
 
 
 
 
Regards, 
Shyam G 



NS Nima Samsami February 2, 2020 10:03 PM UTC

Thanks Shyam,
this is what i was searching for.

Greets,
Nima


SG Shyam G Syncfusion Team February 3, 2020 03:56 AM UTC

HI Nima, 
Thanks for your update. 
Please let us know if you need further assistance on this. 
Regards, 
Shyam G 



NS Nima Samsami February 4, 2020 10:22 PM UTC

Hi Again,
it works well with one node but, when adding a second node the complete Styling is ignored.


I have the same problem, when i am trying to dynamically change the nodes.

I made this changes to your code:


                          @((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, 


SG Shyam G Syncfusion Team February 5, 2020 04:26 AM UTC

Hi Nima,  
  
Reported Issue : Template binding for Multiple HTML node not working 
    
We can reproduce the issue. We have confirmed this as a defect. We have logged a defect report for this issue. We will fix this issue and provide the patch on 19th February,2020 weekly patch release.  
   
Now, you can track the status of your issue through below feedback link.  
 
  
Regards,  
Shyam G  



NS Nima Samsami February 18, 2020 05:28 PM UTC

Hi Again,
i have tried the new weekly patch today (v17.4.50) but the problem seens still not working. 
The issue in the feedback link provided in last comment is still open. Is the problem solved now? I yes is it possible to provide a samlpe diagram with 3 nodes? (If you update the nodes after the first draw ( after OnInitialized() )it doesn't work. F.e. if you want to trigger the diagram after rendering trough a button etc.)
The Problem is, that the all the nodes are shown on top of each other.

please see the comment in OnInitialized() in the samplecode i have provided: Sample Project

Greets,
Nima


GG Gowtham Gunashekar Syncfusion Team February 19, 2020 01:20 PM UTC

Hi Nima, 
 
The reported issue template binding for multiple HTML node has been fixed. In your sample, you have set node id as 0, 1, 2 etc. So that nodes are arranged at top of the page. In diagram, you need to set the unique id to the node. Node id should start with alphabets, not with some specific characters such as a number or some special characters. We have attached a sample for you references 
 
Sample link:https://www.syncfusion.com/downloads/support/directtrac/general/7z/NodeTemplate-299847155 
 
However, Template binding support for HTML node is not working is a known issue. We have already defect a log report for that. 
  
Reported Issue : Template is not working for the layout 
     
We can reproduce the issue. We have confirmed this as a defect. We have logged a defect report for this issue. We will fix this issue and provide the patch on 11th March,2020 weekly patch release.   
    
Now, you can track the status of your issue through below feedback link.   
  
 
Regards,   
Gowtham  G  
 
 



NS Nima Samsami February 19, 2020 03:26 PM UTC

Hi,
thanks for the feedback. I have changed the Id to a alphabetic Id but it didn't solved my problem.
I have a method named DrawDiagram(), which paints the diagram.
When i call this methon in the OnInitialized() method, it paints the nodes in the right place. Even with numeric NodeId.
When i call the method from an event triggered trough a click, the nodes are all painted on the top left side.
Do you have an Idea why this happens? In almost all of the examples on your side you draw the diagrams in the OnInitialized() method.


I have provided two screenshots of the same method call like i have explained before. Please check the attach.

Greets,
Nima


Attachment: Screenshots_24ba36fa.zip


GG Gowtham Gunashekar Syncfusion Team February 20, 2020 10:08 AM UTC

Hi Nima, 
 
We have modified your sample to demonstrate how to do layout a diagram at run time. We have attached the sample at the following link 
 
Sample line: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DynamicLayout-884984073 
 
After initializing the node and connector the doLayout method should be called dynamically so that node and connector arranged as layout. 
 
Please find the code snippet for how to use do layout method. 
<EjsDiagram id="diagram"  @ref="@diagram"  Width="100%" Height="350px" > 
</EjsDiagram> 
@code{ 
    EjsDiagram diagram; 
   // after the node and connectors initialized 
    diagram.DoLayout(); 
} 
 
As we promised we will fix the template binding not working for the layout and deliver the patch on weekly release. 
 
Regards, 
Gowtham G 
 



SG Shyam G Syncfusion Team March 11, 2020 11:36 PM UTC

Hi Nima,  
 
Reported Issue : Template is not working for the layout  
 
We have fixed the reported issue and included it in our patch release (v17.4.55) which is rolled out successfully.   
   
Please upgrade to the latest version packages to resolve this issue.         
  
Regards,  
Shyam G  



NS Nima Samsami April 23, 2020 08:15 AM UTC

Hi,
i am getting the failure after migration to the new API Version (18.1.0.45) for the Blazor

I didn't change anything else in my code but changing the Packet numbers as described in the migration Document.

Greets,
Nima


AR Aravind Ravi Syncfusion Team April 24, 2020 11:05 AM UTC

Hi Nima, 
 
Could you please confirm us what the issue you are facing after migration like namespace changes or any diagram related issues. So please share us a issue details or sample illustrating issue which would help us to proceed further. 
 
Regards 
Aravind Ravi 



NS Nima Samsami April 28, 2020 11:30 AM UTC

Hi,
I have attached to images.
one is the app working with version 17.4 and the other one is after upgrading to version 18 and changing the namespaces.

Greets,
Nima


Attachment: images_e7275863.zip


AR Aravind Ravi Syncfusion Team April 29, 2020 11:30 AM UTC

Hi Nima, 
 
We are unable to reproduce the reported issue at our end in our latest version 18.1.46. We have prepared a sample for the to render layout with layout. In this sample we have applied a style to for the node as you provided in your previous update. Please find the sample in below link 
 
 
In case if the issue still persists, please share us a code snippet of how do you apply template for the node or modify the above sample illustrating issue which would help us to proceed further. 
 
Regards 
Aravind Ravi 


Loader.
Live Chat Icon For mobile
Up arrow icon