1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. Layout ContextMenu does not appear when clicking on empty space inside FileManager

Layout ContextMenu does not appear when clicking on empty space inside FileManager

Running into an issue when trying to bring up the layout context menu by right clicking an empty space within the FileManager. The contextMenu works fine when right clicking on a file/folder.

The following is how I initialize the filemanager

// inject feature modules of the file manager
ej.filemanager.FileManager.Inject(ej.filemanager.DetailsView,ej.filemanager.Toolbar,ej.filemanager.NavigationPane);
// initialize File Manager component
var filemanagerInstance = new ej.filemanager.FileManager({
    ajaxSettings: {
        url: hostUrl + 'api/FileManager/FileOperations',
        getImageUrl: hostUrl + 'api/FileManager/GetImage',
        uploadUrl: hostUrl + 'api/FileManager/Upload',
        downloadUrl: hostUrl + 'api/FileManager/Download'
    },
    allowDragAndDrop: true,
    showThumbnail: false,
    contextMenuSettings: {
        layout: ["Paste", "SortBy", "View", "Refresh", "|", "NewFolder", "Upload", "|", "Details", "|", "SelectAll"],
        file: ["Delete", "Cut", "Copy", "Paste", "Rename", "|", "Details"],
        folder: ["Open", "|", "Delete", "Cut", "Copy", "Paste", "Rename", "|", "Details"],
        visible: true
    },
    toolbarSettings:
    {
        items: ["NewFolder", "SortBy", "Refresh", "Upload Files", "View", "Details"]
    },
    beforePopupOpen: beforePopupOpen,
    menuOpen: menuOpen,
    menuClick: menuClick,
    toolbarClick: toolbarClick,
    beforeSend: beforeSend,
    beforeImageLoad: beforeImageLoad,
    toolbarCreate: toolbarCreate,
    popupOpen: popupOpen,
    uploadListCreate: uploadListCreate
});
// render initialized File Manager
filemanagerInstance.appendTo('#filemanager');
​

HTML:

<div id="filemanager" style="padding-top: 10px; padding-left: 10px; padding-right: 20px"></div>

I haven't been able to replicate the issue outside the application I'm currently implementing the filemanager in. I have a working sample outside the app but even when I copy that into the app itself, I still get the issue. The application it's running in is an aspx web application.

ContextMenu Error.png

Here is the text of that console error

       Uncaught TypeError: Cannot read properties of undefined (reading 'getRowObjectFromUID')
    at e.onBeforeOpen (ej2.min.js:10)
    at e.notify (ej2.min.js:10)
    at t.e.trigger (ej2.min.js:10)
    at t.triggerBeforeOpen (ej2.min.js:10)
    at t.openMenu (ej2.min.js:10)
    at t.cmenuHandler (ej2.min.js:10)

Is there anything in the ​way I'm initializing the filemanager that would cause this issue?

This error occurs before the menuclick event so I'm not able to debug it that way.

Is there any documentation on the onBeforeOpen function for the layout context menu? Or any information regarding that function that could help me resolve this issue? Like, what is the undefined object that is being referenced supposed to be?

Thanks for any help you may be able to provide.


I am using the latest version. I tried older versions and still get the issue.

https://cdn.syncfusion.com/ej2/dist/ej2.min.js


6 Replies
SS Sharon Sanchez Selvaraj Syncfusion Team October 13, 2021 02:52 PM UTC

Hi Daniel, 
 
Greetings from Syncfusion support. 
 
We have checked with your reported issue in File Manager with the mentioned script. However, we are unable to reproduce the mentioned issue. We have created an Asp.Net WebForms sample by rendering EJ2 File Manager using JavaScript for your reference along with a video. 
 
Refer to the sample: 
 
 
Refer to the video: 
 
 
Can you please compare the sample with your application and let us know if you face any further issues? 
 
Else, please modify the above sample to reproduce the issue so that we can check and provide a prompt solution. 
 
Regards, 
Sharon Sanchez S. 
 


DA Daniel replied to Sharon Sanchez Selvaraj October 13, 2021 05:22 PM UTC

Hi Sharon,


I am still not able to reproduce the issue outside the application. 

As far as comparing both the sample with my application, I am not seeing any difference between them, as far as any syncfusion or filemanager related code. 


Is there any way we could look at the target object that is showing up undefined in the error above? 

If we know what the object is trying to reference within the onBeforeOpen function, maybe we could track down what the root cause is and if there is anything else on the app side that may be interfering with the syncfusion code. 


-Daniel


SS Sharon Sanchez Selvaraj Syncfusion Team October 14, 2021 03:11 PM UTC

Hi Daniel,


We understand that you are facing issues while opening context menu in File Manager specific to your application. We would like to let you know that, when using the DetailsView, the given condition related to the error gets executed. However, we have rechecked our sample with Details View, but we are unable to reproduce the mentioned issue. Please provide the following details, so that we can provide a prompt solution.


  1. Are you facing the error when changing the View(ex: To Details View)?
  2. If possible, please share a video demonstration along with your sample application.
  3. Else, if you are unable to share the application, please share your ASPX page(where the File Manager code and dependent styles are available).
  4. Also, the previous sample we had provided was Physical FileProvider. So please share the File Provider used in your case for better validation.


Please get back to us if you need any further assistance.


Regards,

Sharon Sanchez S.



DA Daniel October 14, 2021 08:40 PM UTC

  1. Yes, the error occurs in both the Details and Large Icons View, even when switching between the views
  2. I've attached a video demonstrating the issue in the attached zip.
  3. I'm not able to share the entire application, but I was able to copy the page and replicate the issue with the sample you provided. I stripped as much code as I could while still being able to replicate the issue.
  4. We are using the AzureFileProvider within the app but in the attached code, I was able to replicate without specifying. It is using the same url used in Syncfusion sample: https://ej2-aspcore-service.azurewebsites.net/

Thanks for any help you may be able to offer with this issue.

-Daniel



DA Daniel October 14, 2021 08:40 PM UTC

After some more digging, I've found cause of the issue.


In my example, the SyncFusion File Manager is rendered within a <table> element.

I placed the file manager <div> outside that table element and the issue disappeared.


I don't know if this is a known issue or by design, but I will work around this for now.


Thanks


SS Sharon Sanchez Selvaraj Syncfusion Team October 15, 2021 01:47 PM UTC

  
Hi Daniel, 
 
Thanks for the details. 
 
As mentioned in your end, the reported error occurs only when rendering within table. As for now, we request you to use the workaround found in your end. However, we have considered the reported issue as a bug from our end. The fix for this issue will be included in our Volume 4 release, which is expected to be rolled out by the month of December, 2021. 
 
Please track the below feedback link to know the status of the issue. 
 
 
Regards, 
Sharon Sanchez S. 


Loader.
Up arrow icon