Syncfusion AI Assistant

How can I help you?

Annotation Events in ASP.NET Core PDF Viewer

28 Feb 202624 minutes to read

The PDF Viewer component triggers various events based on user interactions and annotation changes. These events allow to respond to specific annotation operations such as adding, removing, selecting, moving, and resizing annotations. Signature-related events can also be monitored for signature lifecycle management.

Available events

The PDF Viewer component triggers the following annotation and signature events:

Event Description
annotationAdd Triggers when an annotation is added to a page in the PDF document.
annotationDoubleClick Triggers when an annotation is double-clicked.
annotationMouseLeave Triggers when the mouse pointer moves away from an annotation object.
annotationMouseover Triggers when the mouse pointer moves over an annotation object.
annotationMove Triggers when an annotation is moved on a page in the PDF document.
annotationMoving Triggers while an annotation is being moved.
annotationPropertiesChange Triggers when the properties of an annotation are modified on a PDF page.
annotationRemove Triggers when an annotation is removed from a page in the PDF document.
annotationResize Triggers when an annotation is resized on a page in the PDF document.
annotationSelect Triggers when an annotation is selected on a page in the PDF document.
annotationUnSelect Triggers when an annotation is unselected on a page in the PDF document.
beforeAddFreeText Triggers before adding a text in the freeText annotation.
addSignature Triggers when a signature is added to a page in the PDF document.
removeSignature Triggers when a signature is removed from a page in the PDF document.
resizeSignature Triggers when a signature is resized on a page in the PDF document.
signaturePropertiesChange Triggers when the properties of a signature are changed on a page in the PDF document.
signatureSelect Triggers when a signature is selected on a page in the PDF document.
signatureUnselect Triggers when a signature is unselected on a page in the PDF document.

Annotation events

annotationAdd

The annotationAdd event is triggered when an annotation is added to a PDF document’s page.

Event Arguments: AnnotationAddEventArgs

Example: Handle annotation add event

<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                documentPath="https://cdn.syncfusion.com/content/pdf/blazor-annotations.pdf"
                annotationAdd="annotationAdded">
    </ejs-pdfviewer>
</div>

