Enable maximize, minimize and drag functionalities in the Dialog

[Neo]

Hi all,

I want to implement maximize, minimize and drag functionalities in a dialog component. It would be great if you can add maximize and minimize buttons near to the close button.

Thank you.

[Christopher Issac Sunder K]

Hi Isanka, 

Greetings from Syncfusion support. 

Our Dialog component have in-built support to drag inside the specified target. With that functionality, you can achieve your desired requirement. Pleas refer to the below APIs which would help you to enable dragging in dialog, 

allowDragging - https://ej2.syncfusion.com/angular/documentation/api/dialog#allowdragging 

Here are the drag events, 

Drag - https://ej2.syncfusion.com/angular/documentation/api/dialog#drag 

dragStart - https://ej2.syncfusion.com/angular/documentation/api/dialog#dragstart 

dragStop - https://ej2.syncfusion.com/angular/documentation/api/dialog#dragstop 

Demo - Draggable & Resizable: https://ej2.syncfusion.com/angular/demos/#/material/dialog/resizable 

Regarding minimize and maximize, we don’t have direct support in dialog. But, you can customize the header property to place the icons near the close button and enable pointer-events to auto to handle action events. The header specifies the value that can be displayed in the dialog’s title area that can be configured with HTML elements. 

https://ej2.syncfusion.com/angular/documentation/api/dialog#header 

Please check with this and get back to us if you require any further assistance. 

Thanks,
Christo 

[Neo]

Hi Isanka, 

Greetings from Syncfusion support. 

Our Dialog component have in-built support to drag inside the specified target. With that functionality, you can achieve your desired requirement. Pleas refer to the below APIs which would help you to enable dragging in dialog, 

allowDragging - https://ej2.syncfusion.com/angular/documentation/api/dialog#allowdragging 

Here are the drag events, 

Drag - https://ej2.syncfusion.com/angular/documentation/api/dialog#drag 

dragStart - https://ej2.syncfusion.com/angular/documentation/api/dialog#dragstart 

dragStop - https://ej2.syncfusion.com/angular/documentation/api/dialog#dragstop 

Demo - Draggable & Resizable: https://ej2.syncfusion.com/angular/demos/#/material/dialog/resizable 

Regarding minimize and maximize, we don’t have direct support in dialog. But, you can customize the header property to place the icons near the close button and enable pointer-events to auto to handle action events. The header specifies the value that can be displayed in the dialog’s title area that can be configured with HTML elements. 

https://ej2.syncfusion.com/angular/documentation/api/dialog#header 

Please check with this and get back to us if you require any further assistance. 

Thanks,
Christo 

Hi,

Couldn't done using your reference. Please give me a sample in Stackblitz. (Already tried demo sample. But not working for me)

Thank you.

[Narayanasamy Panneer Selvam]

Hi Isanka,
 

Thanks for your update.
 

Yes, we have prepared a sample by using mentioned APIs and relevant events. Please view it from the link. Kindly let us know if you need any further assistance on this.

 

Demo sample: https://stackblitz.com/edit/angular-d5dct3-1zebdv  

Regards,  

Narayanasamy P.  

[Neo]

Hi Isanka,
 

Thanks for your update.
 

Yes, we have prepared a sample by using mentioned APIs and relevant events. Please view it from the link. Kindly let us know if you need any further assistance on this.

 

Demo sample: https://stackblitz.com/edit/angular-d5dct3-1zebdv  

Regards,  

Narayanasamy P.  

Hi Panneer,

Thank you very much for your support. There is a small issue which is related to alignment in minimize and maximize buttons when we comes to the full screen.

[Narayanasamy Panneer Selvam]

Hi Isanka, 

 

Thanks for your update.

We have checked and resolved the alignment issue with full screen mode, please get the modified demo sample from the below link. 

Demo sample: https://stackblitz.com/edit/angular-d5dct3-4qg3t3 

  

Regards, 

Narayanasamy P. 

[Neo]

Hi Isanka, 

 

Thanks for your update.

We have checked and resolved the alignment issue with full screen mode, please get the modified demo sample from the below link. 

Demo sample: https://stackblitz.com/edit/angular-d5dct3-4qg3t3 

  

Regards, 

Narayanasamy P. 

Awesome.. Thanks again

[Narayanasamy Panneer Selvam]

Hi Isanka, 

  

 We glad to here that the reported issue is resolved at your end. 

  

Regards, 

Narayanasamy P.