Cannot hide unwanted items in PDF Viewer toolbar

[Chris K]

I have followed the instructions to hide unwanted toolbar items using [toolbarSettings] found for instance here: https://www.syncfusion.com/blogs/post/easy-steps-to-create-a-read-only-angular-pdf-viewer.aspx.

In my case I am looking to show the magnification and navigation tools and hide everything else.  I am using the following relevant code:

Template

            <ejs-pdfviewer id="pdfViewer"
                           [serviceUrl]="serviceUrl"
                           [documentPath]="pdf"
                           [toolbarSettings]="toolbarSettings"
                           >
            </ejs-pdfviewer>

Component

    public toolbarSettings = {
        showTooltip: true,
        toolbarItems: [
            "PageNavigationTool",
            "MagnificationTool",
        ],
    }

Unfortunately nothing seems to be working. I know that these tools have the capability to render since they do show when I remove [toolbarSettings] from the template. However when I use the code above I get a toolbar that is blank except for a vertical ellipsis menu that displays a download option when clicked.

Any guidance on how to diagnose this and get it to perform as intended?

[Chinnamunia Karthik Chinna Thambi]

Hi Chris,

We have used the provided the code snippets and it only shows the magnification and navigation tools and hides the remaining tools. We provided the sample and screenshot below for your reference.

Sample:  https://stackblitz.com/edit/angular-ydcmmg-t4wna3?file=src%2Fapp.component.html,src%2Fapp.component.ts

Screenshot:

Kindly compare our sample and modify your sample accordingly. if you have any concerns on this, please share your sample. This will be helpful for us to analyze further and provide the details.​

[Chris K]

Thank you for the response. I have been investigating and I have some further information. This behavior only occurs when using the viewer in responsive view. In fact, when operating in desktop view everything works as expected but when I switch to developer mode I get the blank toolbar referenced in my original post. Furthermore it appears that the elements do not not exist, so it is not a matter of css sizing or display. See below.

Desktop View:

Responsive View:

[Chris K]

Also I was able to reproduce this behavior in the stackblitz you provided (https://stackblitz.com/edit/angular-ydcmmg-t4wna3?file=src%2Fapp.component.html,src%2Fapp.component.ts). To reproduce using Chrome :

1. Open the Stackblitz in desktop view. Observe full toolbar: 
   
   
   
   
2. Press F12 to enter developer mode. Refresh the page. Observe missing items on toolbar:
   
   
   

[Chinnamunia Karthik Chinna Thambi]

A limited toolbar items are available on the mobile devices. In the provided code snippet, you've included Magnification and Navigation tools, which are not available on the mobile devices. If you wish to include these toolbar items on mobile devices, you'll need to set the #EnableDesktopMode API as true. We have provided the corresponding code snippet and a sample below for your reference.

Code snippet:
 

 

<ejs-pdfviewer

    #pdfviewer

    id="pdfViewer"

    [documentPath]="document"

    [serviceUrl]="serviceUrl"

    [enableDesktopMode]="true"

    [toolbarSettings]="toolbarSettings"

    style="height:640px;display:block"

></ejs-pdfviewer>

Sample:  https://stackblitz.com/edit/angular-ydcmmg-y9pvnx?file=src%2Fapp.component.html,src%2Fapp.component.ts

[Chris K]

This worked. Thank you!