1. Home
  2. Forum
  3. ASP.NET Web Forms (Classic)
  4. PdfViewer Custom Toolbar

PdfViewer Custom Toolbar

Hi,

we need to customize the toolbar of the pdfviewer. I tried to run your example from your homepage, but with the example code, the pdf isnt loaded anymore (blank page) and the toolbar is just a blank bar.
I have no JS errors or something similar.
Can you give me a hint what i am doing wrong?

Thanks
Matthias

Attachment: PdfViewerViaIframe_CustomToolbar_9a39afed.zip

6 Replies
AA Akshaya Arivoli Syncfusion Team May 19, 2020 01:24 PM UTC

Hi Matthias , 

Thank you for contacting Syncfusion support. 

We can reproduce the reported issue with the provided sample. We will analyze further on it and update you with more details on May 21, 2020 

Regards, 
Akshaya 


AA Akshaya Arivoli Syncfusion Team May 25, 2020 06:05 AM UTC


Hi Matthias , 

We are applying the styles from the e-pdfviewer class in our css file. But in the provided sample the class name is toolbarclass. So that the icon and style is not applied correctly. On changing the class name to e-pdfviewer will resolve the issue. Kindly refer the code-snippet below and modified sample. 

<div id="toolbarDiv" style="height:38px;width:100%;border:solid black 1px" class="e-pdfviewer" role="toolbar"> 


We will include the changes our UG documentation. Please revert us with more details if you need any further assistance. 

Regards, 
Akshaya  


MW Matthias Wagner May 25, 2020 02:08 PM UTC

Hi Akshaya,

thanks, the example is working fine now.

My problem now is: your default toolbar looks pretty nice to me, however this customized toolbar isnt that beautiful, at least to me.

Perhaps some words to my usecase. I need to add one button on the PdfViewer Toolbar to execute some javascript of my own.

- Is this eventually possible with your default toolbar? 
- If not i guess I have to use this customized toolbar?
- Is there a way to make this customized toolbar look exactly like the default toolbar? 

I tried, just as an example, to add the zoom. But as soon as I add the zoom button the layout is destroyed and the dropdown of the zoom doesnt work proper.

Regards
Matthias


Attachment: PdfViewerViaIframe_CustomToolbar_4e922ffe.zip

AA Akshaya Arivoli Syncfusion Team May 26, 2020 10:37 AM UTC

Hi Matthias , 

Thank you for your update. 

Based on the provided details we suspect that your requirement is to add an extra button in the PDF Viewer default toolbar. Please refer to the below link to achieve your requirement. 


We have also created the sample and shared the same in the below link, 


Please try it and revert us with more details about your requirement if you need any further assistance. 

Regards, 
Akshaya  


MW Matthias Wagner May 29, 2020 07:57 AM UTC

Hi Akshaya,

exactly what i wanted, thank you very much :-)

It works like a charm in Chrome and Firefox, but as soon as I start the program in IE or Edge, the extra button isnt shown anymore.
Is this some known issue?

Attachment: CustomToolbar2_problemIE_849709a4.zip


Update:
I just noticed that the reason for the problem is that i used a div-container instead of the input element. 
The reason why i used the div was, that i can put an image in it.

Works now on all browsers with "input type=image"

AA Akshaya Arivoli Syncfusion Team May 29, 2020 08:01 AM UTC

Hi Matthias, 

Thank you for your update. We are glad to know that the reported issue resolved.   

Regards, 
Akshaya 


Loader.
Up arrow icon