How to create an image icon as a group node using JavaScript Diagram in ASP.NET MVC app
In the diagram, you can able to create a group node with an image icon and can perform all types of interaction with it. When a click event occurs on the image, you can trigger the attached URL and it redirects to a new tab.
To perform the required action in the diagram, you need to create a group with children and add an image source to the children. In the group, set the group constraints to the pointer-events. Please refer to the following code example for how to add children in the node and image source into the children.
// create a group Group group = new Group(); group.Name = "group"; group.Constraints = NodeConstraints.PointerEvents; BasicShape rectangle = new BasicShape(); //add children into the group group.Children.Add(rectangle); ImageNode settings = new ImageNode(); //add an image source settings.Source = "../Images/settings.png"; group.Children.Add(settings);
By using the click event you can able to trigger the attachments in the target image. When the click event occurs, the image icon redirects to the URL on a new tab. The following code defines how to create the click event and check the element name whenever the click event occurs on the image.
//define click event
model.Click = "click";
function click(args) {
if (args && args.element) {
//check the node name
if (args.element.name === "user") {
//redirect the url
window.open("https://www.syncfusion.com/downloads/metrostudio");
}
}
}
The following image shows the image icon as a group node 
