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

Branched from ~ 159889 ~ How can I add a button to the "SfPdfViewerServer" Toolbar with a label "My signature"

Razvan Iacobescu

Thank you! We have manage to create a windows application that sign the document and send it to the web.

My question is how can I add a button to the "SfPdfViewerServer" Toolbar with a label "My signature", and when the user click on it it will be able to draw a rectangle on a pdf page and after that an event will fired like "mouseup", and retrieve the x,y,w,h of the rectangle.

We have created something custom but in this context does not work.

Thank you!

1 Reply

VV Visvesvar Venkatesan Syncfusion Team April 13, 2023 11:53 AM UTC

We can add a button externally but not inside a toolbar. To add inside the toolbar you have to create a customized toolbar and add it inside the toolbar.

Kindly find the documentation below for customizing the toolbar.

Documentation: https://blazor.syncfusion.com/documentation/pdfviewer/toolbar-customization

We have provided code Snippet for creating an external button and you can add a rectangle with it.  You can get the annotation details in the annotationAdd event (#AnnotationAddEventArgs).

<div class="control-section">

    <SfButton OnClick="OnClick">Click Here</SfButton>

    <SfPdfViewerServer Width="1060px"  RectangleSettings="@RectangleSettings" @ref="viewer" Height="500px" DocumentPath="@DocumentPath">

        <PdfViewerEvents AnnotationAdded="annotationAdd"  ></PdfViewerEvents>




@code {

    public string DocumentPath { get; set; } = "wwwroot/data/PDF_Succinctly.pdf";

    SfPdfViewerServer viewer;

    PdfViewerRectangleSettings RectangleSettings = new PdfViewerRectangleSettings { FillColor = "yellow", Opacity = 0.6, StrokeColor = "orange" };


    public void OnClick(MouseEventArgs args)





    public async void annotationAdd(AnnotationAddEventArgs args)



        await this.JSRuntime.InvokeVoidAsync("console.log", args);




Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/LOAD_S~2348071370.zip

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

Live Chat Icon For mobile
Up arrow icon