Customize the Annotation Toolbar in ASP.NET Core PDF Viewer

18 Sep 20263 minutes to read

Overview

This guide shows how to show or hide the annotation toolbar and how to choose which tools appear and their order.

Outcome: A working ASP.NET Core example that toggles the annotation toolbar and uses annotationToolbarItems to customize the toolbar.

Prerequisites

Steps

1. Show or hide the annotation toolbar

Toggle the annotation toolbar programmatically during initialization or at runtime.

Use the enableAnnotationToolbar property or the showAnnotationToolbar method to change visibility.

Example using the showAnnotationToolbar() method:

<button id="showToolbar" onclick="ShowAnnotationToolbar()">Show Annotation Toolbar</button>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
    </ejs-pdfviewer>
</div>

<script>
    function ShowAnnotationToolbar() {
        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
        pdfViewer.toolbar.showAnnotationToolbar(false);
    }
</script>

2. Show or hide annotation toolbar items

Use annotationToolbarItems with a list of AnnotationToolbarItem values. The toolbar shows only items in this list.

Configure the toolbarSettings property to specify which annotation tools appear. The property accepts a list of AnnotationToolbarItem values. Only listed items are displayed and the render order follows the list sequence.

The annotation toolbar appears when entering annotation mode in the PdfViewer and adapts responsively to available width. Include the Close tool to enable exiting the annotation toolbar.

Example customizing the annotation toolbar:

<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                   toolbarSettings="@(new Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings { AnnotationToolbarItems = "HighlightTool UnderlineTool StrikethroughTool ColorEditTool OpacityEditTool AnnotationDeleteTool StampAnnotationTool HandWrittenSignatureTool InkAnnotationTool ShapeTool CalibrateTool StrokeColorEditTool ThicknessEditTool" })">
    </ejs-pdfviewer>
</div>

Expected result

  • The annotation toolbar shows only the items you list in annotationToolbarItems.
  • Tools appear in the order specified in the configuration.

Troubleshooting

  • Annotation toolbar tools do not appear
    • Cause: Invalid item names or Annotation and Toolbar services not injected.
    • Solution: Verify item names match the predefined list and ensure both Toolbar and Annotation services are enabled in the PDF Viewer.
  • Annotation toolbar does not show at runtime
    • Cause: Annotation mode not activated or service not properly configured.
    • Solution: Ensure the user has activated annotation mode and the viewer is properly initialized with annotation support.