Binding data to Custom HTML Diagramnode

[Nima Samsami]

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?

https://ej2.syncfusion.com/blazor/documentation/diagram/shapes/#html 

example node:

Titel

Value 1

Value 2

Value 3

[Shyam G]

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, 

             } 

          } 

        }; 

 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Htmlnodeblazor1315668834 

 

 

Regards, 

Shyam G 

[Nima Samsami]

Thanks Shyam,

this is what i was searching for.

Greets,

Nima

[Shyam G]

HI Nima, 

Thanks for your update. 

Please let us know if you need further assistance on this. 

Regards, 

Shyam G 

[Nima Samsami]

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, 

[Shyam G]

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 19^th February,2020 weekly patch release.  

   

Now, you can track the status of your issue through below feedback link.  

 

Feedback Link:   https://www.syncfusion.com/feedback/11804/template-binding-for-multiple-html-node-not-working 

  

Regards,  

Shyam G  

[Nima Samsami]

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

[Gowtham Gunashekar]

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 11^th March,2020 weekly patch release.   

    

Now, you can track the status of your issue through below feedback link.   

  

Feedback Link:  https://www.syncfusion.com/feedback/12022/template-is-not-working-for-the-layout 

 

Regards,   

Gowtham  G  

 

 

[Nima Samsami]

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.

Will this problem be also fixed with: https://www.syncfusion.com/feedback/12022/template-is-not-working-for-the-layout ?

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

[Gowtham Gunashekar]

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 

 

[Shyam G]

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.         

https://www.npmjs.com/package/@syncfusion/ej2-diagrams      

  

Regards,  

Shyam G  

[Nima Samsami]

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

[Aravind Ravi]

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 

[Nima Samsami]

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

[Aravind Ravi]

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 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/274971/ze/Template461894353 

 

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