Unable to customize/control the annotations bar

I've been attempting to customize the PDF Viewer (React) and am running into a few issues.

First, when setting "enableAnnotationToolbar" to true, the annotation toolbar does not automatically render, you still need to go and click the button to show it. 

Second, setting the "enableXYZ" for most of the buttons seems to work, but it only disables them, I'd prefer them simply not to render when I have that toggle set. I've done a load of custom CSS to hide these buttons, but that seems like a non-scalable choice. Is there a programatic way to do this?


<PdfViewerComponent
  id={this.state.id}
  enableToolbar={true}
  enableAnnotationToolbar={true}  // DOES NOT WORK
  documentPath={this.state.document}
  ref={(scope) => { this.viewer = scope; }}
  serviceUrl={this.state.serviceURL}
  style={{ 'height': 'calc(100% - 75px)' }}
  >
    <Inject services={services} />
</PdfViewerComponent>



Third, your customize the toolbar example only shows a few buttons. I'm not seeing anywhere in the docs how to create a completely custom toolbar that has only the buttons I want in it, with their default behaviors. Even if we have to wire them up one by one, how does one add each button back into a new,empty toolbar? I don't see a reference for these.

Where is the list of all valid icon names/values for every button, along with their associated methods that make them do the needful on click or other interaction?

<ItemDirective prefixIcon="e-pv-print-document-icon" tooltipText="Print" id='print' align="Right"></ItemDirective>





2 Replies 1 reply marked as answer

AA Akshaya Arivoli Syncfusion Team October 20, 2020 05:01 PM UTC

Hi John, 

Thank you for contacting Syncfusion support. We are currently checking on your query and update you with more details on October 21, 2020 

Regards, 
Akshaya 



AA Akshaya Arivoli Syncfusion Team October 22, 2020 03:33 AM UTC

Hi John, 

Please find the details of your query from the below, 

Query 
Details  
First, when setting "enableAnnotationToolbar" to true, the annotation toolbar does not automatically render, you still need to go and click the button to show it.  
In our latest version isAnnotationToolbarOpen property will open the annotation toolbar on control initialization. 
 
Second, setting the "enableXYZ" for most of the buttons seems to work, but it only disables them, I'd prefer them simply not to render when I have that toggle set. I've done a load of custom CSS to hide these buttons, but that seems like a non-scalable choice. Is there a programatic way to do this? 
 
  We can hide the items in the toolbar using toolbarItems property in toolbarSettings available in PDF Viewer.   
 
 
Third, your customize the toolbar example only shows a few buttons. I'm not seeing anywhere in the docs how to create a completely custom toolbar that has only the buttons I want in it, with their default behaviors. Even if we have to wire them up one by one, how does one add each button back into a new,empty toolbar? I don't see a reference for these. 


 
Where is the list of all valid icon names/values for every button, along with their associated methods that make them do the needful on click or other interaction? 


 
<ItemDirective prefixIcon="e-pv-print-document-icon" tooltipText="Print" id='print' align="Right"></ItemDirective> 
 
 
We can create the PDF Viewer custom toolbar using the available APIs. 
 
 
 
Please refer to the below link to create the custom toolbar using the Syncfusion toolbar component, 
 
 
We can find the list of PDF Viewer available API from the below link, using that we can provide the functions to the button click. We can create  
 
 
 
Please try it and revert us with more details about your requirement, details about your custom toolbar items if you still have concerns. These details will be helpful for us to investigate further and assist you better. 


Regards, 
Akshaya 


Marked as answer
Loader.
Up arrow icon