How to add page context menu?

[Gilbert Dimaano]

I there a way to add context menu for the whole PDF apart from the text selection context menu.

[Venkada Subramanian Durai]

Hi Gilbert Dimaano,

Thanks for the update. Yes, this requirement can be achieved by placing the PDF Viewer inside a wrapper <div> and using the Syncfusion Context Menu component for handling the required interactions. We have attached a sample implementation demonstrating this approach for your reference.
 

Please review the sample and let us know whether it meets your requirements. If you have any questions or need further clarification, feel free to reach out.

Code snippet:

HTML:
 

 <div id="target">

         <div id="pdfViewer" style="height: 640px; width: 100%"></div>

 </div>

 <ul id="contextmenu"></ul>

JS:
 

var menuItems = [

 {

   text: 'Cut',

 },

 {

   text: 'Copy',

 },

 {

   text: 'Paste',

 },

];

var menuOptions = {

 target: '#target',

 items: menuItems,

 select: function (args) {

   console.log('Selected Option:', args.item.text);

 },

};

 

// Initialize ContextMenu control.

var menuObj = new ej.navigations.ContextMenu(menuOptions, '#contextmenu');

Add Custom Context menu for PDF Viewer

Regards,
Venkada Subramanian D

[Gilbert Dimaano]

Hi Venkada,

There is a conflict between selection context menu and custom context menu. 

Attachment: Screenshot_from_20260413_102444_7aabe4e1.png

[Venkada Subramanian Durai]

Hi Gilbert Dimaano,

Thank you for the details. We can prevent the custom context menu from opening for specific PDF Viewer events. In your case, the context menu appears when an annotation is selected. This behavior can be controlled at the application level by using a boolean flag.
 

The approach is as follows:

 

• Set the boolean flag to true during annotation selection and form field selection events.
• Reset the boolean flag to false when the annotation or form field is unselected.
• Based on the value of this boolean, use the beforeOpen event of the context menu component to prevent it from opening by setting args.cancel = true.

 

Please update this boolean as required based on your application’s use cases. Kindly review this approach and let us know if it meets your requirements or if you have any questions.

Code snippet:
 

menuObj.beforeOpen = function (args) {

 //prevent the custom context menu from opening in specific PDF Viewer events

 if (isPrevent) {

   args.cancel = true;

 }

};

 

Sample for preventing the custom context from opening in PDF Viewer events

Regards,
Venkada Subramanian D

[Gilbert Dimaano]

How to handle the overlapping of Paste and custom context menu.

[Venkada Subramanian Durai]

Hi Gilbert Dimaano,

Thank you for the update. You can achieve the requested behavior and avoid overlapping at the application level by using the attached sample project. In this sample, we have handled the context menu event of the PDF Viewer, where the default PDF Viewer context menu is prevented from opening and a custom context menu is opened programmatically instead.
 

Please review the sample and let us know whether it meets your requirements. Feel free to reach out if you have any questions or need further clarification.

 

Application level solution for preventing the context menu open

Disclaimer:

This solution is implemented at the application level to address your specific requirement. Ensure that you validate this approach on your end and confirm it works for all your use cases after integration.
 

Regards,
Venkada Subramanian D