Annotation toolbar visible by default

[Jill Griggs]

How do I set the annotation toolbar to be visible by default? 

When the PDF viewer loads, the annotation toolbar is not visible and you have to click on the annotation 

[Venkada Subramanian Durai]

Hi Jill Griggs,

Thank you for the update. To display the annotation toolbar by default when the PDF Viewer initially loads, set the isAnnotationToolbarOpen API to true.

Code snippet:
 

 <ejs-pdfviewer

     #pdfviewer

     id="pdfViewer"

     [documentPath]="document"

     [resourceUrl]="resource"

     [toolbarSettings]="toolbarSettings"

     [isAnnotationToolbarOpen]="true"

     (documentLoad)="hideExportOptions($event)"

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

   ></ejs-pdfviewer>
 

If you need to control the annotation toolbar dynamically, you can use the showAnnotationToolbar API. Pass true to open the toolbar and false to close it as needed.

Code snippet:

 

 //dynamically open AnnotationToolbar

 this.pdfviewerControl.toolbarModule.showAnnotationToolbar(true);

Sample for opening the annotation toolbar initially

Regards,
Venkada Subramanian D

[Jill Griggs]

You gave me the solution in Angular, I needed it in Javascript

[Venkada Subramanian Durai]

Hi Jill Griggs,

Apologies for the inconvenience. We have provided a solution to display the annotation toolbar by default in the JavaScript PDF Viewer.

 

To enable the annotation toolbar when the PDF Viewer initially loads, set the isAnnotationToolbarOpen API to true.

Code snippet:
 

 

var viewer = new ej.pdfviewer.PdfViewer({

  documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',

  resourceUrl: 'https://cdn.syncfusion.com/ej2/23.2.6/dist/ej2-pdfviewer-lib',

});

ej.pdfviewer.PdfViewer.Inject(

  ej.pdfviewer.Toolbar,

  ej.pdfviewer.Magnification,

  ej.pdfviewer.BookmarkView,

  ej.pdfviewer.ThumbnailView,

  ej.pdfviewer.TextSelection,

  ej.pdfviewer.TextSearch,

  ej.pdfviewer.Print,

  ej.pdfviewer.Navigation,

  ej.pdfviewer.LinkAnnotation,

  ej.pdfviewer.Annotation,

  ej.pdfviewer.FormFields,

  ej.pdfviewer.FormDesigner,

  ej.pdfviewer.PageOrganizer

);

viewer.appendTo('#pdfViewer');

viewer.isAnnotationToolbarOpen = true;

 

Sample for opening the annotation toolbar initially
 

If you need to control the annotation toolbar dynamically, use the showAnnotationToolbar API. Pass true to open the toolbar and false to close it as needed.

Sample for opening the annotation toolbar dynamically using showAnnotationToolbar  API
 

Regards,
Venkada Subramanian D

[Jill Griggs]

That worked! Thank you so much for your help!!

[Venkada Subramanian Durai]

Hi Jill Griggs,

Thanks for the update. Please ping us if you need any assistance or have any additional requirements.

Regards,
Venkada Subramanian D