Change HTML shape template when dragged into diagram

Question

Hi,I have defined a HTML shape for the Symbol palette. When I drag this symbol into diagram, a HTML node should be added into diagram whose HTML design should depend on component template. Currently, I have assigned ID property to HTML shape in the palette. When I drag this onto diagram, a unique ID is generated for it my appending few extra letters at the end. The new component template cannot be assigned to it as it is looking for the id to be same as that was assigned.How do I get a new template in the diagram for the symbol. Currently, the shape template is same as what I assigned in the palette.

Balasubramanian Manikandan · Answer

Deepak,Use the 'addInfo' property to identify the symbol when you drag it into the diagram. Upon dragging the symbol from the palette and dropping it onto the diagram, a symbol ID in the form of 'randomID' is generated. This represents the default behavior of our control. If you wish to have a consistent ID for condition checking purposes, utilize the 'addInfo' property to fulfill your requirement. For reference, please consult the code example, video recording, and sample provided below.Code Snippet private flowshapes: NodeModel[] = [ { id: 'Terminator', height: 80, width: 80, shape: { type: 'HTML', content: '

' }, addInfo : [{ Text : 'Terminator'}] }, Sample https://stackblitz.com/edit/angular-zih3eh-3ywwkq?file=app.component.html Regards,Balasubramanian MAttachment: AddInfo_7ee3669e.zip

Deepak Shakya · Answer

Thanks for sending in the information about the addInfo parameter. This does help in attaching information that I can access but I am still unable to load the alternate HTML template for the node when it is dragged from the palette to the diagram.In palette, I have a simple div with Text. e.g. shape: { type: 'HTML', content: '

' + 'The Node' + '

', },When I drop this onto diagram I would like to have a different template. Ideally, have a HTML template with dropdown hooked into the json data through let-data on ng-template inside diagram component tags.

The Node

This template is not being rendered when dropped. I thought it would be picked up due to #nodeTemplate reference variable and shape set to HTML. Am I missing something?I am following this documentation - https://ej2.syncfusion.com/angular/documentation/diagram/shapes#html-node-with-template

Balasubramanian Manikandan · Answer

Deepak,If you need to render the template while dropping the node
onto the diagram, you should empty the content of the HTML node in the drop
event. We have provided a sample that meets your requirement. In this example,
we clear the HTML node's content during the drop event. This ensures that the
node template can be rendered after the node is dropped onto the diagram.
Please refer to the code example and sample provided below.Code Snippet

public drop(args: any): void{
     
  if(this.diagram.selectedItems.nodes.length > 0){
        var node =
  this.diagram.selectedItems.nodes[0];
        if(node.shape.type ==
  'HTML'){
          (node as
  any).shape.content = "";
        }
      }
      this.diagram.dataBind();
    }

Sample

https://stackblitz.com/edit/angular-zih3eh-u1e3ta?file=app.component.html

Deepak Shakya · Answer

Thank you for this solution. Is there a way to access the content of the shape e.g. when I drop in the Text Shape, I would like to access the content of the shape (Text) and run assign data to an Array which I use as a datasource for the diagram.

This is so that I would like to populate the diagram from this JSON datasource, which will be an empty array initially. But as I drag and drop symbols from the palette, I would like to populate this collection and display the nodes based on this collection.

I hope I am explaining this correctly.

Balasubramanian Manikandan · Answer

We have prepared a sample to meet your requirements. In this example, we have bound the array content or value to an HTML template by using the drop event. Please find the code example and sample provided below.Code Snippet In HTML File

In TS File getValue : string[] = [ "node1", "node2", "node3", "node4" ]; Sample https://stackblitz.com/edit/angular-zih3eh-hseifl?file=app.component.ts,app.component.html

Deepak Shakya · Answer

Thanks heaps for sending this in. It answers my initial question when I started this thread.

But can I ask -

Scenario:

Palette contains Text nodes for employees - e.g. Manager, Director, etc
Diagram's Datamanager is assigned an empty Employee object with its shape defined by an Interface (IEmployee) e.g. Name, Position and Salary. Hence the diagram has no nodes
When I drag the Manager node from Palette into the Digram, I need to create a new employee programmatically via Drop event.
I need to check the type of Employee dropped e.g. using it's Content value and then assign the background colour depending on the Position of the Employee in the diagram.
This new employee is added to the data of the datamanager and hence the node is created based on the data collection.
In the end I should be able to save this data model as JSON object to load it again.

Youe help is highly appreciated. Th

Gobinath Dhamotharan · Answer

Hi,The
datamanager serves the purpose of housing the data collection required for
rendering layouts based on parent-child relationships. It should not be used for normal
rendering of nodes and connectors. While dragging and dropping a node from the palette into the
diagram, adding data directly to the datamanager is not feasible. If there's a need to incorporate custom information
for the dropped node, you can utilize the "addInfo" property within the
diagram. This property facilitates the storage of information, ensuring that
the stored data can be retrieved during save and load operations using the
"addInfo" property. Refer the documentation below.Documentationhttps://ej2.syncfusion.com/angular/documentation/diagram/data-bindingRegards,  Gobinath