We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to add functionality to customized toolbar buttons?

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

4 Replies

RS Rajapandiyan Settu Syncfusion Team January 4, 2023 03:21 AM UTC

Kindly find the response.


Query

Response

    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.

 

 

 

 

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.

    1. 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

 

    1. 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.



SR Sriraman replied to Rajapandiyan Settu January 4, 2023 10:55 AM UTC

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.



VV Visvesvar Venkatesan Syncfusion Team January 5, 2023 06:56 PM UTC

Thank you for your update.


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



VV Visvesvar Venkatesan Syncfusion Team January 6, 2023 02:16 PM UTC

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(eany): void {

    this.customToolbar.items[1].disabled = false;

  }

  public
annotationUnSelect(eany): 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


Loader.
Live Chat Icon For mobile
Up arrow icon