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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to set the context of a DiagramNode (for using it in HTML-Template)

Thread ID:

Created:

Updated:

Platform:

Replies:

151056 Jan 29,2020 02:07 PM UTC Feb 19,2020 09:58 AM UTC Blazor 7
loading
Tags: Diagram
Wolfgang Steinert
Asked On January 29, 2020 02:07 PM UTC

Hello community,

my colleague and me are currently trying to find out how to set the context object of a node so we can use its values in the Node template.

So we are basically using this example given in the documentation:

https://ej2.syncfusion.com/blazor/documentation/diagram/shapes/?no-cache=1#html

But we are not adding a textbox but some kind of nested divs. Our model contains the properties "Rows" and "Columns" as int values and we want each node to show (for now, later it will become more complex) a square containing other squares in rows and columns depending on the int values of these properties.

So a 2x2-Square or a 2x3 or 3x3 etc. (I hope it is clear what I mean, English is not my native language :))

So we thought that in the NodeTemplate as we have an object of the Type given in ModelType in the local variable "context", we could use this. But: We do not find a way to set the context of the DiagramNode object we added to our NodeCollection. In the "context" variable is always a new object of the type with all properties set to the default values.

Is there any kind of documentation or does someone have any experience on how to do this?

Kind regards,
Wolfgang

Mounika
Replied On January 30, 2020 03:30 PM UTC

when we have multiple nodes ,how to access the context/current node?

Attachment: syncfusiondiagram_421392e4.zip

Shyam G [Syncfusion]
Replied On January 30, 2020 04:20 PM UTC

 
Hi Wolfgang, 
 
Could you please confirm us whether you need to bind the diagram node properties into the HTML template? If yes, we have created a sample to achieve your requirement. If we misunderstood your requirement, please elaborate your requirement in detail with the screenshot. 
 
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 


Wolfgang Steinert
Replied On January 31, 2020 07:21 AM UTC

Hi Shyam,

thank you for your reply. I added an image to further explain what we are trying to achieve.

The plan is, that a user (or we programmatically) have the table on top where we can enter coordinates, size and rows/columns for each node and it would then show a diagram like the one on the bottom. And if the user moves one of the nodes in the diagram, the changed x/y-values would then show up in the table.

So the Node-object would get more properties for rows + columns and we should be able to access them from outside. I just did not find a way to access the "Node"-object that is accessed in the template from outside of the template (at the table or at some other function in our page) when accessing the "DiagramNode"-object.

Kind regards,
Wolfgang

Attachment: SyncfusionHTMLEditor_7b9dbfe5.zip

Naganathan Ganesh Babu [Syncfusion]
Replied On February 3, 2020 11:58 AM UTC

Hi Wolfgang, 
 
We have modified the sample to achieve your requirement. Please refer to the below video and sample link. 
 
 
 
Regards, 
 
Naganathan K G 


Wolfgang Steinert
Replied On February 3, 2020 12:39 PM UTC

Hi Naganathan,

this is getting closer but this does not work for multiple nodes, each with their own "Rows" and "Columns" property. I cannot add two or three properties to the page as we do not know if there will be one, two or ten nodes in the diagram. So as in my example picture there might be two nodes, one which has 2 rows and 2 columns, and the other has 1 row and 2 columns, and the user might add a third, fourth, ... - each with its own values.

Kind regards,
Wolfgang

Shyam G [Syncfusion]
Replied On February 5, 2020 04:25 AM UTC

Hi Wolfgang,  
  
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  


Aravind Ravi [Syncfusion]
Replied On February 19, 2020 09:58 AM UTC

Hi Wolfgang,  
    
We have fixed the reported issue and included it in our patch release (v17.4.50) which is rolled out successfully.   
   
Please upgrade to the latest version packages to resolve this issue.         
  
Regards,  
Aravind Ravi 


CONFIRMATION

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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon 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.Close Icon

Live Chat Icon For mobile
Live Chat Icon