We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Display custom toolbar items on PdfViewer

Thread ID:





132032 Aug 9,2017 09:21 AM UTC Aug 16,2017 09:10 AM UTC JavaScript 6
Tags: ejPdfViewer
Asked On August 9, 2017 09:21 AM UTC


I would like 3 toolbar items on PdfViewer:


How to achieve that? I looked at member toolbarSettings.toolbarItem but it seems only 1 toolbar item or all is set.


Akshaya Arivoli [Syncfusion]
Replied On August 10, 2017 06:52 AM UTC

Hi Nga, 

Thank you for using Syncfusion products. 

We can enable/disable the one or more toolbar items using the toolbarSettings of the ejPdfViewer. Please find the code snippet for the same. 

Code Snippet

$("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', toolbarSettings: { toolbarItem: ej.PdfViewer.ToolbarItems.MagnificationTools | ej.PdfViewer.ToolbarItems.PageNavigationTools | ej.PdfViewer.ToolbarItems.PrintTools} }); 

We have created the sample for your requirement and shared the same in the following location, 

Please try the above sample and revert us with more details if your requirement is differing from the provided sample. These details will be helpful for us to investigate more on your requirement and to assist you with better solution. 

Akshaya A 

Replied On August 12, 2017 07:24 AM UTC

Thanks. My PdfViewer has 600px width and it is showing hamburger menu at top right of the viewer. How to force displaying all icons on toolbar and hide hamburger menu?

Akshaya Arivoli [Syncfusion]
Replied On August 14, 2017 06:38 AM UTC

Hi Nga, 

Thank you for your update. 

We have analyzed your query and found that, the hamburger menu will be shown if the window width is minimum over than the toolbar width and it is the default behavior of the toolbar in responsive mode. The hamburger menu will be disabled by setting the isResponsive to false for the Toolbar. But if we set the isResponsive to false for ejPdfviewer, the toolbar items were rendered below in the next row of default toolbar item also it increase the height of the toolbar. So we have set the isResponive to true as default value for toolbar in ejPdfViewer. However, you can create and customize your own toolbar with the public API’s available in ejPdfviewer. Please find the UG documentation link for toolbar customization, 

Can you please provide us more details about your requirement and confirm us whether you want to display all the icons in a single row in the toolbar? These details will be helpful for us to investigate more on your requirement and assist you better. 


Replied On August 14, 2017 09:09 AM UTC

I just want to show some toolbar items without hamburger menu, but you guys are setting ejToolbar.isResponsive with true. And I don't want to create a customer toolbar by using the client side APIs. I just need to be able to configure ejToolbar.isResponsive inside PdfViewer.

Akshaya Arivoli [Syncfusion]
Replied On August 15, 2017 06:36 AM UTC

Hi Nga, 
Thank you for your update. 
At present, we do not have support for setting the IsResponsive property of ejToolbar inside the PDF viewer. We will implement your requirement and it will be included in our upcoming release. 
Please revert us if you have any other concerns on this. 


Replied On August 16, 2017 09:10 AM UTC



This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon