1. Home
  2. Forum
  3. Blazor
  4. How to set the context of a DiagramNode (for using it in HTML-Template)

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

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

7 Replies
MO Mounika January 30, 2020 03:30 PM UTC

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

Attachment: syncfusiondiagram_421392e4.zip

SG Shyam G Syncfusion Team 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 


WS Wolfgang Steinert 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

NG Naganathan Ganesh Babu Syncfusion Team 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 


WS Wolfgang Steinert 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

SG Shyam G Syncfusion Team 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  


AR Aravind Ravi Syncfusion Team 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 


Loader.
Up arrow icon