align and Resize diagram control with in the Dashboard Panel

[Samba Shiva Rao Enuganti]

Hi Team,

We have requirement to build diagram with more then 1 image with in build view, the images dragged from treeview control.

We need to show the created diagram with in view, which is inside one of the dashboard panel(which is created dynamically and I am adding diagram to it )..

Our problems are as below..

1) How to resize the diagram and nodes to Dashboard panel width and height(with out getting scroll bars)

2) How to set the nodes offset Left and Top according to design and view page(with out getting scroll bars)

3) How to set/modify above both as per dashboard panel width, height & offset values(with out getting scroll bars), when I resize the dashboard panel

Thanks,

Shiva

[Shyam G]

Hi Shiva, 

 

Query	Response
How to resize the diagram and nodes to Dashboard panel width and height(with out getting scroll bars)	You should set dashboard panel width and height to the diagram width and height property at runtime. Please refer to a code example below in which we have shown how to update the diagram size at runtime.    Code example:  //button click event. similarly, you can update diagram size on dashboard resize event    updateDiagramSize() {      //update the diagram size      this.diagram.width = '1000px';      this.diagram.height = '300px';      this.diagram.dataBind();    }
How to set the nodes offset Left and Top according to design and view page(with out getting scroll bars)	The nodes will be positioned in the diagram based on its offsetX and offsetY property.  So, you can position the node in your dashboard with these properties. Please refer to a help documentation below.    Help documentation: https://ej2.syncfusion.com/angular/documentation/diagram/nodes/#position
How to set/modify above both as per dashboard panel width, height & offset values(with out getting scroll bars), when I resize the dashboard panel	When you set the diagram width in percentage, the diagram will be responsive and the size will be updated automatically based on the resizing of the dashboard. Please refer to a code example in which we have shown how to set diagram width in percentage.    Code example:  <ejs-diagram #diagram id="diagram" width="100%" height="700px">                   </ejs-diagram>

 

 

Regards, 

Shyam G 

[Samba Shiva Rao Enuganti]

Hi Shyam,

Looks like little bit confusion over here,....

I am using diagram control to design the view in another page, where the page size is 100% with in the UI and I am loading the saved diagram into the Dashboard Layout Panel(view page) using LoadDiagram Method and the panel also added dynamically to to the Dashboard using AddPanel method of dashboard and when I am resizing the panel, how can I changes diagram and nodes width, height & Offset values as per Dashboard panel values accordinly?

I can not provide any fixed width,height & offset values, they should calculate as per panel & resolution...

The same for other 2 things as well..

Thanks

Shiva

[Shyam G]

Hi Shiva, 

 

After loading a diagram using loadDiagram method, please call our diagram updateViewPort method to resolve your issue. Please refer to a code example below. Still if you face any issues, please share us more details such as host your dashboard sample in the server/online and share a link to us and the screenshot of an issue. 

 

Code example: 

this.diagram.loadDiagram(data); 

//update the diagram size automatically at runtime 

this.diagram.updateViewPort(); 

 

 

Regards, 

Shyam G 

[Samba Shiva Rao Enuganti]

Hi Shyam,

UpdateViewPort is not working for me.

PFA code files related to the issue and issue.png will be the screenshot related to the issue.

please let me know, if you need any further information.

Thanks,

Shiva 

Attachment: rackview_2071d57d.zip

[Shyam G]

Hi Shiva, 

We have loaded your JSON in our sample and it is working fine at our end. Could you please check in the below sample? Still, if you face any issues, please share us more details such as modify the below sample. 

Sample: https://stackblitz.com/edit/angular-2t5abg?file=app.component.ts 

Regards, 

Shyam G 

[Samba Shiva Rao Enuganti]

Hi Shyam,

PFA sample application.

Our requirement is to load diagram with in dashboard panel and align it center and resized as panel width & height.

And same thing should happen when we resize panel.

Thanks,

Shiva

Attachment: diagramtest_aca72c65.zip

[Suganthi Karuppannan]

Hi Shiva, 

  

We have created a sample to update the diagram’s width and height properties based on panel size while loading the diagram. In the sample, when resizing the panel, diagram’s width and height are changed based on the panel’s width and height and also the node position is aligned to the center of the diagram.  

of the diagram. 

 

Please refer to the below sample link. 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/diagramtest-1373969177 

 

Regards,   

Suganthi K. 

[Samba Shiva Rao Enuganti]

Hi Suganthi,

Diagram position moved to center of the panel, but diagram inside node positions are moved to different position, which is not expected.

PFA expected diagram view and output of your sample.

Thanks,

Shiva

Attachment: ActualorExpected_fe9a5c05.zip

[Suganthi Karuppannan]

Hi Shiva, 

 

We have created a sample to align the nodes based on diagram bounds. The group’s children position is change based on parent position and also group node position is aligned to the center of the diagram. 

 

Please refer to the below sample link.  

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/diagramtest-latest1632896067  

 

Regards, 

Suganthi K.