Fucntional Difference between HTML Node and Native Node

Question

I’m going to use the svg or html template in the diagram
with asp.net webforms.

I need to create a diagram where where is possible have two type
of nodes:

One node is a rectangle where on the left area
has a centered label text (can be multiline) and on the right area has a
centered imageOne node is a rectangle where on the bottom area
has a centered text (can be multiline) and on the top area has a centered image



All the node area has to be clickable.

 

It is possibile reach the requirements with your diagram
component? Should I use the HTML Node or the Native node?

I tried to use the HTML template with custom css.

Should I be aware of any sideffects on the other
functionalities of this component (zoom, edit, export, etc … ) ? I can still
use the property to set border and shadow?

Unfortunatly I haven’t found any example about HTML Node
Template.



Is there any better way to reach these requirements with
your diagram component?

It is possible reach this requirement with the native node? I
looked at this your example: https://asp.syncfusion.com/demos/web/diagram/teamorgchart.aspx

I noticed that i can set easily the label position but how I
set the image position? I’ve tried setting the margin in the ImageNode but it
seems have no effects. Can you provide me an example? In the example I tried
the image is just a size of small square 
compared to the one in your example.

 

Notice that when I create the diagram I need to show all the
nodes, there is a way to fit all the diagram in a page?

I noticed that you have the same component in Essential JS
2. It is possible to use with web forms as in the Essential JS 1 ? 

 

Thank you for your support.

Shyam G · Answer

Hi Cosimo, 
 




Query 

Response 


Is there any better way to reach these requirements with your diagram component? 
It is possible reach this requirement with the native node? I looked at this your example: https://asp.syncfusion.com/demos/web/diagram/teamorgchart.aspx 
I noticed that i can set easily the label position but how I set the image position? I’ve tried setting the margin in the ImageNode but it seems have no effects. Can you provide me an example? In the example I tried the image is just a size of small square  compared to the one in your example. 

You can use a native node to design a nodes similar to teamorgchart sample. we have created a ASP.NET webforms sample(EJ1) in which we have rendered a teamorgchart layout using native node.  
 
Here is the sample 
 
Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/nativenodelayoutsample-718906522 
 
Please refer to the help documentation which shows how to create a native node. 
 
Help documentation: https://help.syncfusion.com/aspnet/diagram/shapes#native 
 


Notice that when I create the diagram I need to show all the nodes, there is a way to fit all the diagram in a page?  

Please use diagram fitToPage method to fit the diagram content within the viewport. please refer to the above sample in which we have used fitToPage method in create event. 
 
Code example: 
//define create event 
  TeamChart.OnClientCreate = "create"; 
   
 function create() { 
            var diagram = $("#TeamChart").ejDiagram("instance"); 
            diagram.fitToPage(); 
        } 
 
Help documentation: https://help.syncfusion.com/api/js/ejdiagram#methods:fittopage 
 


I noticed that you have the same component in Essential JS 2. It is possible to use with web forms as in the Essential JS 1 ?  

Currently, we don’t have any immediate plan for ASP.NET Web Forms support in Essential JS 2. This will be available in any of our upcoming Essential Studio release.   
 
 
Regards, 
Shyam G

Query	Response
Is there any better way to reach these requirements with your diagram component? It is possible reach this requirement with the native node? I looked at this your example: https://asp.syncfusion.com/demos/web/diagram/teamorgchart.aspx I noticed that i can set easily the label position but how I set the image position? I’ve tried setting the margin in the ImageNode but it seems have no effects. Can you provide me an example? In the example I tried the image is just a size of small square compared to the one in your example.	You can use a native node to design a nodes similar to teamorgchart sample. we have created a ASP.NET webforms sample(EJ1) in which we have rendered a teamorgchart layout using native node. Here is the sample Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/nativenodelayoutsample-718906522 Please refer to the help documentation which shows how to create a native node. Help documentation: https://help.syncfusion.com/aspnet/diagram/shapes#native
Notice that when I create the diagram I need to show all the nodes, there is a way to fit all the diagram in a page?	Please use diagram fitToPage method to fit the diagram content within the viewport. please refer to the above sample in which we have used fitToPage method in create event. Code example: //define create event TeamChart.OnClientCreate = "create"; function create() { var diagram = $("#TeamChart").ejDiagram("instance"); diagram.fitToPage(); } Help documentation: https://help.syncfusion.com/api/js/ejdiagram#methods:fittopage
I noticed that you have the same component in Essential JS 2. It is possible to use with web forms as in the Essential JS 1 ?	Currently, we don’t have any immediate plan for ASP.NET Web Forms support in Essential JS 2. This will be available in any of our upcoming Essential Studio release.