<script>
    function annotationAdded(args) {
        console.log('Annotation added with ID: ' + args.annotationId);
        console.log('Annotation type: ' + args.annotationType);
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                serviceUrl="/api/PdfViewer"
                documentPath="https://cdn.syncfusion.com/content/pdf/blazor-annotations.pdf"
                annotationAdd="annotationAdded">
    </ejs-pdfviewer>
</div>

<script>
    function annotationAdded(args) {
        console.log('Annotation added with ID: ' + args.annotationId);
        console.log('Annotation type: ' + args.annotationType);
    }
</script>

annotationDoubleClick

The annotationDoubleClick event is triggered when an annotation is double-clicked.

Event Arguments: AnnotationDoubleClickEventArgs

Example: Handle annotation double-click event

<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                documentPath="https://cdn.syncfusion.com/content/pdf/blazor-annotations.pdf"
                annotationDoubleClick="annotationDoubleClicked">
    </ejs-pdfviewer>
</div>

<script>
    function annotationDoubleClicked(args) {
        console.log('Annotation double-clicked on page: ' + args.pageIndex);
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                serviceUrl="/api/PdfViewer"
                documentPath="https://cdn.syncfusion.com/content/pdf/blazor-annotations.pdf"
                annotationDoubleClick="annotationDoubleClicked">
    </ejs-pdfviewer>
</div>

<script>
    function annotationDoubleClicked(args) {
        console.log('Annotation double-clicked on page: ' + args.pageIndex);
    }
</script>

annotationMouseLeave

The annotationMouseLeave event is triggered when the user’s mouse pointer moves away from an annotation object.

Event Arguments: AnnotationMouseLeaveEventArgs

  • pageIndex
  • name

Example: Handle annotation mouse leave event

<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                documentPath="https://cdn.syncfusion.com/content/pdf/blazor-annotations.pdf"
                annotationMouseLeave="annotationMouseLeaved">
    </ejs-pdfviewer>
</div>

<script>
    function annotationMouseLeaved(args) {
        console.log('Annotation mouse leave event is triggered for annotation with ID: ' + args.pageIndex);
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                serviceUrl="/api/PdfViewer"
                documentPath="https://cdn.syncfusion.com/content/pdf/blazor-annotations.pdf"
                annotationMouseLeave="annotationMouseLeaved">
    </ejs-pdfviewer>
</div>

<script>
    function annotationMouseLeaved(args) {
        console.log('Annotation mouse leave event is triggered for annotation with ID: ' + args.pageIndex);
    }
</script>

annotationMouseover

The annotationMouseover event is triggered when the mouse is moved over an annotation object.

Event Arguments: AnnotationMouseOverEventArgs

Example: Handle annotation mouse over event

<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                documentPath="https://cdn.syncfusion.com/content/pdf/blazor-annotations.pdf"
                annotationMouseover="annotationMouseovered">
    </ejs-pdfviewer>
</div>

<script>
    function annotationMouseovered(args) {
        console.log('Annotation mouse over event is triggered for annotation with ID: ' + args.annotationId);
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                serviceUrl="/api/PdfViewer"
                documentPath="https://cdn.syncfusion.com/content/pdf/blazor-annotations.pdf"
                annotationMouseover="annotationMouseovered">
    </ejs-pdfviewer>
</div>

<script>
    function annotationMouseovered(args) {
        console.log('Annotation mouse over event is triggered for annotation with ID: ' + args.annotationId);
    }
</script>

annotationMove

The annotationMove event is triggered when an annotation drag operation completes and the annotation is positioned on the page.

Event Arguments: AnnotationMoveEventArgs

Example: Handle annotation move event

<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                documentPath="https://cdn.syncfusion.com/content/pdf/blazor-annotations.pdf"
                annotationMove="annotationMoved">
    </ejs-pdfviewer>
</div>

<script>
    function annotationMoved(args) {
        console.log('Annotation moved. ID: ' + args.annotationId + ' on page ' + args.pageIndex);
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                serviceUrl="/api/PdfViewer"
                documentPath="https://cdn.syncfusion.com/content/pdf/blazor-annotations.pdf"
                annotationMove="annotationMoved">
    </ejs-pdfviewer>
</div>

<script>
    function annotationMoved(args) {
        console.log('Annotation moved. ID: ' + args.annotationId + ' on page ' + args.pageIndex);
    }
</script>

annotationMoving

The annotationMoving event is triggered continuously while an annotation is being dragged.

Event Arguments: AnnotationMovingEventArgs

Example: Handle annotation moving event

<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                documentPath="https://cdn.syncfusion.com/content/pdf/blazor-annotations.pdf"
                annotationMoving="annotationMoving">
    </ejs-pdfviewer>
</div>

<script>
    function annotationMoving(args) {
        console.log('Annotation is being moved. Current Action: ' + args.currentPosition);
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                serviceUrl="/api/PdfViewer"
                documentPath="https://cdn.syncfusion.com/content/pdf/blazor-annotations.pdf"
                annotationMoving="annotationMoving">
    </ejs-pdfviewer>
</div>

<script>
    function annotationMoving(args) {
        console.log('Annotation is being moved. Current Action: ' + args.currentPosition);
    }
</script>

annotationPropertiesChange

The annotationPropertiesChange event is triggered when an annotation’s properties (color, opacity, thickness, etc.) are modified.

Event Arguments: AnnotationPropertiesChangeEventArgs

Example: Handle annotation properties change event

<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                documentPath="https://cdn.syncfusion.com/content/pdf/blazor-annotations.pdf"
                annotationPropertiesChange="annotationPropertiesChanged">
    </ejs-pdfviewer>
</div>

<script>
    function annotationPropertiesChanged(args) {
        console.log('Annotation properties changed for ID: ' + args.annotationId);
        console.log('isThicknessChanged: ' + args.isThicknessChanged);
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                serviceUrl="/api/PdfViewer"
                documentPath="https://cdn.syncfusion.com/content/pdf/blazor-annotations.pdf"
                annotationPropertiesChange="annotationPropertiesChanged">
    </ejs-pdfviewer>
</div>

<script>
    function annotationPropertiesChanged(args) {
        console.log('Annotation properties changed for ID: ' + args.annotationId);
        console.log('isThicknessChanged: ' + args.isThicknessChanged);
    }
</script>

annotationRemove

The annotationRemove event is triggered when an annotation is deleted from the PDF document.

Event Arguments: AnnotationRemoveEventArgs

Example: Handle annotation remove event

<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                documentPath="https://cdn.syncfusion.com/content/pdf/blazor-annotations.pdf"
                annotationRemove="annotationRemoved">
    </ejs-pdfviewer>
</div>

<script>
    function annotationRemoved(args) {
        console.log('Annotation removed with ID: ' + args.annotationId);
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                serviceUrl="/api/PdfViewer"
                documentPath="https://cdn.syncfusion.com/content/pdf/blazor-annotations.pdf"
                annotationRemove="annotationRemoved">
    </ejs-pdfviewer>
</div>

<script>
    function annotationRemoved(args) {
        console.log('Annotation removed with ID: ' + args.annotationId);
    }
</script>

annotationResize

The annotationResize event is triggered when an annotation is resized.

Event Arguments: AnnotationResizeEventArgs

Example: Handle annotation resize event

<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                documentPath="https://cdn.syncfusion.com/content/pdf/blazor-annotations.pdf"
                annotationResize="annotationResized">
    </ejs-pdfviewer>
</div>

<script>
    function annotationResized(args) {
        console.log('Annotation resized. ID: ' + args.annotationId);
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                serviceUrl="/api/PdfViewer"
                documentPath="https://cdn.syncfusion.com/content/pdf/blazor-annotations.pdf"
                annotationResize="annotationResized">
    </ejs-pdfviewer>
</div>

<script>
    function annotationResized(args) {
        console.log('Annotation resized. ID: ' + args.annotationId);
    }
</script>

annotationSelect

The annotationSelect event is triggered when the user selects or clicks on an annotation.

Event Arguments: AnnotationSelectEventArgs

Example: Handle annotation select event

<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                documentPath="https://cdn.syncfusion.com/content/pdf/blazor-annotations.pdf"
                annotationSelect="annotationSelected">
    </ejs-pdfviewer>
</div>

<script>
    function annotationSelected(args) {
        console.log('Annotation selected with ID: ' + args.annotationId);
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                serviceUrl="/api/PdfViewer"
                documentPath="https://cdn.syncfusion.com/content/pdf/blazor-annotations.pdf"
                annotationSelect="annotationSelected">
    </ejs-pdfviewer>
</div>

<script>
    function annotationSelected(args) {
        console.log('Annotation selected with ID: ' + args.annotationId);
    }
</script>

annotationUnselect

The annotationUnselect event is triggered when the user deselects an annotation by clicking elsewhere.

Event Arguments: AnnotationUnselectEventArgs

Example: Handle annotation unselect event

<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                documentPath="https://cdn.syncfusion.com/content/pdf/blazor-annotations.pdf"
                annotationUnselect="annotationUnselected">
    </ejs-pdfviewer>
</div>

<script>
    function annotationUnselected(args) {
        console.log('Annotation unselected with ID: ' + args.annotationId);
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                serviceUrl="/api/PdfViewer"
                documentPath="https://cdn.syncfusion.com/content/pdf/blazor-annotations.pdf"
                                   annotationUnselect="annotationUnselected">
    </ejs-pdfviewer>
</div>

<script>
    function annotationUnselected(args) {
        console.log('Annotation unselected with ID: ' + args.annotationId);
    }
</script>

beforeAddFreeText

The beforeAddFreeText event is triggered before a free text annotation is added.

Event Arguments: BeforeAddFreeTextEventArgs

Example: Handle before add free text event

<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                documentPath="https://cdn.syncfusion.com/content/pdf/blazor-annotations.pdf"
                beforeAddFreeText="beforeAddedFreeText">
    </ejs-pdfviewer>
</div>

<script>
    function beforeAddedFreeText(args) {
        console.log('Before adding free text on page: ' + args.pageIndex);
        // Set args.cancel to true to prevent adding the free text annotation
        // args.cancel = true;
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                serviceUrl="/api/PdfViewer"
                documentPath="https://cdn.syncfusion.com/content/pdf/blazor-annotations.pdf"
                beforeAddFreeText="beforeAddedFreeText">
    </ejs-pdfviewer>
</div>

<script>
    function beforeAddedFreeText(args) {
        console.log('Before adding free text on page: ' + args.pageIndex);
        // Set args.cancel to true to prevent adding the free text annotation
        // args.cancel = true;
    }
</script>

addSignature

The addSignature event is triggered when a signature is successfully added to the PDF document page.

Event Arguments: AddSignatureEventArgs

Example: Handle add signature event

<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                documentPath="https://cdn.syncfusion.com/content/pdf/blazor-annotations.pdf"
                addSignature="addSignature">
    </ejs-pdfviewer>
</div>

<script>
    function addSignature(args) {
        console.log('Signature added to page: ' + args.pageIndex);
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                serviceUrl="/api/PdfViewer"
                documentPath="https://cdn.syncfusion.com/content/pdf/blazor-annotations.pdf"
                addSignature="addSignature">
    </ejs-pdfviewer>
</div>

<script>
    function addSignature(args) {
        console.log('Signature added to page: ' + args.pageIndex);
    }
</script>

removeSignature

The removeSignature event is triggered when a signature is deleted from the PDF document.

Event Arguments: RemoveSignatureEventArgs

Example: Handle remove signature event

<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                documentPath="https://cdn.syncfusion.com/content/pdf/blazor-annotations.pdf"
                removeSignature="removeSignature">
    </ejs-pdfviewer>
</div>

<script>
    function removeSignature(args) {
        console.log('Signature removed from page: ' + args.pageIndex);
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                serviceUrl="/api/PdfViewer"
                documentPath="https://cdn.syncfusion.com/content/pdf/blazor-annotations.pdf"
                removeSignature="removeSignature">
    </ejs-pdfviewer>
</div>

<script>
    function removeSignature(args) {
        console.log('Signature removed from page: ' + args.pageIndex);
    }
</script>

resizeSignature

The resizeSignature event is triggered when a signature is resized.

Event Arguments: ResizeSignatureEventArgs

Example: Handle resize signature event

<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                documentPath="https://cdn.syncfusion.com/content/pdf/blazor-annotations.pdf"
                resizeSignature="resizeSignature">
    </ejs-pdfviewer>
</div>

<script>
    function resizeSignature(args) {
        console.log('Signature resized on page ' + args.pageIndex);
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                serviceUrl="/api/PdfViewer"
                documentPath="https://cdn.syncfusion.com/content/pdf/blazor-annotations.pdf"
                resizeSignature="resizeSignature">
    </ejs-pdfviewer>
</div>

<script>
    function resizeSignature(args) {
        console.log('Signature resized on page ' + args.pageIndex);
    }
</script>

signaturePropertiesChange

The signaturePropertiesChange event is triggered when a signature’s properties are modified.

Event Arguments: SignaturePropertiesChangeEventArgs

Example: Handle signature properties change event

<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                documentPath="https://cdn.syncfusion.com/content/pdf/blazor-annotations.pdf"
                signaturePropertiesChange="signaturePropertiesChanged">
    </ejs-pdfviewer>
</div>

<script>
    function signaturePropertiesChanged(args) {
        console.log('Signature properties changed on page ' + args.pageIndex);
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                serviceUrl="/api/PdfViewer"
                documentPath="https://cdn.syncfusion.com/content/pdf/blazor-annotations.pdf"
                signaturePropertiesChange="signaturePropertiesChanged">
    </ejs-pdfviewer>
</div>

<script>
    function signaturePropertiesChanged(args) {
        console.log('Signature properties changed on page ' + args.pageIndex);
    }
</script>

signatureSelect

The signatureSelect event is triggered when signature is selected over the page of the PDF document.

Event Arguments

For event data, see SignatureSelectEventArgs.

The following example illustrates how to handle the signatureSelect event.

<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                documentPath="https://cdn.syncfusion.com/content/pdf/blazor-annotations.pdf"
                signatureSelect="signatureSelected">
    </ejs-pdfviewer>
</div>

<script>
    function signatureSelected(args) {
        console.log('Signature selected on page ' + args.pageIndex);
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                serviceUrl="/api/PdfViewer"
                documentPath="https://cdn.syncfusion.com/content/pdf/blazor-annotations.pdf"
                signatureSelect="signatureSelected">
    </ejs-pdfviewer>
</div>

<script>
    function signatureSelected(args) {
        console.log('Signature selected on page ' + args.pageIndex);
    }
</script>

signatureUnselect

The signatureUnselect event is triggered when signature is unselected over the page of the PDF document.

Event Arguments

For event data, see SignatureUnSelectEventArgs.

The following example illustrates how to handle the signatureUnselect event.

<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                documentPath="https://cdn.syncfusion.com/content/pdf/blazor-annotations.pdf"
                signatureUnselect="signatureUnselected">
    </ejs-pdfviewer>
</div>

<script>
    function signatureUnselected(args) {
        console.log('Signature unselected on page ' + args.pageIndex);
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                serviceUrl="/api/PdfViewer"
                documentPath="https://cdn.syncfusion.com/content/pdf/blazor-annotations.pdf"
                signatureUnselect="signatureUnselected">
    </ejs-pdfviewer>
</div>

<script>
    function signatureUnselected(args) {
        console.log('Signature unselected on page ' + args.pageIndex);
    }
</script>