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. Image for the cookie policy date
close icon

Display custom toolbar items on PdfViewer


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.


6 Replies

AA Akshaya Arivoli Syncfusion Team 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 

NG Nga 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?

AA Akshaya Arivoli Syncfusion Team 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. 


NG Nga 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.

AA Akshaya Arivoli Syncfusion Team 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. 


NG Nga August 16, 2017 09:10 AM UTC


Live Chat Icon For mobile
Up arrow icon