Update form field using context menu in Blazor SfPdfViewer Component

21 Jun 20234 minutes to read

You can update the form field’s at runtime using the FormFieldClick event and UpdateFormFieldsAsync() method of SfPdfViewer. The following code example explains how to open Context menu when you click on the form field and how to update the menu item content as form field’s value. In this example, the Syncfusion’s ContextMenu component is used to update form field.

@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.SfPdfViewer
@using Syncfusion.Blazor.Navigations

<div id="target" class="e-pdfviewer-signatureformfields"

    <SfPdfViewer2 @ref="@Viewer"
        <PdfViewerEvents DocumentLoaded="@documentLoad"


<SfContextMenu @ref="contextMenuObj"
    <MenuFieldSettings Text="Content"></MenuFieldSettings>
    <MenuEvents TValue="CustomItem"

@code {
    SfPdfViewer2 Viewer;
    SfContextMenu<CustomItem> contextMenuObj;

    private class CustomItem
        public string Content { get; set; }
        public string Id { get; set; }

    //Sets the PDF document path for initial loading.
    private string DocumentPath { get; set; } = "wwwroot/FF1.pdf";

    double x = 0; double y = 0;
    private string feildId = "";
    FormField formField;
    private CustomItem SelectedItem;

    private void mouseOver(MouseEventArgs args)
        x = args.ClientX;
        y = args.ClientY;

    //This method will get invoked when the menu item is clicked.
    private async void selectedHandler(MenuEventArgs<CustomItem> args)
        SelectedItem = args.Item;
        Dictionary<string, string> param = new Dictionary<string, string>();
        param.Add(feildId, SelectedItem.Content);
        formField.Value = SelectedItem.Content;
        //This method is used to update the isReadOnly property of the form field.
        await Viewer.UpdateFormFieldsAsync(formField);

    //This method will get invoked when you click on the form field like name.
    private void formFeildClick(FormFieldClickArgs args)
        feildId = args.Field.Id;
        formField = args.Field;
        //This method will open the context menu on the specified position.
        contextMenuObj.Open(x, y);

    //Represents the collection to hold the menu items.
    private List<CustomItem> menuItems = new List<CustomItem>();

    //This method will get invoked once the SfPdfViewer is loaded.
    private async void documentLoad(LoadEventArgs args)
        //Perform export annotations action in the SfPdfViewer.
        Dictionary<string, string> feilds = await Viewer.ExportFormFieldsAsObjectAsync();
        if (feilds.Keys.Count > 0)
            foreach (KeyValuePair<string, string> feild in feilds)
                if (menuItems.Count < 10)
                    //Add custom menu item to the menuitems list.
                    menuItems.Add(new CustomItem() { Content = feild.Key, Id = feild.Key });


View sample in GitHub.

See also