We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

align and Resize diagram control with in the Dashboard Panel

Thread ID:

Created:

Updated:

Platform:

Replies:

151224 Feb 4,2020 01:25 PM UTC Feb 28,2020 06:05 AM UTC Angular - EJ 2 9
loading
Tags: Diagram
Samba Shiva Rao Enuganti
Asked On February 4, 2020 01:25 PM UTC

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 [Syncfusion]
Replied On February 5, 2020 09:44 AM UTC

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. 
 
 
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
Replied On February 5, 2020 10:48 AM UTC

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 [Syncfusion]
Replied On February 6, 2020 07:17 AM UTC

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
Replied On February 7, 2020 07:07 AM UTC

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 [Syncfusion]
Replied On February 10, 2020 09:41 AM UTC

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. 


Regards, 
Shyam G 


Samba Shiva Rao Enuganti
Replied On February 24, 2020 05:15 AM UTC

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 [Syncfusion]
Replied On February 25, 2020 09:55 AM UTC

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. 
 
 
Regards,   
Suganthi K. 


Samba Shiva Rao Enuganti
Replied On February 27, 2020 09:25 AM UTC

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 [Syncfusion]
Replied On February 28, 2020 06:05 AM UTC

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.  
 
 
Regards, 
Suganthi K. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon