HTML Node Class

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

4 Replies 1 reply marked as answer

DS dsoftware July 17, 2020 06:37 PM UTC

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

Attachment: goal_f3d3e94c.zip


AR Aravind Ravi Syncfusion Team July 20, 2020 01:40 PM UTC

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 


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


Regards 
Aravind Ravi 




Marked as answer

DS dsoftware July 20, 2020 08:26 PM UTC

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.


AR Aravind Ravi Syncfusion Team July 21, 2020 10:46 AM UTC

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 
 
 
            
We have attached a sample for your reference. Please find the sample in below link 
 
 
Regards 
Aravind Ravi  


Loader.
Up arrow icon