How to add functionality to customized toolbar buttons?

[Sriraman]

Hi,

As per my requirements, I need to have one toolbar with few annotation buttons like Highlight, Underline, line, rectangle and cirle, delete annotation and show/hide comment panel. As per the PDF viewer toolbar customization, I have created a toolbar with desired buttons.

I need help on below items:

1. In default setup, delete annotation button is only enabled when you select an annotation. Do we have any property to check this logic? pdfViewer.annotation.isAnnotationSelected always returns false.
2. Can you provid me a functionality to show/hide comment panel.
   
3. In default setup, for Highlight and underline annotation buttons, when you click on it, the color of those icons are turned into pink color. How to achieve that with custom toolbar?

Thanks

[Rajapandiyan Settu]

Kindly find the response.

Query	Response
In default setup, delete annotation button is only enabled when you select an annotation. Do we have any property to check this logic? pdfViewer.annotation.isAnnotationSelected always returns false.	The delete button gets selected only when we select the annotation and it is behavior of our PDF Viewer.   Could you kindly explain your requirement in detail? This will help us to analyze further and provide the details.
Can you provid me a functionality to show/hide comment panel.	We can hide the comment panel by using the property.   Kindly find the API link - https://helpej2.syncfusion.com/angular/documentation/api/pdfviewer/#enablecommentpanel    [enableCommentPanel]="false"   We have disabled the comment panel in the provided sample.   Sample - https://stackblitz.com/edit/angular-5ddabb-65uytp?file=app.component.html,app.component.ts,package.json
In default setup, for Highlight and underline annotation buttons, when you click on it, the color of those icons are turned into pink color. How to achieve that with custom toolbar?	The pink-colored icons appear when we use the material theme.  Kindly change the theme to get the issue resolved. We have provided the image for reference below.

Kindly try this and let us know if you have any concerns.

[Sriraman]

As mentioned in my earlier post and in the title, I am creating a custom toolbar where I have a delete button. The delete button should be enabled only when the user selects the annotation (similar to what we have in default setup). In my custom toolbar the delete button is always enabled, as I have no code to disable it when no annotation is selected. As pdfViewer.annotation.isAnnotationSelected is not working correctly (it always returns false), I would like to know how to identify whether the annotation is selected or not.

Please refer this sample https://stackblitz.com/edit/angular-g94gvs-gmzcvy?file=app.component.html

Here I have added a delete button next to open button. I would like to enable/disable based on annotation selection.

[Visvesvar Venkatesan]

Thank you for your update.

We are analyzing the feasibility of your requirement and we will update further details on January 9, 2022.

[Visvesvar Venkatesan]

Thank you for your patience.

We can enable and disable the annotation delete button while selecting and unselecting the annotation using the “annotationSelect” and “annotationUnSelect” events.

Kindly find the UG Document for events - https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#events

We have also provided the modified sample below and provided the code snippet below.

Code Snippet:

(annotationSelect)="annotationSelect($event)"

(annotationUnSelect)="annotationUnSelect($event)"

<e-item

            prefixIcon="e-delete-1"

            tooltipText="Delete annotation"

            id ="DeleteButton"

            disabled="true"

            (click)="deleteSelectedAnnotation()"
>

</e-item>

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;

  }

Sample - https://stackblitz.com/edit/angular-g94gvs-bdzfbg?file=app.component.ts,app.component.html

Kindly try this and revert to us if you still have any concerns