How to manage multiple diagram?

[Pham Van Sy]

Hi team!
In the my application, I want to create multiple diagram on the view
I have using ejs-diagram control and I added 'created' event from the diagram, 

I think whenever a diagram is created it goes to the create() method, so I can add the new diagram to array, 
but when I click a button to create new diagram, it's not go the created() method as I expected
The below is my source code
Please review it and let me know your comments

Thanks!
Sy

[Vivisa Ganesan]

Hi,

The Created event will trigger whenever a new diagram is created. In the given code snippet, we noticed you have created only one diagram. Could you please share details on how you are creating the diagram in a button click with code example, so that we can validate and update with more details? 

Regards,

Vivisa

[Pham Van Sy]

Thank for your reply!
This is my source code.
When I click on the tree item to create new diagram, the Created event didn't triggered

Please check it
Thanks!

Attachment: syncfusion_f0e8800e.zip

[Vivisa Ganesan]

Hi,

We will validate and update you with more details on July 5,2024.

Regards,

Vivisa

[Pham Van Sy]

Yes,

Thank You!

[Vivisa Ganesan]

Hi,

From the given sample, we found that you are cloning the diagram while creating a new tab. The created event for the diagram will only be triggered when a new diagram is initialized. Could you please share details of what you are expecting to do in the created event so that we can validate and update with more details?

Regards,

Vivisa

[Pham Van Sy]

Thank you for your reply!
For this one. I want to create multiple diagrams, when I have multiple diagrams, I can make multiple models on the different diagrams, so I want to track created event to manage the diagrams are created
Do you have any solution to make multiple diagrams?

Please help me to resolve this one
Thanks!
Sy

[Moulidharan Gopalakrishnan]

Hi,

We will try creating diagram on new tab's with notifying created event and update you with more details on July 10,2024.

Regards,

Mouli

[Pham Van Sy]

Yes, Thank You!

[Moulidharan Gopalakrishnan]

Hi,

We have prepared a sample similar to your requirement. Please note that the created event for the diagram will only be triggered once when a new diagram is initialized. This sample demonstrates how to create new tabs on button click and render a new diagram in each tab. Once a new diagram is rendered, the created event will be triggered, indicating that the diagram has been successfully created. Please refer to the sample for your reference.

Sample: https://stackblitz.com/edit/angular-bwgg6s-u1lh5s?file=src%2Fapp.component.ts,src%2Fapp.component.html

Regards,

Moulidharan

[Pham Van Sy]

Thank for your answer

When I click add tab button to create new a diagram, the diagram is created but it's not display the grid lines, it seems to be displaying a blank diagram

Could you check why it's like that?

Thanks!

Sy

[Moulidharan Gopalakrishnan]

Hi,

Apologies for the previous sample. The default behavior for diagram initialization is that the diagram initializes when it is in the visible viewport of the active tab. When creating multiple diagrams in a new tab, the new tab should be the active tab to initialize and render the diagram. Additionally, as previously mentioned, the created event will be triggered for newly created diagrams. Please refer to the sample for reference

Sample: 6azk3s (forked) - StackBlitz

Regards,
Moulidharan

[Pham Van Sy]

Thank for your reply!

I have tried it and it's working in the my application

But I have a question, when I set the height for diagram is '100%', the diagram is not defined

I don't want to set the height is fix value, I want to set it flexible by the content of the application

So, do you have any way to set the height of the diagram by percent?

Thanks!
Sy

[Moulidharan Gopalakrishnan]

Hi,

The diagram is rendered within the tab. We should set tab height in pixel and then set the diagram height to percentage, and it will be responsive throughout the browser interaction. We have modified the sample and provided below.

Sample: https://stackblitz.com/edit/angular-bwgg6s-bbuww7?file=src%2Fapp.component.ts,src%2Fapp.component.html

Regards,
Moulidharan

[Pham Van Sy]

Thank for your answer!
Your solution it's seem working fine but when I resize the border of the Diagram, the horizontal scroll bar is appear
I don't why it appear in here, could you check this one?



Tha

[Moulidharan Gopalakrishnan]

Hi,

In the provided sample, we initially set the parent tab's value to 200%, causing the diagram to inherit this size and display a scroll bar by default. We have now updated the sample to use 100% as the tab's value. Please refer to the updated sample for reference. If you still encounter any issues, please provide a video demonstration so we can validate the problem more clearly and assist you better

Sample: https://stackblitz.com/edit/angular-bwgg6s-kkvjj6?file=src%2Fapp.component.ts,src%2Fapp.component.html

Best Regards,

Moulidharan G

[Pham Van Sy]

Thank for your reply

And other question, with the multiple diagrams are created, how can I collect these diagrams?
Have any way to binding to the diagrams?

Thanks!
Sy

[Vivisa Ganesan]

Hi,

Could you please share the details of what you are expecting to do with the multiple diagrams? This will help us validate and provide you with more detailed information.

Regards,

Vivisa

[Pham Van Sy]

Thank for your reply

I have modified the project to separate to manage multiple diagrams

as you can see, I created some new files for diagram component and I call it on the app component

when the diagram is created, it not triggering to show alert message and I cannot get the diagram as I expect

I think it's not to binding with the Diagram on the DiagramComponent

This is my code, please help me to check it

Thanks!

Attachment: angularbwgg6skkvjj6_f3ac9313.zip

[Moulidharan Gopalakrishnan]

Hi,

We are unable to run the provided Angular sample on our end. Therefore, we have created a StackBlitz sample based on your requirements by moving the diagram into a separate component. Please note that the created event is working fine as expected. The reason the alert message is not shown is that it was commented out in the code, but it is logged in the console. Please refer to the sample for your reference. if you still encounter any issues please modify the provided sample or provide an working sample to assist you better.

Sample: https://stackblitz.com/edit/angular-bwgg6s-2swrns?file=src%2Fsync-diagram.component.ts,src%2Fapp.component.ts

Best Regards,
Moulidharan

[Pham Van Sy]

Thank you so much!
I will try it and I will let you know if I have any question
Thanks!
Sy

[Vivisa Ganesan]

Hi,

You're welcome. Please validate and inform us if this meets your needs. We will await your feedback.

Regards,

Vivisa