Having trouble getting help?
Contact Support
Contact Support
How to enable and disable the delete button based on annotation selection and unselection events
7 May 20252 minutes to read
In the Syncfusion® PDF viewer, enable and disable the delete button while selecting and unselecting annotations by using the annotationSelect and annotationUnSelect events.
Here is an example of how you can enable and disable the delete button while selecting and unselecting annotations:
<ejs-pdfviewer #pdfviewer id='pdfViewer'
[documentPath]='document'
[enableToolbar]=false
[enableNavigationToolbar]=false
(annotationSelect)="annotationSelect($event)"
(annotationUnSelect)="annotationUnSelect($event)"
style="height:640px; display: block">
</ejs-pdfviewer>
<ejs-pdfviewer #pdfviewer id='pdfViewer'
[serviceUrl]='service'
[documentPath]='document'
[enableToolbar]=false
[enableNavigationToolbar]=false
(annotationSelect)="annotationSelect($event)"
(annotationUnSelect)="annotationUnSelect($event)"
style="height:640px; display: block">
</ejs-pdfviewer>
<ejs-toolbar id='topToolbar' #customToolbar>
<e-item
prefixIcon="e-delete-1"
tooltipText="Delete annotation"
id ="DeleteButton"
disabled="true"
(click)="deleteSelectedAnnotation()">
</e-items>
</ejs-toolbar>
public annotationSelect(e: any): void {
this.customToolbar.items[1].disabled = false;
}
public annotationUnSelect(e: any): void {
this.customToolbar.items[1].disabled = true;
}
public deleteSelectedAnnotation(): void {
this.pdfviewerControl.annotation.deleteAnnotation();
this.customToolbar.items[1].disabled = true;
}
Find the sample how to enable and disable the delete button while selecting and unselecting annotations.