Organize Pages
diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/flatten-form-fields.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/flatten-form-fields.md
new file mode 100644
index 0000000000..0e82db5903
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/flatten-form-fields.md
@@ -0,0 +1,104 @@
+---
+layout: post
+title: Flatten Form Fields in ASP.NET Core PDF Viewer | Syncfusion
+description: Flatten interactive PDF form fields in the ASP.NET Core PDF Viewer before downloading or saving the PDF so the fields become static content.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Flatten Form Fields in ASP.NET Core PDF Viewer
+
+## Overview
+
+Flattening PDF forms converts interactive fields such as textboxes, dropdowns, checkboxes, signatures, etc., into non-editable page content. Use this when you want to protect filled data, finalize a document, or prepare it for secure sharing.
+
+## Prerequisites
+
+- ASP.NET Core PDF Viewer installed and configured. For more information, see [getting started guide](../getting-started)
+- Basic viewer setup completed with the toolbar and page organizer. For more information, see [getting started guide](../getting-started)
+
+## Flatten forms before downloading PDF
+
+1. Access the viewer instance from the `ejs-pdfviewer` element so you can use the viewer APIs from event handlers.
+2. Intercept the download flow using [`downloadStart`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_DownloadStart) and cancel the default flow.
+3. Retrieve the viewer's blob via [saveAsBlob()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#saveasblob) and convert the blob to base64.
+4. Use the client-side `ej.pdf.PdfDocument` to open the document, set `field.flatten = true` for each form field, then save.
+5. To flatten the form fields when downloading through the *Save As* option in Page Organizer, repeat steps 2–4 by using the [pageOrganizerSaveAs](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_PageOrganizerSaveAs) event.
+
+## Complete example
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Expected result
+
+- The downloaded or "Save As" PDF will contain the visible appearance of filled form fields as static, non-editable content.
+- Form fields will no longer be interactive or editable in common PDF readers.
+
+## Troubleshooting
+
+- If the viewer instance is null, ensure the `ejs-pdfviewer` element is rendered and the DOM is ready before invoking [saveAsBlob()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#saveasblob).
+- Missing [resourceUrl](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ResourceUrl): If viewer resources are not reachable, set [resourceUrl](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ResourceUrl) to the correct CDN or local path for the ej2-pdfviewer-lib.
+
+## Related topics
+
+- [`downloadStart` event reference](../events#downloadstart)
+- [`pageOrganizerSaveAs` event reference](../events#pageorganizersaveas)
+- [Form Designer in ASP.NET Core PDF Viewer](./form-designer)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/form-handling-best-practices.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/form-handling-best-practices.md
new file mode 100644
index 0000000000..6ce22392f3
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/form-handling-best-practices.md
@@ -0,0 +1,114 @@
+---
+layout: post
+title: Form Handling Best Practices in ASP.NET Core PDF Viewer | Syncfusion
+description: Recommended best practices for naming, validating, grouping, importing, and designing form fields in the ASP.NET Core PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# PDF Form Handling Best Practices in ASP.NET Core PDF Viewer
+
+This guide provides a comprehensive overview of recommended practices for creating, organizing, validating, and automating PDF forms in the ASP.NET Core PDF Viewer.
+
+It explains how to structure field names, ensure consistency, apply validation rules, group related fields, and streamline workflows through pre-filling and data import/export. By following these guidelines, you can build clean, reliable, and efficient form experiences that are easier to maintain and work seamlessly across different use cases.
+
+## 1. Use Clear and Unique Field Names
+
+Field names are critical for automation, data mapping, and debugging. Always:
+
+- Use descriptive, unique names for each field (e.g., `FirstName`, `InvoiceNumber`).
+- Avoid generic names like `Textbox1` or `Field2`.
+- Ensure names are consistent across import/export workflows.
+
+
+
+You can refer to [Create Form Fields](./manage-form-fields/create-form-fields) in the ASP.NET Core PDF Viewer to know more about creating form fields.
+
+## 2. Maintain Consistent Field Types
+
+Changing a field's type (e.g., from textbox to dropdown) can break data mapping and validation. Best practices:
+
+- Do not change a field's type after creation.
+- Fields with the same name must always have the same type.
+- Use the correct field type for the intended data (e.g., checkbox for boolean, textbox for free text).
+
+
+
+You can refer to [Group Form Fields](./group-form-fields) in the ASP.NET Core PDF Viewer to know more about grouping form fields.
+
+## 3. Validate Data Before Submission
+
+Validation ensures data quality and prevents errors downstream. Always:
+
+- Mark required fields and check for empty values.
+- Validate formats (email, phone, numbers, etc.).
+- Use custom validation logic for business rules.
+- Prevent submission or export if validation fails.
+
+You can refer to [Form Validation](./form-validation) in the PDF Viewer to know more about form fields validation.
+
+## 4. Pre-Fill Known Values
+
+Pre-filling fields improves user experience and reduces errors. For example:
+
+- Populate user profile data (name, email, address) automatically.
+- Use default values for common fields.
+
+
+
+You can refer to [Form Filling](./form-filling) in the ASP.NET Core PDF Viewer to know more about form filling.
+
+## 5. Automate with Import/Export
+
+Automate workflows by importing/exporting form data. Recommendations:
+
+- Use **JSON** for web apps and REST APIs.
+- Use **XFDF/FDF** for Adobe workflows.
+- Use **XML** for legacy systems.
+- Ensure field names match exactly for successful mapping.
+
+You can refer to [Export/Import Form fields](./import-export-form-fields/export-form-fields) in the ASP.NET Core PDF Viewer to know more about export and import form fields.
+
+## 6. Group Related Fields for Complex Forms
+
+Group fields logically for better structure and easier validation. Examples:
+
+- Address sections (Street, City, State, ZIP)
+- Invoice line items
+- Repeated form subsections
+
+Benefits:
+
+- Structured exported data
+- Easier validation
+- Improved user experience
+
+
+
+You can refer to [Group Form Fields](./group-form-fields) in the ASP.NET Core PDF Viewer to know more about grouping form fields.
+
+## 7. Keep Form Design Clean and Accessible
+
+Good design improves usability and accessibility. Tips:
+
+- Maintain consistent spacing and alignment (use grid layouts).
+- Use uniform field widths and clear labels.
+- Avoid clutter - don't crowd too many fields in one area.
+- Use section headers to guide users.
+
+
+
+You can refer to [Customize Form Fields](./manage-form-fields/customize-form-fields) in the ASP.NET Core PDF Viewer to know more about styling form fields.
+
+## See Also
+
+- [Filling PDF Forms](./form-filling)
+- [Create Form Fields](./manage-form-fields/create-form-fields)
+- [Modify Form Fields](./manage-form-fields/modify-form-fields)
+- [Style Form Fields](./manage-form-fields/customize-form-fields)
+- [Remove Form Fields](./manage-form-fields/remove-form-fields)
+- [Group Form Fields](./group-form-fields)
+- [Form Validation](./form-validation)
+- [Import and Export Form Fields](./import-export-form-fields/export-form-fields)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/read-form-field-values.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/read-form-field-values.md
new file mode 100644
index 0000000000..00d3786a64
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/read-form-field-values.md
@@ -0,0 +1,106 @@
+---
+layout: post
+title: Read Form Field Values in ASP.NET Core PDF Viewer | Syncfusion
+description: Read and extract values from PDF form fields in the ASP.NET Core PDF Viewer, including text, checkboxes, radio buttons, dropdowns, and signatures.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Read and Extract Form Field Values in ASP.NET Core PDF Viewer
+
+The ASP.NET Core PDF Viewer allows you to read the values of interactive PDF form fields including textboxes, checkboxes, radio buttons, dropdowns, signatures, and more. Use the APIs below to retrieve form data programmatically for validation, submission, or syncing with your application.
+
+This guide shows common patterns with concise code snippets you can copy into your cshtml views.
+
+## Access the Form Field Collection
+
+Get all available form field data by reading the viewer's `formFieldCollections`. For more information, see [`formFieldCollections`](./form-fields-api#formfieldcollections).
+
+```js
+var formFields = pdfviewer.formFieldCollections;
+```
+
+## Read Text Field Values
+
+Find the text field by name and read its value property. For more information, see [`formFieldCollections`](./form-fields-api#formfieldcollections).
+
+```js
+var formFields = pdfviewer.formFieldCollections;
+var name = (formFields.find(field => field.type === 'Textbox' && field.name === 'name')).value;
+```
+
+## Read Checkbox / Radio Button Values
+
+Check whether a checkbox or radio button is selected by reading its `isChecked` value. For more information, see [`formFieldCollections`](./form-fields-api#formfieldcollections).
+
+```js
+var formFields = pdfviewer.formFieldCollections;
+var radioButtons = formFields.filter(field => field.type === 'RadioButton' && field.name === 'gender');
+var checkedField = (radioButtons.find(field => field.isChecked)).name;
+```
+
+## Read Dropdown values
+
+Read the dropdown's selected option by accessing its `value` property. For more information, see [`formFieldCollections`](./form-fields-api#formfieldcollections).
+
+```js
+var formFields = pdfviewer.formFieldCollections;
+var state = (formFields.find(field => field.type === 'DropdownList' && field.name === 'state')).value;
+```
+
+## Read Signature Field Data
+
+This reads the signature path data stored in a signature field so it can be later converted to an image. For more information, see [`formFieldCollections`](./form-fields-api#formfieldcollections).
+
+```js
+var formFields = pdfviewer.formFieldCollections;
+var signData = (formFields.find(field => field.type === 'SignatureField' && field.name === 'signature')).value;
+```
+
+## Extract All Form Field Values
+
+This iterates every field in the collection and logs each field's name and value, useful for exporting or validating all form data. For more information, see [`formFieldCollections`](./form-fields-api#formfieldcollections).
+
+```js
+var formFields = pdfviewer.formFieldCollections;
+formFields.forEach(field => {
+ if (field.type === 'RadioButton' || field.type === 'Checkbox') {
+ console.log(`${field.name}: ${field.isChecked}`);
+ }
+ else {
+ console.log(`${field.name}: ${field.value}`);
+ }
+});
+```
+
+## Extract Form Data After Document Loaded
+
+Place your form-reading logic inside `documentLoad` event handler, so values are read after the PDF is loaded in the viewer. For more information, see [`formFieldCollections`](./form-fields-api#formfieldcollections) and [`documentLoad`](../event#documentload).
+
+```js
+// If you need to access form data right after the PDF loads
+pdfviewer.documentLoad = function () {
+ var formFields = pdfviewer.formFieldCollections;
+ var email = formFields.find(field => field.name === 'email').value;
+ console.log('Email: ', email);
+};
+```
+
+## Use Cases
+
+- Validate and pre-fill form fields in your application before user submission.
+- Submit filled form data from the viewer to a back end service for processing or storage.
+- Synchronize form field values with external UI components to keep application state in sync.
+- Export form data for reporting, archival, or integration with other systems.
+
+## Troubleshooting
+
+- Use the exact field names defined in the PDF when searching through the `formFieldCollections`.
+- If a field might be missing in some documents, add null checks.
+
+## See also
+
+- [`formFieldCollections`](./form-fields-api#formfieldcollections)
+- [`documentLoad`](../event#documentload)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/submit-form-data.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/submit-form-data.md
new file mode 100644
index 0000000000..a7dbf654c4
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/submit-form-data.md
@@ -0,0 +1,110 @@
+---
+layout: post
+title: Submit Form Data in ASP.NET Core PDF Viewer | Syncfusion
+description: Submit filled PDF form data from the ASP.NET Core PDF Viewer to a backend server, with a complete frontend example to get you started.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Submit Form Data to a Server in ASP.NET Core PDF Viewer
+
+## Overview
+
+The ASP.NET Core PDF Viewer allows submitting filled form data like text fields, checkboxes, radio buttons, and dropdown values to a back end server for processing. This guide shows how to extract form data from the viewer and **post** it as `JSON` to a server endpoint.
+
+## Prerequisites
+
+- ASP.NET Core PDF Viewer installed and configured in your application
+- PDF contains interactive form fields
+- The viewer must be loaded before reading values
+- If posting cross-origin, ensure CORS is enabled on the server
+
+## Steps to send data
+
+1. Enable form fields in the viewer
+
+ - Enable the Form Fields and [Form Designer](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.formdesigner.html) modules on the viewer so form APIs are available.
+
+2. Export form data from the viewer
+
+ - Use [exportFormFieldsAsObject()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#exportformfieldsasobject) with the `Json` format to obtain the filled values as JSON.
+
+3. POST the exported JSON to your back end
+
+ - Use `fetch` to send the JSON. The server must accept `application/json` and handle CORS if cross-domain.
+
+4. Trigger submission from a UI action
+
+ - Call the export + POST flow from a button click handler.
+
+## Example
+
+This full example shows an ASP.NET Core view with the PDF viewer and a Submit button that sends form data to `/api/submit-form`.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Troubleshooting
+
+- **No form values returned**: Ensure the PDF has interactive fields and the viewer has finished loading before calling [exportFormFieldsAsObject()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#exportformfieldsasobject).
+- **CORS errors**: Enable CORS on the server or serve both the view and back end from the same origin during testing.
+- **Server rejects payload**: Confirm the server expects `application/json` and validates the shape of the object.
+- **WASM or resource errors**: Ensure [resourceUrl](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ResourceUrl) points to the correct ASP.NET Core PDF Viewer library files.
+
+## Use cases
+
+- Enable remote verification and approval workflows by sending submitted form data to a back end service for review and sign-off.
+- Store submitted form responses in a database to persist user inputs for auditing, reporting, or later retrieval.
+- Trigger workflow automation and downstream processing by sending form data to business systems or server-less functions.
+- Merge submitted values into a final flattened PDF on the server to produce a non-editable document that combines the form data with the original PDF.
+
+## Related topics
+
+- [exportFormFieldsAsObject API reference](./form-fields-api#exportformfieldsasobject)
+- [Export form data as object](./import-export-form-fields/export-form-fields#export-as-object)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/toolbar-customization/annotation-toolbar.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/toolbar-customization/annotation-toolbar.md
index 58cc2b26c3..3475534623 100644
--- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/toolbar-customization/annotation-toolbar.md
+++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/toolbar-customization/annotation-toolbar.md
@@ -3,48 +3,40 @@ layout: post
title: Annotation Toolbar in ASP.NET Core PDF Viewer | Syncfusion
description: Customize the annotation toolbar in the ASP.NET Core PDF Viewer to show, hide, or replace the default annotation actions for your users.
platform: document-processing
-control: Annotation Toolbar Customization
+control: PDF Viewer
documentation: ug
---
# Customize the Annotation Toolbar in ASP.NET Core PDF Viewer
-Customize the annotation toolbar by showing or hiding default items and controlling their order.
+## Overview
-## Show or hide the annotation toolbar
+This guide shows how to show or hide the annotation toolbar and how to choose which tools appear and their order.
-Toggle the annotation toolbar programmatically during initialization or at runtime.
+**Outcome**: A working ASP.NET Core example that toggles the annotation toolbar and uses [`annotationToolbarItems`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings.html#Syncfusion_EJ2_PdfViewer_PdfViewerToolbarSettings_AnnotationToolbarItems) to customize the toolbar.
-Use the [EnableAnnotationToolbar](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_EnableAnnotationToolbar) property or the [showAnnotationToolbar](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/toolbar#showannotationtoolbar) method to change visibility.
+## Prerequisites
-The following code snippet shows how to show or hide the annotation toolbar using the `showAnnotationToolbar` method.
+- EJ2 ASP.NET Core PDF Viewer installed and added to your project. See [getting started guide](../getting-started)
+- A valid [`resourceUrl`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PdfViewer.PdfViewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ResourceUrl) or [`serviceUrl`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PdfViewer.PdfViewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ServiceUrl) for accessing PDF Viewer assets
-{% tabs %}
-{% highlight cshtml tabtitle="Standalone" %}
+## Steps
-
-
-
-
-
+### 1. Show or hide the annotation toolbar
-
+Toggle the annotation toolbar programmatically during initialization or at runtime.
-{% endhighlight %}
-{% highlight cshtml tabtitle="Server-Backed" %}
+Use the [`enableAnnotationToolbar`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_EnableAnnotationToolbar) property or the [`showAnnotationToolbar`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/toolbar#showannotationtoolbar) method to change visibility.
+
+**Example using the `showAnnotationToolbar()` method:**
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
@@ -59,15 +51,15 @@ The following code snippet shows how to show or hide the annotation toolbar usin
{% endhighlight %}
{% endtabs %}
-## How to customize the annotation toolbar
+### 2. Show or hide annotation toolbar items
-Select which tools appear and set their order in the annotation toolbar.
+Use [`annotationToolbarItems`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings.html#Syncfusion_EJ2_PdfViewer_PdfViewerToolbarSettings_AnnotationToolbarItems) with a list of [`AnnotationToolbarItem`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings.html) values. The toolbar shows only items in this list.
-Configure the [`PdfViewerToolbarSettings`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings.html) with the [`AnnotationToolbarItems`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings.html#Syncfusion_EJ2_PdfViewer_PdfViewerToolbarSettings_AnnotationToolbarItems) property to specify which tools appear. The property accepts a list of `AnnotationToolbarItem` values. Only listed items are displayed and the render order follows the list sequence.
+Configure the [`toolbarSettings`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings.html) property to specify which annotation tools appear. The property accepts a list of `AnnotationToolbarItem` values. Only listed items are displayed and the render order follows the list sequence.
The annotation toolbar appears when entering annotation mode in the PdfViewer and adapts responsively to available width. Include the Close tool to enable exiting the annotation toolbar.
-The following example demonstrates how to customize the annotation toolbar by specifying a set of tools using `AnnotationToolbarItem`.
+**Example customizing the annotation toolbar:**
{% tabs %}
{% highlight cshtml tabtitle="Standalone" %}
@@ -80,15 +72,25 @@ The following example demonstrates how to customize the annotation toolbar by sp
{% endhighlight %}
-{% highlight cshtml tabtitle="Server-Backed" %}
+{% endtabs %}
-
-
-
-
+## Expected result
-{% endhighlight %}
-{% endtabs %}
+- The annotation toolbar shows only the items you list in [`annotationToolbarItems`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings.html#Syncfusion_EJ2_PdfViewer_PdfViewerToolbarSettings_AnnotationToolbarItems).
+- Tools appear in the order specified in the configuration.
+
+## Troubleshooting
+
+- **Annotation toolbar tools do not appear**
+ - **Cause**: Invalid item names or Annotation and Toolbar services not injected.
+ - **Solution**: Verify item names match the predefined list and ensure both Toolbar and Annotation services are enabled in the PDF Viewer.
+
+- **Annotation toolbar does not show at runtime**
+ - **Cause**: Annotation mode not activated or service not properly configured.
+ - **Solution**: Ensure the user has activated annotation mode and the viewer is properly initialized with annotation support.
+
+## Related topics
+
+- [Customize form designer toolbar](./form-designer-toolbar)
+- [Customize primary toolbar](./primary-toolbar)
+- [Customize mobile toolbar](./mobile-toolbar)
diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/toolbar-customization/form-designer-toolbar.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/toolbar-customization/form-designer-toolbar.md
index 7f621d99c5..d22c558949 100644
--- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/toolbar-customization/form-designer-toolbar.md
+++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/toolbar-customization/form-designer-toolbar.md
@@ -9,15 +9,26 @@ documentation: ug
# Customize the Form Designer Toolbar in ASP.NET Core PDF Viewer
-The form designer toolbar can be customized by showing or hiding default items and by controlling their order.
+## Overview
-## Show or hide the form designer toolbar
+This guide shows how to show or hide the form designer toolbar, and how to configure which tools appear and their order.
+
+**Outcome**: A working ASP.NET Core example customizing the form designer toolbar.
+
+## Prerequisites
+
+- EJ2 ASP.NET Core PDF Viewer installed and added to your project. See [getting started guide](../getting-started)
+- A valid [`resourceUrl`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PdfViewer.PdfViewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ResourceUrl) or [`serviceUrl`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PdfViewer.PdfViewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ServiceUrl) for accessing PDF Viewer assets
+
+## Steps
+
+### 1. Show or hide Form Designer toolbar at initialization
Toggle the form designer toolbar programmatically during initialization or at runtime.
-Use the [EnableFormDesigner](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_EnableFormDesigner) property or the [showFormDesignerToolbar](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/toolbar#showformdesignertoolbar) method to change visibility.
+Use the [`enableFormDesigner`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_EnableFormDesigner) property or the [`showFormDesignerToolbar`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/toolbar#showformdesignertoolbar) method to change visibility.
-The following code snippet shows how to enable the form designer toolbar using the `EnableFormDesigner` property.
+**Example using the `enableFormDesigner` property:**
{% tabs %}
{% highlight cshtml tabtitle="Standalone" %}
@@ -30,26 +41,19 @@ The following code snippet shows how to enable the form designer toolbar using t
{% endhighlight %}
-{% highlight cshtml tabtitle="Server-Backed" %}
+{% endtabs %}
-
-
-
-
+### 2. Show or hide Form Designer toolbar at runtime
-{% endhighlight %}
-{% endtabs %}
+Set the [`enableFormDesigner`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_EnableFormDesigner) property on the viewer's instance to toggle form designer visibility at runtime.
-## How to customize the form designer toolbar
+### 3. Show or hide form designer toolbar items
-Choose which tools appear and control their order in the form designer toolbar.
+Use [`formDesignerToolbarItems`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings.html#Syncfusion_EJ2_PdfViewer_PdfViewerToolbarSettings_FormDesignerToolbarItems) and supply an ordered list of [`FormDesignerToolbarItem`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings.html) values.
-Configure the [`PdfViewerToolbarSettings`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings.html) with the [`FormDesignerToolbarItems`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings.html#Syncfusion_EJ2_PdfViewer_PdfViewerToolbarSettings_FormDesignerToolbarItems) property to specify which form design tools are available. The property accepts a list of `FormDesignerToolbarItem` values; included items are displayed and rendered in the order listed while omitted items are hidden. This yields a streamlined form-design experience across devices.
+Configure the [`toolbarSettings`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings.html) property to specify which form design tools are available. The property accepts a list of `FormDesignerToolbarItem` values; included items are displayed and rendered in the order listed while omitted items are hidden. This yields a streamlined form-design experience across devices.
-The following example demonstrates how to customize the form designer toolbar by configuring specific tools using `FormDesignerToolbarItem`.
+**Example customizing the form designer toolbar:**
{% tabs %}
{% highlight cshtml tabtitle="Standalone" %}
@@ -62,15 +66,25 @@ The following example demonstrates how to customize the form designer toolbar by
{% endhighlight %}
-{% highlight cshtml tabtitle="Server-Backed" %}
+{% endtabs %}
-
-
-
-
+## Expected result
-{% endhighlight %}
-{% endtabs %}
\ No newline at end of file
+- The form designer toolbar appears (or is hidden) according to [`enableFormDesigner`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_EnableFormDesigner).
+- Only the listed tools appear.
+
+## Troubleshooting
+
+- **Toolbar or form designer tools do not appear**
+ - **Cause**: [`FormDesigner`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PdfViewer.FormDesigner.html) or [`Toolbar`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PdfViewer.Toolbar.html) service not injected or enabled.
+ - **Solution**: Ensure [`enableFormDesigner`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_EnableFormDesigner) is set to `true` and the Toolbar service is enabled in the PDF Viewer.
+
+- **Form designer tools not responding to clicks**
+ - **Cause**: Form designer module not fully loaded or document doesn't support form fields.
+ - **Solution**: Ensure the document is loaded before enabling form designer mode, and verify the PDF supports form fields.
+
+## Related topics
+
+- [Customize primary toolbar](./primary-toolbar)
+- [Customize annotation toolbar](./annotation-toolbar)
+- [Customize mobile toolbar](./mobile-toolbar)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/toolbar-customization/mobile-toolbar.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/toolbar-customization/mobile-toolbar.md
index 4a53eaf270..317fae2ad7 100644
--- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/toolbar-customization/mobile-toolbar.md
+++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/toolbar-customization/mobile-toolbar.md
@@ -1,57 +1,36 @@
---
layout: post
-title: Mobile Toolbar in ASP.NET Core PDF Viewer | Syncfusion
+title: Customize Mobile Toolbar in ASP.NET Core PDF Viewer | Syncfusion
description: Customize the mobile toolbar in the ASP.NET Core PDF Viewer to ensure smooth touch interactions and a tailored experience on small screens.
platform: document-processing
control: PDF Viewer
documentation: ug
---
-# Customize the Mobile Toolbar in ASP.NET Core PDF Viewer
-
-The mobile PDF Viewer provides features for viewing, searching, annotating, and managing PDF documents on mobile devices. It includes tools such as search, download, bookmarking, annotation, and page organization. The viewer can enable desktop toolbar features in mobile mode to expose a broader set of actions.
-
-## Mobile Mode Toolbar Configuration
-In mobile mode, the toolbar is optimized for small screens and presents the most common actions for interacting with a PDF document. Below are the key features available in mobile mode:
-
-
-
-### Main toolbar options
-
-**OpenOption:** Loads a PDF document.
-
-**SearchOption:** Opens the search bar to locate text within the document.
-
-
-**UndoRedoTool:** Undoes or redoes recent annotation changes.
-
-**OrganizePagesTool:** Toggles page organization features to modify document pages.
-
-
-
-**AnnotationEditTool:** Enables or disables annotation editing for adding or modifying annotations.
+# Customize the Mobile Toolbar in ASP.NET Core PDF Viewer
-
+## Overview
+This guide explains how to enable the desktop toolbar on mobile devices running the ASP.NET Core PDF Viewer, and how to preserve touch scrolling when the desktop toolbar is used.
-N> In mobile mode, the annotation toolbar is displayed at the bottom of the viewer.
+**Outcome**: A working ASP.NET Core example with desktop toolbar enabled on mobile.
-### More options menu
-Opening the "more options" menu reveals additional actions such as:
+## Prerequisites
-**DownloadOption:** Downloads the currently opened PDF document.
+- EJ2 ASP.NET Core PDF Viewer installed and added to your project. See [getting started guide](../getting-started)
+- A valid [`resourceUrl`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PdfViewer.PdfViewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ResourceUrl) or [`serviceUrl`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PdfViewer.PdfViewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ServiceUrl) for accessing PDF Viewer assets
-**BookmarkOption:** Displays bookmarks within the document.
+## Steps
-
+### 1. Mobile Mode Toolbar Overview
-## Enabling Desktop Mode in Mobile
+The mobile PDF Viewer provides features for viewing, searching, annotating, and managing PDF documents on mobile devices. It includes tools such as search, download, bookmarking, annotation, and page organization. The viewer can enable desktop toolbar features in mobile mode to expose a broader set of actions.
-Enable desktop mode on mobile devices by setting the `enableDesktopMode` API to `true`. Enabling desktop mode replaces the mobile toolbar with the desktop toolbar layout and exposes additional toolbar actions.
+### 2. Enable desktop toolbar on mobile
-### Steps to Enable Desktop Mode:
+Enable desktop mode on mobile devices by setting [`enableDesktopMode`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_EnableDesktopMode) to `true`. Enabling desktop mode replaces the mobile toolbar with the desktop toolbar layout and exposes additional toolbar actions.
-**Step 1:** Set `enableDesktopMode` to true in the API configuration.
+**Step 1:** Set `enableDesktopMode` to `true` in the API configuration.
**Step 2:** This will replace the mobile toolbar with the desktop toolbar layout, allowing access to more actions and controls.
@@ -65,23 +44,12 @@ Enable desktop mode on mobile devices by setting the `enableDesktopMode` API to
-{% endhighlight %}
-{% highlight cshtml tabtitle="Server-Backed" %}
-
-
-
-
-
-
{% endhighlight %}
{% endtabs %}
-## Enable Scrolling in Desktop Mode with Touch Gestures
+### 3. Preserve touch scrolling in desktop mode
-To ensure smooth scrolling of PDF documents on a mobile device in desktop mode, enable touch gesture scrolling by setting the `enableTextSelection` option to **false**.
+To ensure smooth scrolling of PDF documents on a mobile device in desktop mode, disable text selection by setting [`enableTextSelection`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_EnableTextSelection) to `false`.
{% tabs %}
{% highlight cshtml tabtitle="Standalone" %}
@@ -94,27 +62,34 @@ To ensure smooth scrolling of PDF documents on a mobile device in desktop mode,
{% endhighlight %}
-{% highlight cshtml tabtitle="Server-Backed" %}
+{% endtabs %}
-
-
-
-
+## Expected result
-{% endhighlight %}
-{% endtabs %}
+- Desktop toolbar displays on mobile devices with [`enableDesktopMode`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_EnableDesktopMode) enabled.
+- Touch scrolling remains smooth with [`enableTextSelection`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_EnableTextSelection) disabled.
+- Print functionality is available only in desktop mode.
+
+## Troubleshooting
-## Print Option Not Available
+- **Print option not visible on mobile**
+ - **Cause**: Desktop mode not enabled.
+ - **Solution**: Set [`enableDesktopMode`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_EnableDesktopMode) to `true` to enable the desktop toolbar on mobile.
-The Print option is not available in mobile mode by default. Enable desktop mode on mobile using the `enableDesktopMode` API to access the print option.
+- **Touch scrolling is jerky after enabling desktop toolbar**
+ - **Cause**: Text selection is capturing touch events.
+ - **Solution**: Set [`enableTextSelection`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_EnableTextSelection) to `false` to avoid text-selection capturing touch events.
-### How to Use Print on Mobile:
+- **Missing assets or broken UI**
+ - **Cause**: `resourceUrl` is incorrect or unreachable.
+ - **Solution**: Verify [`resourceUrl`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PdfViewer.PdfViewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ResourceUrl) points to the correct version of the `ej2-pdfviewer-lib` and is reachable from the device.
-**Enable Desktop Mode:** Set `enableDesktopMode` to true to load the desktop version of the toolbar on your mobile device.
+- **Server errors in server-backed mode**
+ - **Cause**: CORS issues or back-end service not running.
+ - **Solution**: Verify [`serviceUrl`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PdfViewer.PdfViewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ServiceUrl) CORS configuration and that the back-end is running.
-**Print Option:** Once desktop mode is enabled, the print option will be available, allowing you to print the document directly from your mobile device.
+## Related topics
-N> In mobile mode, print functionality remains unavailable unless desktop mode is enabled.
\ No newline at end of file
+- [Customize form designer toolbar](./form-designer-toolbar)
+- [Customize annotation toolbar](./annotation-toolbar)
+- [Create a custom toolbar](./custom-toolbar)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/toolbar-customization/overview.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/toolbar-customization/overview.md
new file mode 100644
index 0000000000..700346d34c
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/toolbar-customization/overview.md
@@ -0,0 +1,71 @@
+---
+layout: post
+title: ASP.NET Core PDF Viewer Toolbar Customization | Syncfusion
+description: Learn about introduction of the Syncfusion ASP.NET Core PDF Viewer Toolbar Customization section and the key capabilities it provides.
+control: PDF Viewer
+platform: document-processing
+documentation: ug
+---
+
+# About Syncfusion ASP.NET Core PDF Viewer Toolbar Customization
+
+## Overview
+
+This page provides a concise reference describing the toolbars available in the EJ2 ASP.NET Core PDF Viewer component. It also explains what each toolbar is for and when it appears.
+
+**Scope**: covers available toolbars and their functions.
+
+## List of available toolbars
+
+- [Primary toolbar](#primary-toolbar)
+- [Annotation toolbar](#annotation-toolbar)
+- [Form Designer toolbar](#form-designer-toolbar)
+- [Mobile toolbar](#mobile-toolbar)
+- [Custom toolbar](./custom-toolbar)
+
+## Functional overview of each toolbar
+
+### Primary toolbar
+
+The primary toolbar presents core viewer actions such as open/load, page navigation, zoom controls, and print. It appears in standard desktop layouts and at the top of the viewer when `Toolbar` service is injected. Typical actions: page forward/back, zoom in/out, fit-to-page, print.
+
+
+
+### Annotation toolbar
+
+The annotation toolbar surfaces annotation-related tools for adding, editing, and deleting annotations (text markup, shapes, stamps). It appears when annotation services are enabled and when a user opens annotation mode. Typical actions: highlight, underline, draw shape, add sticky note, delete annotation.
+
+
+
+### Form Designer toolbar
+
+Form designer toolbar provides form-field authoring controls used when designing or editing form fields inside a PDF. It appears when `FormDesigner` is enabled (design mode) and contains actions for adding form field controls.
+
+
+
+### Mobile toolbar
+
+- A compact toolbar layout optimized for small screens and touch interactions. It appears automatically on mobile-sized view ports (or when a mobile layout is explicitly chosen) and contains the most frequently used actions in a space-efficient arrangement.
+
+ 
+
+- Annotation toolbar in mobile mode appears at the bottom of the PDF Viewer component.
+
+ 
+
+## Show or hide toolbar items
+
+The following quick links describe how to customize, show, or hide specific toolbar items. Each linked page defines custom toolbar configurations and examples.
+
+- [Show or hide annotation toolbar items](./annotation-toolbar#2-show-or-hide-annotation-toolbar-items)
+- [Show or hide form designer toolbar items](./form-designer-toolbar#3-show-or-hide-form-designer-toolbar-items)
+- [Show or hide primary toolbar items](./primary-toolbar#3-show-or-hide-primary-toolbar-items)
+- [Add a custom primary toolbar item](./primary-toolbar#4-add-a-custom-primary-toolbar-item)
+
+## Further Reading
+
+- [Customize annotation toolbar](./annotation-toolbar)
+- [Customize form designer toolbar](./form-designer-toolbar)
+- [Customize mobile toolbar](./mobile-toolbar)
+- [Customize primary toolbar](./primary-toolbar)
+- [Create a custom toolbar](./custom-toolbar)
diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/toolbar-customization/primary-toolbar.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/toolbar-customization/primary-toolbar.md
index 82a09aa4d6..034ce6d811 100644
--- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/toolbar-customization/primary-toolbar.md
+++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/toolbar-customization/primary-toolbar.md
@@ -9,65 +9,50 @@ documentation: ug
# Customize the Primary Toolbar in ASP.NET Core PDF Viewer
-The primary toolbar of the PDF Viewer can be customized by rearranging existing items, disabling default items, and adding custom items. New items can be inserted at specific index positions among existing items.
+## Overview
-## Show or hide the primary toolbar
+This guide explains how to show or hide the primary toolbar, remove default items, and add custom toolbar items.
-Toggle the built-in primary toolbar to create custom toolbar experiences or simplify the UI. When a custom toolbar is required, hide the built-in toolbar. Use the [enableToolbar] (https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_EnableToolbar) property or the [showToolbar] (https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/toolbar/#showtoolbar) method to show or hide the primary toolbar.
+**Outcome**: Working ASP.NET Core example customizing the primary toolbar.
-Use the `enableToolbar` property to show or hide the toolbar:
+## Prerequisites
-{% tabs %}
-{% highlight cshtml tabtitle="Standalone" %}
+- EJ2 ASP.NET Core PDF Viewer installed and added to your project. See [getting started guide](../getting-started)
+- A valid [`resourceUrl`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PdfViewer.PdfViewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ResourceUrl) or [`serviceUrl`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PdfViewer.PdfViewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ServiceUrl) for accessing PDF Viewer assets
-
-
-
-
+## Steps
-{% endhighlight %}
-{% highlight cshtml tabtitle="Server-Backed" %}
+### 1. Show or hide primary toolbar at initialization
-
-
-
-
+Set [`enableToolbar`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_EnableToolbar) to `false` to hide the built-in toolbar.
-{% endhighlight %}
-{% endtabs %}
+### 2. Show or hide primary toolbar at runtime
-The following code snippet shows how to show or hide the toolbar using the `showToolbar` method.
+Use the viewer's [`showToolbar()`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/toolbar#showtoolbar) method to show or hide dynamically.
+
+**Example with enableToolbar property:**
{% tabs %}
{% highlight cshtml tabtitle="Standalone" %}
@@ -83,11 +68,11 @@ The following code snippet shows how to show or hide the toolbar using the `show
{% endhighlight %}
{% endtabs %}
-## Show or hide toolbar items
+### 3. Show or hide primary toolbar items
-The PDF Viewer provides options to show or hide grouped items in the built-in toolbar.
+The PDF Viewer provides options to show or hide grouped items in the built-in toolbar. You can configure which items appear and their order using the [`toolbarSettings`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings.html) property with the [`ToolbarItems`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings.html#Syncfusion_EJ2_PdfViewer_PdfViewerToolbarSettings_ToolbarItems) collection.
-* Show or hide toolbar items using `toolbarSettings`:
+**Show or hide toolbar items using `toolbarSettings`:**
{% tabs %}
{% highlight cshtml tabtitle="Standalone" %}
@@ -101,23 +86,10 @@ The PDF Viewer provides options to show or hide grouped items in the built-in to
-
{% endhighlight %}
{% endtabs %}
-* Show or hide toolbar items using `showToolbarItem`:
+**Show or hide toolbar items using `showToolbarItem()` method:**
{% tabs %}
{% highlight cshtml tabtitle="Standalone" %}
@@ -137,31 +109,14 @@ The PDF Viewer provides options to show or hide grouped items in the built-in to
}
-{% endhighlight %}
-{% highlight cshtml tabtitle="Server-Backed" %}
-
-
-
-
-
-
-
-
{% endhighlight %}
{% endtabs %}
-## Customize the built-in toolbar
+### 4. Add a custom primary toolbar item
+
+Add custom toolbar items by defining them with unique IDs and handling their click events via the [`toolbarClick`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ToolbarClick) event.
-The PDF Viewer supports customization of existing toolbar items (add, show, hide, enable, and disable).
+The PDF Viewer supports full customization of existing toolbar items (add, show, hide, enable, and disable).
- Add: Define new items using `CustomToolbarItemModel` and include them with existing items via the [`ToolbarSettings`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings.html) property. Handle item interactions in the `toolbarClick` event.
@@ -241,50 +196,6 @@ The PDF Viewer supports customization of existing toolbar items (add, show, hide
-{% endhighlight %}
-{% highlight html tabtitle="Server-Backed" %}
-
-@page "{handler?}"
-@model IndexModel
-@using Syncfusion.EJ2.PdfViewer
-@using Newtonsoft.Json
-@{
- ViewData["Title"] = "Home page";
- CustomToolbarItems customToolbarItems = new CustomToolbarItems();
- var toolItem1 = new { id = "submit_form", text = "Submit Form", tooltipText = "Custom toolbar item", align = "Center", cssClass = "custom_button" };
- customToolbarItems.ToolbarItems = new List