Display custom toolbar items on PdfViewer

[Nga]

Hi,

I would like 3 toolbar items on PdfViewer:

MagnificationTools
PageNavigationTools
PrintTools


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

Thanks,
Nga

[Akshaya Arivoli]

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, 

http://www.syncfusion.com/downloads/support/forum/132032/ze/PdfViewerSampleBrowser_(2)-2136512139  

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. 

Regards, 

Akshaya A 

[Nga]

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]

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, 

https://help.syncfusion.com/js/pdfviewer/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. 

Regards, 

Akshaya. 

[Nga]

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]

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. 

Regards, 

Akshaya 

[Nga]

Thanks.