HTML Node Class

[dsoftware]

I am evaluating this product for my organization.  We are trying to move a desktop application that we developed to the web. 

Is it possible for me to create several custom HTML nodes as separate classes.  For example, I have attached the code and image for an HTML nodes.  How could I create is as a class so I could use a data source to "fill in" the properties (html elements) such as image, link1, etc.?

Is it also possible to assign a shape to an HTML Node?  Such as an octagon.

Attachment: ForumPost_41b2f36c.zip

[dsoftware]

Attached what I'd like to end up with (at least something similar).

Attachment: goal_f3d3e94c.zip

[Aravind Ravi]

Hi Dsoftware, 

We have created a sample to add HTML node in the Octagon shape. By default, in the diagram when we set node type as HTML means then it render as basic shape Rectangle. We cannot able to override it. However, by using the group node you can able to add HTML node in Octagon shape. First render the Octagon shape in the diagram and then render the HTML node. Group is used to cluster multiple nodes and connectors into a single element. Now group both the octagon shape and HTML node. It looks like HTML node in the Octagon shape. Please refer the below code example 

{ id: 'node', offsetX: 300, offsetY: 288, height: 100, width: 200, shape: { type: 'Basic', shape: 'Octagon'}  }, 

        { id: 'html', offsetX: 250, offsetY: 288, height: 30, width: 100, shape: { type: 'HTML', content: '<div><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"><label for="vehicle1"> I have a bike</label><br></div>'}}, 

        { 

          id: 'group', children: ['node', 'html'] 

        } 

 

Similarly as HTML node, you can also position the Image node and normal node using this group node. 

For more information about Group node , Please refer to below UG documentation link 

UG Link: https://ej2.syncfusion.com/documentation/diagram/group/ 

We have attached a sample for your reference. Please find the sample in below link 

Sample: https://stackblitz.com/edit/abn8su 

Regards 

Aravind Ravi 

[dsoftware]

Thanks Aravind.  Is there a JS1 (non-TypScript) solution for this?  Is there also a JS1 forum?  When I posted this, there was only 1 Javascript produt to choose from.

[Aravind Ravi]

Hi Dsoftware, 

 

We have created a sample to add HTML node in the Octagon shape in the Essential Javascript 1. Unless like in EJ2 , we want to add a node as a children to the group in EJ1. To create a HTML node, you need to set the type of node as “html”. In addition, you need to set the id of HTML template to the templateId property of node. The following code illustrates how an Html node is created. 

 

{ name: "node1",  offsetX: 280, offsetY: 285, height: 30, width: 150,  

type: ej.datavisualization.Diagram.Shapes.Html, 

templateId: "htmlTemplate", borderWidth: 0 

             }, 

 

Please refer the below UG documentation link for how to set HTML and Group node 

 

HTML Node: https://help.syncfusion.com/js/diagram/shapes#html 

 

Group: https://help.syncfusion.com/js/diagram/group 

            

We have attached a sample for your reference. Please find the sample in below link 

 

Sample: https://jsplayground.syncfusion.com/5fxrxvqa 

 

Regards 

Aravind Ravi