How can I control the style and content of the popups

[Brian Crawford]

I need to style the popups and be able to change the content.  I need to change the content because when I delete a folder the confirmation dialog asks "Are you sure you want to delete this file?", when it should say "folder" instead of "file".

What I would really like to do is use our own dialog component instead of yours.  So I can intercept the beforePopupOpen event, but how can I prevent your dialog from showing and still pass my dialog result back to the fileManager so it can continue with the action (like delete)?

[Keerthana Rajendran]

Hi Brian, 

 

Good day to you, 

 

We have checked your reported query “change the content of delete dialog” in file manager component. It is possible to change the content of dialog and prevent the filemanager dialog. However, now, we are facing an issue unable to get the particular dialog name in beforePopupOpen () event. We will consider this as a bug from our end. This bug fix will be included in our Volume 4 Release which is expected to be released at the end of December. Until then, track the below link for bug status. 

https://www.syncfusion.com/feedback/10471/popupname-is-not-correctly-displayed-in-beforepopupopen-event-of-file-manager 

 

Once the fix is included, dialog name will be correctly displayed in beforePopupOpen() event. Using that name, you can achieve your requirement in below cases.  

 

Query 1 – Change the delete content using file manager dialog. 

 

Yes. It is possible to change the content using file manager dialog using beforePopupOpen() event. Refer the below code snippet. 

  beforePopupOpen(args) { 

         if(args.popupName =="Delete") { 

           args.popupModule.dlgContainer.querySelector(".e-dlg-content").innerText = "Are you sure want to delete this folder?";  

         }   

       } 

 

 

 

Query 2 – Show your custom dialog and perform file manager delete operations. 

 

It is also achievable in file manager component. If you want to prevent our filemanager dialog set the args.cancel as true in beforePopupOpen() event and create your own dialog in that event. In File manager, we have provided a public method deleteFiles(). While clicking the button in your own dialog you can call the filemanager deleteFiles() method and send the value as a selected nodes. Refer to the below code snippet. 

 beforePopupOpen(args) { 

         if(args.popupName == "Delete") { 

            args.cancel = true; 

            this.file.deleteFiles(this.file.selectedItems); 

         }   

       } 

 

 

 

 

We appreciate your patience until the release. Please let us know, if you have any concerns. 

 

 

Regards, 

Keerthana.