Open a diagram inside a dialog

[Juan Acosta]

Hi,

I'm trying to open a diagram inside a dialog.

I can make it work. However, the max size of the dialog cannot be changed.




I open the dialog with this parameters.




I was checking other possibilities, but they do not adjust to my use case. rendering-a-diagram-in-a-partial-view

There is any other control that I can use to open as a container for the diagram, instead of the dialog? There is any way to overwrite the max Width and Height size of the dialog.

Kind regards,

Juan Acosta

[Arun Palaniyandi]

Hi Juan,   

  

Thanks for contacting Syncfusion support.     

  

We have analyzed the query; In order to adjust the Diagram control inside the Dialog we need to set the width as auto. By default, the width of the Dialog control is 400px and when we set the width as auto the Dialog will automatically adjust to the width of the Diagram Control. Hence you can display the full Diagram inside the Dialog container.   

  

Also, please provide the answer for the below questions.   

·         What is the purpose of usage to set the max height and width for the control? 

·         Your requirement is to adjust the Diagram control inside the Dialog, right? 

  

We have prepared a sample for your reference below:    

http://www.syncfusion.com/downloads/support/forum/130127/ze/Diagram1091845451   

  

Please look at our sample and if we are unclear with your reported scenario please explain us the issue in a detailed manner and the above details, so that this information to help us to provide an alternative solution.        

  

Regards, 
Arun P. 

[Juan Acosta]

Hi Arun,

Thanks you for your reply.

I was checking your code but I still have some issues with my project.


when the page load. Also, I loss the event management inside the dialog. I don't get any errors in js.


But the main panel options stop working.

I have updated you project added the thing I want to render. The automatic size rendering is also not working.

Please take a look in the solution and let me know, how to solve the issues.

Kind regards,

Juan






Attachment: Diagram_8d2ffd1c.7z

[Arun Palaniyandi]

Hi Juan,   

  

Thanks for your update.   

  

We have analyzed the shared sample and found that the width of the Dialog is not setting due to the Dialog’s ID conflict. In your partial view page, you have used a dialog control with the same ID as the main Dialog. Hence, a conflict occurs between these two dialogs and the width is not set properly. So, you have to change the ID of your Dialog in the partial view page.   

  

  

// Dialog found in the partial view page and the changed ID   

  

@{Html.EJ().Dialog("basicDialog2").Title("Save").ClientSideEvents(e => e.Close("onDialogClose")).EnableModal(true).ShowOnInit(false).Width(451).ContentTemplate(@<div>   

        <div style="height: 30px; width: 100%; font-size: 16px;">   

            File Name   

        </div>   

   //Something   

        </div>   

    </div>).Render();}   

  

 

  

  

We have also modified your sample and you can find it in the below link:   

http://www.syncfusion.com/downloads/support/forum/130127/ze/Diagram1007652120   

Please look at our modified sample and if you still face the issue, please get back to us with more information so that it will help us provide a prompt solution.   

Regards,   

Arun P.   

[Juan Acosta]

Hi Arun,

Thank you for your response. I was checking the new project and the javascript error is partially gone now.
I still have it erratically.



However, all the toolbar functionality is still not working that is main concern.


All the zoom, drag and other buttons there should be working fine.

Could you please help me to make those functionality work again.

Kind regards,

Juan

[Shyam G]

Hi Juan, 

Query	Response
Thank you for your response. I was checking the new project and the JavaScript error is partially gone now.  I still have it erratically.	The updateSize method in the methods_DocumentPreview.js file is not called which we call from the window resize event in events_ DocumentPreview.js file. This is due to document ready event fired first in events_ DocumentPreview.js file and secondly in methods_DocumentPreview.js. so please remove document ready event from the JavaScript file to resolve your reported issue. . Please refer to the modified sample below.
However, all the toolbar functionality is still not working that is main concern. All the zoom, drag and other buttons there should be working fine.  Could you please help me to make those functionality work again.	You have registered events in the server side(view file) and defined it in the client side under the document ready event in the JavaScript files. So only the events are not triggered. To resolve the issue, please define this events in the client side or remove the document ready event. We have removed document ready event in your JavaScript files to resolve your reported issue. Please refer to the modified sample below.

Sample:http://www.syncfusion.com/downloads/support/directtrac/general/ze/Diagrammodified-1936138917 

Regards, 

Shyam G