Syncfusion Aspnetmvc Pdf Viewer

Syncfusion ASP.NET MVC Pdfviewer – UI Sample Generator

NuGet: Syncfusion.EJ2.MVC5

Generate Code for the User's Project (default)

Trigger keywords: "how to", "add pdfviewer", "code sample", "show me", "example", "snippet", "integrate", "component", "create sample", "ASP.NET MVC sample".

Purpose: Generate minimal, copy-pasteable Razor + HTML code (.cshtml) that the user can integrate directly into their ASP.NET MVC project.

Workflow: ⚠️ CRITICAL — Feature Support Policy (STRICT MODE):

FUNDAMENTAL RULE: Only generate code using APIs and properties that are EXPLICITLY listed in the reference files. ANY deviation is a VIOLATION.

• MANDATORY CHECKS BEFORE GENERATING ANY CODE:

1. Search the reference files for the exact API/property name 2. Verify it appears in the Method Reference, Properties, or Events tables 3. If NOT found in ANY reference file, STOP immediately 4. Do NOT generate or suggest undocumented APIs under any circumstances

• STRICT ENFORCEMENT - ZERO TOLERANCE:
• NO custom properties - Only use properties from reference file tables
• NO invented methods - Only use methods from reference file tables
• NO workarounds with undefined APIs - Forbidden
• NO assumptions about undocumented behavior - Forbidden
• NO alternative implementations using guess-work - Forbidden
• NO pretending support exists - Forbidden

• MANDATORY RESPONSE FOR UNSUPPORTED FEATURES:
• If a requested scenario/feature/API is NOT listed in any reference file, you MUST respond with:

    "This feature is not supported in the current Syncfusion ASP.NET MVC PDF Viewer implementation."

• Then list what IS supported from the appropriate reference file
• Never suggest alternatives unless explicitly documented in reference files

• REFERENCE FILE HIERARCHY:
• Each reference file contains complete, authoritative documentation for its domain
• The tables (Method Reference, Properties, Events) are the SOURCE OF TRUTH
• Content outside these tables in reference files is explanatory only
• Do NOT extend beyond what appears in the reference file tables

• AUDIT YOUR GENERATION:
• Before providing any code, verify EVERY API used appears in a reference file table
• Document which reference file each API comes from
• If you cannot cite a reference file table entry, DELETE that code

• This is a CRITICAL REQUIREMENT. Violations compromise the skill's integrity and reliability.

Step 1 — Generate Code from Reference Files Only (REQUIRED)

• Read the relevant references/*.md file(s) for the requested feature
• Cross-reference EVERY API, property, and method against these tables
• MANDATORY: Before generating ANY code, verify that reference files exist and are accessible
• Read the appropriate reference file(s) for the requested feature:
• Use read_file tool on relevant references/*.md files
• Confirm file contains Methods/Properties/Events tables
• Verify tables are complete and readable
• If reference file is missing or cannot be read:
• STOP code generation
• Respond: "Reference file for this feature is not available. Please ensure all reference files are present in the references/ directory."
• List the missing reference file name
• This is a BLOCKER step: Cannot proceed without reference file validation
• If an API/property does NOT appear in the reference file table, DO NOT USE IT
• Do NOT invent, guess, or suggest any API, method, property, class, or namespace not explicitly present in the reference files

---

⚙️ SETTINGS CONFIGURATION BEST PRACTICES

When generating code with settings (toolbarSettings, annotationSettings, annotationSelectorSettings, arrowSettings, rectangleSettings, etc.), follow these guidelines to prevent unnecessary imports and over-engineering:

Rule 1: Simple Settings → Define as Razor inline code

Use this approach when:

• Configuring only 1-3 properties
• Settings are straightforward without custom types

Example (DO THIS):

@Html.EJS().PdfViewer("pdfviewer").AnnotationSelectorSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerAnnotationSelectorSettings { ResizerBorderColor = "green", SelectionBorderColor = "blue", ResizerFillColor = "#4070ff", resizerSize = 8, SelectionBorderThickness = 1, SelectorLineDashArray = new int[] { 5, 6 }, ResizerLocation = "Corners|Edges", ResizerCursorType = "grab" }).Render()

Benefits:

• ✅ Simple and readable
• ✅ Less code clutter
• ✅ Type checking still works

---

Rule 2: Complex Settings → Define as Razor code blocks outside HTML

Use this approach when:

• Configuring 4+ properties OR multiple related settings
• Using enums or complex configurations
• Need to reuse the same configuration across multiple components
• Settings are complex enough to warrant separate definition

Example (DO THIS ONLY FOR COMPLEX CASES):

@{
    var annotationSelectorSettings = new {
        selectionBorderColor = "blue",
        resizerBorderColor = "red",
        resizerFillColor = "#4070ff",
        resizerSize = 8,
        selectionBorderThickness = 1,
        resizerShape = "Circle",
        selectorLineDashArray = new int[] { 5, 6 },
        resizerLocation = "Corners|Edges",
        resizerCursorType = "grab"
    };
}
@Html.EJS().PdfViewer("pdfviewer").AnnotationSelectorSettings(annotationSelectorSettings).Render()

---

Rule 3: NEVER Over-Engineer Simple Cases

❌ DO NOT DO THIS (Over-engineered):

@{
    var toolbarSettings = new Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings  { ShowTooltip = true };
}
@Html.EJS().PdfViewer("pdfviewer").ToolbarSettings(@toolbarSettings).Render()

✅ DO THIS INSTEAD (Simple & Clean):

@Html.EJS().PdfViewer("pdfviewer").ToolbarSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings  { ShowTooltip = true }).Render()

---

Reference File Routing Guide

All templates and operation snippets live in references/*.md. Each file is a focused snippet or template the agent will combine when generating samples.

Flow: Always start with getting-started.md, then merge matched features into its anchors (PROPS, EVENTS, UI_BUTTONS, HANDLERS). If no keyword matches, return only the basic sample.

Checklist Before Generating Code

• [ ] Count the settings properties: 1-3? → Use inline | 4+? → Use separate razor code block
• [ ] Is the component prop simple enough? Yes → Keep inline | No → Extract to separate razor code block
• [ ] Are Default values set for properties explicitly? Yes → Remove | No → Keep it

🎯 MVC Setup & Configuration

Context Menu

Navigation Features

MVC Viewing and Interaction

Toolbar Configuration

Annotations and Markup

Forms Management

Text Operations

Document Operations

⚙️ Advanced Features

---

Syncfusion ASP.NET MVC PDF Viewer — Skill

Overview

The syncfusion-aspnetmvc-pdf-viewer skill enables AI-assisted code generation for the Syncfusion ASP.NET MVC PDF Viewer. It produces minimal, copy-pasteable Razor markup and C# code to embed, configure, and interact with PDF documents inside ASP.NET MVC web applications.

---

Compatibility

---

Skill Structure

syncfusion-aspnetmvc-pdf-viewer/
├── SKILL.md                      # Skill rules, routing, and code generation guidelines
├── README.md                     # This file
└── references/
    ├── getting-started.md        # Minimal setup & initialization template
    ├── opening-pdfs.md           # Load PDFs from various sources (URL, local, stream)
    ├── enable-properties.md      # Feature toggle properties (toolbar, annotation, forms, etc.)
    ├── viewing-and-interaction.md # Display modes, interaction, and user control
    ├── navigation.md             # Page navigation (first, last, next, previous, goto)
    ├── bookmark-navigation.md    # Bookmark panel and outline navigation
    ├── magnification.md          # Zoom levels, zoom modes, fit-to-page/width
    ├── text-selection.md         # Enable text select, copy, and selection events
    ├── text-search.md            # Find text in PDF with search options
    ├── toolbar-customization.md  # Customize toolbar items, visibility, and behavior
    ├── contextmenu.md            # Right-click context menu customization
    ├── annotation-overview.md    # Annotation capabilities and types
    ├── annotation-settings.md    # Annotation appearance (colors, opacity, author, styles)
    ├── annotation-events.md      # Annotation lifecycle events (add, delete, move, etc.)
    ├── annotation-operations.md  # Annotation API methods and programmatic control
    ├── annotation-use-cases.md   # Common annotation patterns and workflows
    ├── shape-annotations.md      # Rectangle, circle, line shape annotations
    ├── measurement-annotations.md # Measurement tool configurations
    ├── free-text-annotations.md  # Text annotation creation and styling
    ├── stamp-annotation.md       # Stamp annotations and presets
    ├── text-markup-annotations.md # Highlight, underline, strikethrough annotations
    ├── form-fields-overview.md   # Form field capabilities and field types
    ├── form-fields-props.md      # Form field properties and defaults
    ├── form-field-settings.md    # Configure default properties for form fields
    ├── form-field-events.md      # Form field interaction events (focus, blur, change)
    ├── form-field-validation.md  # Form field validation and constraints
    ├── form-operations.md        # Import/export form data and programmatic access
    ├── supported-form-fields.md  # List of supported form field types
    ├── import-export-form-data.md # Import and export form field values
    ├── download.md               # PDF download configuration and customization
    ├── printing-and-organizing.md # Print configuration and page organization
    ├── saving-and-downloading.md # Save and download options
    ├── api-methods.md            # Programmatic API (load, export, undo/redo, extract)
    └── events.md                 # Complete PDF Viewer event reference

---

Quick Start

Step 1: Create ASP.NET MVC Project

1. Open Visual Studio and select Create a new project 2. Select ASP.NET Web Application (.NET Framework) 3. Enter your project name and location 4. Click Create 5. In the next dialog, select MVC as the project template 6. Click Create

Visual Studio 2022 Alternative:

1. Create a new project using ASP.NET MVC Web Application template 2. Select the target framework (.NET Framework 4.7.2 or later recommended) 3. Click Create

Step 2: Install NuGet Packages

Install the required Syncfusion NuGet package:

Package Manager Console:

Install-Package Syncfusion.EJ2.MVC5

NuGet Package Manager UI: 1. Right-click project → Manage NuGet Packages 2. Search for Syncfusion.EJ2.MVC5 3. Click Install

Step 3: Add Namespace

Add the Syncfusion.EJ2 namespace to Web.config in the Views folder.

Open ~/Views/Web.config and locate the <namespaces> section. Add the following namespace:

<namespaces>
    <add namespace="Syncfusion.EJ2"/>
</namespaces>

Step 4: Add Styles (CDN)

Reference the Syncfusion theme in ~/Views/Shared/_Layout.cshtml inside the <head> tag:

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewBag.Title - PDF Viewer</title>
    
    <!-- Syncfusion ASP.NET MVC controls styles -->
    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/31.1.23/fluent.css" />
</head>

Step 5: Add Scripts (CDN)

Add the Syncfusion JavaScript library in _Layout.cshtml inside the <head> tag:

<head>
    <!-- ... theme CSS ... -->
    
    <!-- Syncfusion ASP.NET MVC controls scripts -->
    <script src="https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2.min.js"></script>
</head>

Step 6: Register Script Manager

Register the Syncfusion script manager at the end of the `<body>` tag in _Layout.cshtml:

<body>
    <!-- Other content -->
    
    <!-- Syncfusion ASP.NET MVC Script Manager -->
    @Html.EJS().ScriptManager()
</body>

Important: The @Html.EJS().ScriptManager() must be placed at the end of the <body> element to ensure proper initialization.

Step 7: Add PDF Viewer Component

Add the PDF Viewer to ~/Views/Home/Index.cshtml:

@{
    ViewBag.Title = "Home Page";
}

<div>
    <div style="height:500px;width:100%;">
        @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render()
    </div>
</div>

Component Properties:

• PdfViewer() - Creates a PDF Viewer component with the specified ID
• DocumentPath() - URL or path to the PDF document to display (required)
• Render() - Renders the component HTML

Note: The DocumentPath property is essential for loading a PDF file in the PDF Viewer.

Step 8: Configure Local Resources (Standalone)

To load resources locally with the PDF Viewer, follow these steps:

Step 8a: Create the folder structure under Content:

Content/
├── ej2-pdfviewer-lib/
│   ├── pdfium.js
│   └── pdfium.wasm
└── pdfsuccinctly.pdf

Step 8b: Update Index.cshtml to use local paths:

@{
    ViewBag.Title = "Home Page";
    var originUrl = $"{Request.Url.Scheme}://{Request.Url.Authority}";
    var document = originUrl + "/Content/pdfsuccinctly.pdf";
    var resourceUrl = originUrl + "/Content/ej2-pdfviewer-lib";
}

<div style="height: 900px;width:100%;">
    @Html.EJS().PdfViewer("pdfviewer").ResourceUrl(@resourceUrl).DocumentPath(@document).Render()
</div>

Property Explanations:

• DocumentPath() - Full URL to the PDF file (must be publicly accessible)
• ResourceUrl() - URL to the folder containing pdfium.js and pdfium.wasm files

---

Available Features

---

Reference File Routing

Use the table below to find the correct reference file for any feature.

MVC Setup

Navigation

Viewing & Interaction

Toolbar & Context Menu

Annotations

Forms

Document Actions

Advanced / API

---

Annotation Events

Brief: Annotation events in ASP.NET MVC PDF Viewer are triggered when annotations are added, removed, moved, resized, selected, or modified on PDF document pages. These events enable custom workflows and UI updates based on annotation interactions.

How to Use the Event in PDF Viewer

@Html.EJS().PdfViewer("pdfviewer").EventName("eventHandler").Render()

<script type="text/javascript">
    function eventHandler(args) {
        // Method Execution
        console.log('Event triggered:', args);
    }
</script>

Note: The complete setup and component structure is available in the getting-started.md file.

---

Annotation Events

---

Annotation Object Reference

Rect Object

Review Object

AnnotationSettings Object

AnnotationSelectorSettings Object

LabelSettings Object

Font Object

Calibrate Object

Bounds Object

VertexPoint Object

---

Common Use Cases

Tracking Annotation Changes

<script>
function onAnnotationMove(args) {
  // Track annotation movement for telemetry
  logEvent('annotation_moved', {
    annotationId: args.annotationId,
    page: args.pageIndex,
    timestamp: new Date().toISOString()
  });
}
</script>

Preventing Certain Actions

<script>
function onBeforeAddFreeText(args) {
  // Prevent free text annotation on specific pages
  if (args.pageIndex === 0) {
    args.cancel = true;
  }
}
</script>

Accessing Annotation Properties

<script>
function onAnnotationSelect(args) {
  // Access complete annotation details
  const annotation = args.annotation;
  console.log('Color:', annotation.color);
  console.log('Opacity:', annotation.opacity);
  console.log('Type:', annotation.type);
  console.log('Author:', annotation.author);
  console.log('Bounds:', annotation.bounds);
  console.log('Rect:', annotation.rect);
  
  // Update UI with annotation properties
  updatePropertiesPanel(args.annotationId, annotation);
}
</script>

Validating Property Changes

<script>
function onAnnotationPropertiesChange(args) {
  if (args.isColorChanged) {
    console.log('Annotation color changed to:', args.annotation.color);
  }
  if (args.isThicknessChanged) {
    console.log('Annotation thickness changed');
  }
  if (args.isOpacityChanged) {
    console.log('Annotation opacity changed to:', args.annotation.opacity);
  }
}
</script>

Handling Multiple Selections

<script>
function onAnnotationSelect(args) {
  if (args.isMultiSelect) {
    console.log('Multiple annotations selected');
    console.log('Selected annotations count:', args.annotationCollection.length);
    args.annotationCollection.forEach((annotation) => {
      console.log('Annotation ID:', annotation.annotationId);
    });
  } else {
    console.log('Single annotation selected:', args.annotationId);
  }
}
</script>

Common Annotation Operations

Selecting Annotations

Programmatic selection:

Select the annotations programmatically using annotation object or annotation Id using selectAnnotation(annotationId)

function selectAnnotation(annotationId) {
    var viewer = document.getElementById('pdfviewer').ej2_instances[0];
    viewer.annotation.selectAnnotation(annotationId);
}

Parameter

Returns

void

---

Moving and Resizing

Programmatic repositioning:

function moveAnnotation() {
    var viewer = document.getElementById('pdfviewer').ej2_instances[0];
    for (let i = 0; i < viewer.annotationCollection.length; i++) {
        var annotation = viewer.annotationCollection[i];
        if (annotation.annotationId === targetId) {
            annotation.bounds.x = 150;
            annotation.bounds.y = 200;
            viewer.annotation.editAnnotation(annotation);
        }
    }
}

---

Deleting Annotations

Delete the annotations programmatically using the deleteAnnotationById(annotationId) of the annotation module of PDF Viewer instance.

Programmatic deletion:

function deleteAnnotation(annotationId) {
    var viewer = document.getElementById('pdfviewer').ej2_instances[0];
    viewer.annotation.deleteAnnotationById(annotationId);
}

Parameter

Returns

void

---

Locking Annotations

Locked annotations cannot be edited or deleted by users:

function lockAnnotation() {
    var viewer = document.getElementById('pdfviewer').ej2_instances[0];
    for (let i = 0; i < viewer.annotationCollection.length; i++) {
        var annotation = viewer.annotationCollection[i];
        if (annotation.annotationId === targetId) {
            annotation.annotationSettings.isLock = true;
            viewer.annotation.editAnnotation(annotation);
        }
    }
}

Importing and Exporting

Export annotations programmatically using the exportAnnotation(AnnotationDataFormat) method of PDF Viewer instance.

Export annotations:

function exportAnnotations() {
    var viewer = document.getElementById('pdfviewer').ej2_instances[0];
    viewer.exportAnnotation();
}

Parameter

Returns

void

Returns

void

Import annotations:

Import annotations using importAnnotation(importData, AnnotationDataFormat) method of PDF Viewer instance

function importAnnotations(annotationData) {
    var viewer = document.getElementById('pdfviewer').ej2_instances[0];
    viewer.importAnnotation(annotationData);
}

Parameter

Returns

void

---

AnnotationDataFormat

Types for annotation file types

• Json
• Xfdf

Type

string

Annotations Overview: ASP.NET MVC PDF Viewer

Purpose: Guide to implementing PDF annotations including shapes, text markup, stamps, ink drawings, sticky notes, free text, signatures, and measurements.

---

Table of Contents

1. Annotation Types and Capabilities 2. Ink Annotations 3. Sticky Notes 4. Handwritten Signatures 5. Configure Default Annotation Settings ---

Annotation Types and Capabilities

The PDF Viewer provides comprehensive annotation features for document markup, collaboration, and review workflows. Eight primary annotation categories support diverse use cases:

Common capabilities across all annotation types:

• Programmatic creation and editing via APIs
• Toolbar-based UI for manual addition
• Customizable appearance (colors, thickness, opacity)
• Default property configuration
• Save/load annotation data
• Annotation locking and permissions

---

Ink Annotations

Ink annotations enable freehand drawing for sketches, handwritten marks, and signatures using mouse, touchpad, or stylus input.

Adding Ink Annotations

Programmatic creation:

function addInkAnnotation() {
    var viewer = document.getElementById('pdfviewer').ej2_instances[0];
    viewer.annotation.addAnnotation("Ink", {
        offset: { x: 150, y: 100 },
        pageNumber: 1,
        width: 200,
        height: 60,
        path: '[{"command":"M","x":244.83,"y":982.00},{"command":"L","x":250.83,"y":953.33}...]' // SVG path data
    });
}

Customizing Ink Appearance

Available properties:

• Stroke Color - Drawing line color
• Thickness - Line width (1-12px range)
• Opacity - Transparency (0.0-1.0 range)

Default settings:

@Html.EJS().PdfViewer("pdfviewer").InkAnnotationSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerInkAnnotationSettings {Author="Reviewer", StrokeColor="green", Thickness=3, Opacity=0.6}).Render()

---

Sticky Notes

Sticky notes provide clickable markers for attaching comments and threaded discussions to specific document locations.

Adding Sticky Notes

Via toolbar: 1. Click Comments button in toolbar 2. Click on desired page location 3. Sticky note marker appears at clicked position 4. Right-click note → Select Comment to add text

Programmatic creation:

function addStickyNote() {
    var viewer = document.getElementById('pdfviewer').ej2_instances[0];
    viewer.annotation.addAnnotation("StickyNotes", {
        offset: { x: 100, y: 200 },
        pageNumber: 1,
        isLock: false
    });
}

Working with Comments

Comment operations:

• Add new comment text
• Edit existing comments
• Delete comments
• Reply to comments (threaded discussions)
• Mark comment status (Review/Done/Cancelled)

Comment panel:

• Access via Comment Panel button in toolbar
• View all comments across document
• Filter by status or author
• Navigate to comment locations

Default Settings

@Html.EJS().PdfViewer("pdfviewer").StickyNotesSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerStickyNotesSettings {Author="Reviewer", Opacity=0.9}).Render()

---

Handwritten Signatures

Handwritten signature annotations enable digital document signing with drawn, typed, or uploaded signature formats.

Enabling Signatures

@Html.EJS().PdfViewer("pdfviewer").EnableHandwrittenSignature(true).Render()

Adding Signatures

Programmatic creation:

function addHandwrittenSignature() {
    var viewer = document.getElementById('pdfviewer').ej2_instances[0];
    viewer.annotation.addAnnotation("HandWrittenSignature", {
        offset: { x: 220, y: 180 },
        pageNumber: 1,
        width: 150,
        height: 60,
        signatureItem: ['Signature'],
        signatureDialogSettings: {
            displayMode: ej.pdfviewer.DisplayMode.Draw
        },
        canSave: true,
        path: '[{"command":"M","x":244.83...}]' // SVG path for drawn signature
    });
}

Signature vs. Initial

The PDF Viewer supports two signature annotation types:

• Signature - Full signature for primary signing
• Initial - Abbreviated initials for secondary approval

Both use identical capture methods and configuration.

Default Signature Settings

@Html.EJS().PdfViewer("pdfviewer").HandWrittenSignatureSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerHandWrittenSignatureSettings {Opacity=0.7, StrokeColor="blue", Thickness=2}).Render()

---

Default Annotation Settings

Configure consistent annotation behavior across the PDF Viewer by setting default properties during initialization:

Comprehensive Configuration Example

<!--Standalone Mode with All Annotation Settings-->
@Html.EJS().PdfViewer("pdfviewer").LineSettings=(new Syncfusion.EJ2.PdfViewer.PdfViewerLineSettings {FillColor="blue", Opacity=0.6, StrokeColor="green", Thickness=2}).ArrowSettings=(new Syncfusion.EJ2.PdfViewer.PdfViewerArrowSettings {FillColor="green", Opacity=0.6, StrokeColor="blue"}).RectangleSettings=(new Syncfusion.EJ2.PdfViewer.PdfViewerRectangleSettings {FillColor="yellow", Opacity=0.6, StrokeColor="orange"}).CircleSettings=(new Syncfusion.EJ2.PdfViewer.PdfViewerCircleSettings {FillColor="orange", Opacity=0.6, StrokeColor="pink"}).PolygonSettings=(new Syncfusion.EJ2.PdfViewer.PdfViewerPolygonSettings {FillColor="pink", Opacity=0.6, StrokeColor="yellow"}).StampSettings=(new Syncfusion.EJ2.PdfViewer.PdfViewerStampSettings {Opacity=0.3, Author="Reviewer"}).StickyNotesSettings=(new Syncfusion.EJ2.PdfViewer.PdfViewerStickyNotesSettings {Author="Reviewer"}).FreeTextSettings=(new Syncfusion.EJ2.PdfViewer.PdfViewerFreeTextSettings {FillColor="lightblue", BorderColor="navy", FontColor="black"}).InkAnnotationSettings=(new Syncfusion.EJ2.PdfViewer.PdfViewerInkAnnotationSettings {Author="Reviewer", StrokeColor="red", Thickness=3, Opacity=0.6}).HandWrittenSignatureSettings=(new Syncfusion.EJ2.PdfViewer.PdfViewerHandWrittenSignatureSettings {Opacity=0.7, StrokeColor="darkblue", Thickness=2}).DistanceSettings=(new Syncfusion.EJ2.PdfViewer.PdfViewerDistanceSettings {FillColor="blue", Opacity=0.6, StrokeColor="green"}).PerimeterSettings=(new Syncfusion.EJ2.PdfViewer.PdfViewerPerimeterSettings {FillColor="green", Opacity=0.6, StrokeColor="blue"}).AreaSettings=(new Syncfusion.EJ2.PdfViewer.PdfViewerAreaSettings {FillColor="yellow", Opacity=0.6, StrokeColor="orange"}).RadiusSettings=(new Syncfusion.EJ2.PdfViewer.PdfViewerRadiusSettings {FillColor="orange", Opacity=0.6, StrokeColor="pink"}).VolumeSettings=(new Syncfusion.EJ2.PdfViewer.PdfViewerVolumeSettings {FillColor="pink", Opacity=0.6, StrokeColor="yellow"}).MeasurementSettings=(new Syncfusion.EJ2.PdfViewer.PdfViewerMeasurementSettings {ScaleRatio=1, ConversionUnit=Syncfusion.EJ2.PdfViewer.CalibrationUnit.In}).Render()

---

Annotation Settings in ASP.NET MVC PDF Viewer Component

It provides functionality to manage and initialize annotation settings for a PDF viewer, such as author details, custom data, interaction settings, and restrictions on download or printing. It ensures that the settings are initialized and updated whenever parameters are set.

How to Use the Settings in PDF Viewer (Need to use any one of the below implementations)

Usage

@Html.EJS().PdfViewer("pdfviewer").HighlightSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerHighlightSettings { Color = "green", Opacity = 0.6 }).Render()

Note: The complete setup and component structure is available in the getting-started.md file.

List of Annotations

List of Settings in PdfViewer

Settings Properties Reference

Defines the annotation selector settings for all types of annotations.

Annotation-Related Component Properties

Apply for All Annotations

These properties are available to control annotation-related functionality:

AnnotationSelectorSettings

Defines the annotation selector settings for all types of annotations. See table for the properties of annotation selector settings.

Apply for All Annotations

@Html.EJS().PdfViewer("pdfviewer").AnnotationSelectorSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerAnnotationSelectorSettings { ResizerBorderColor = "green" }).Render()

Apply for Specific Annotation Type

@Html.EJS().PdfViewer("pdfviewer").AreaSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerAreaSettings { AnnotationSelectorSettings = new Syncfusion.EJ2.PdfViewer.PdfViewerAnnotationSelectorSettings { ResizerBorderColor = "green" } }).Render()

Note: The complete setup and component structure is available in the getting-started.md file.

List of Settings Properties

AnnotationSelectorSettings

CursorType

AnnotationResizerLocation

AnnotationResizerShape

LineHeadStyle

CustomStampSettings

FontStyle

TextAlignment

CalibrationUnit

DynamicStampItem

SignStampItem

StandardBusinessStampItem

AnnotationDrawingOptions

SignatureFitMode

• Default
• Stretch

SignatureDialogSettings

DisplayMode

Common Annotation Use Cases

1. Document Review and Approval Workflow

Scenario: Legal department reviewing contracts

// Reviewer adds comments and stamps
function reviewDocument() {
    var viewer = document.getElementById('pdfviewer').ej2_instances[0];
    
    // Add sticky note for clause discussion
    viewer.annotation.addAnnotation("StickyNotes", {
        offset: { x: 450, y: 200 },
        pageNumber: 2
    });
    
    // Add highlight to important section
    viewer.annotation.setAnnotationMode('Highlight');
    // User selects text, then:
    
    // Add approval stamp
    viewer.annotation.addAnnotation("Stamp", {
        offset: { x: 400, y: 700 },
        pageNumber: 5
    }, 'Approved');
}

2. Technical Drawing Markup

Scenario: Engineering team reviewing blueprints

// Add measurement annotations with scale
function markupBlueprint() {
    var viewer = document.getElementById('pdfviewer').ej2_instances[0];
    
    // Configure scale (1 inch = 10 feet)
    viewer.measurementSettings = {
        scaleRatio: 10,
        conversionUnit: ej.pdfviewer.CalibrationUnit.Ft
    };
    
    // Add distance measurement
    viewer.annotation.addAnnotation("Distance", {
        offset: { x: 100, y: 150 },
        pageNumber: 1,
        vertexPoints: [{ x: 100, y: 150 }, { x: 400, y: 150 }]
    });
    
    // Add area calculation for room
    viewer.annotation.addAnnotation("Area", {
        offset: { x: 150, y: 300 },
        pageNumber: 1,
        vertexPoints: [
            { x: 150, y: 300 },
            { x: 350, y: 300 },
            { x: 350, y: 500 },
            { x: 150, y: 500 },
            { x: 150, y: 300 }
        ]
    });
}

3. Form Filling and Signature Collection

Scenario: HR collecting signed employment agreements

// Add form fields and signature placeholders
function prepareEmploymentForm() {
    var viewer = document.getElementById('pdfviewer').ej2_instances[0];
    
    // Add free text fields for employee information
    viewer.annotation.addAnnotation("FreeText", {
        offset: { x: 200, y: 100 },
        pageNumber: 1,
        width: 200,
        height: 30,
        defaultText: "Employee Name:",
        fontSize: 12,
        fontFamily: "Arial"
    });
    
    // Add signature placeholder
    viewer.annotation.addAnnotation("FreeText", {
        offset: { x: 200, y: 650 },
        pageNumber: 3,
        width: 200,
        height: 40,
        defaultText: "Signature:",
        fontSize: 10,
        borderStyle: 'dashed',
        borderColor: 'gray'
    });
    
    // Add date stamp
    viewer.annotation.addAnnotation("Stamp", {
        offset: { x: 450, y: 650 },
        pageNumber: 3
    }, 'Final');
}

4. Collaborative Document Review

Scenario: Team reviewing project proposal

// Multiple reviewers adding feedback
function collaborativeReview() {
    var viewer = document.getElementById('pdfviewer').ej2_instances[0];
    
    // Configure author for tracking
    viewer.stickyNotesSettings = {
        author: "John Doe"
    };
    
    // Add sticky note with comment
    viewer.annotation.addAnnotation("StickyNotes", {
        offset: { x: 500, y: 250 },
        pageNumber: 1,
        author: "John Doe"
    });
    // User adds comment text via UI
    
    // Highlight key section
    viewer.annotation.setAnnotationMode('Highlight');
    // User selects text
    
    // Add strikethrough for suggested deletion
    viewer.annotation.setAnnotationMode('Strikethrough');
    // User selects text to mark
}

5. Quality Assurance Markup

Scenario: QA team marking defects on product diagrams

// Add visual markers for issues
function markDefects() {
    var viewer = document.getElementById('pdfviewer').ej2_instances[0];
    
    // Circle defect location
    viewer.annotation.addAnnotation("Circle", {
        offset: { x: 250, y: 300 },
        pageNumber: 1,
        width: 60,
        height: 60,
        strokeColor: "red",
        thickness: 3
    });
    
    // Add arrow pointing to issue
    viewer.annotation.addAnnotation("Arrow", {
        offset: { x: 280, y: 330 },
        pageNumber: 1,
        vertexPoints: [
            { x: 280, y: 330 },
            { x: 350, y: 380 }
        ],
        strokeColor: "red"
    });
    
    // Add free text note
    viewer.annotation.addAnnotation("FreeText", {
        offset: { x: 360, y: 380 },
        pageNumber: 1,
        width: 150,
        height: 60,
        defaultText: "Defect ID: QA-2024-001\nSeverity: High\nArea: Top-right corner",
        fontSize: 10,
        fillColor: "lightyellow",
        borderColor: "red"
    });
}

6. Educational Content Annotation

Scenario: Instructor marking up course materials

// Add teaching annotations
function annotateCourseMaterial() {
    var viewer = document.getElementById('pdfviewer').ej2_instances[0];
    
    // Highlight key concepts
    viewer.annotation.setAnnotationMode('Highlight');
    // Instructor selects important text
    
    // Add sticky note with additional explanation
    viewer.annotation.addAnnotation("StickyNotes", {
        offset: { x: 50, y: 200 },
        pageNumber: 3
    });
    
    // Draw attention arrow
    viewer.annotation.addAnnotation("Arrow", {
        offset: { x: 100, y: 400 },
        pageNumber: 3,
        vertexPoints: [
            { x: 100, y: 400 },
            { x: 250, y: 450 }
        ],
        strokeColor: "blue",
        thickness: 2
    });
    
    // Add text box with study tip
    viewer.annotation.addAnnotation("FreeText", {
        offset: { x: 260, y: 455 },
        pageNumber: 3,
        width: 200,
        height: 50,
        defaultText: "💡 Study Tip: Review section 3.2 before exam",
        fontSize: 11,
        fillColor: "lightgreen"
    });
}

API Methods in ASP.NET MVC PdfViewer Component

The ASP.NET MVC PdfViewer component provides comprehensive API methods to control and interact with PDF documents, form fields, annotations, and viewer functionality. These methods enable programmatic access to all major operations.

List of Methods

Common Parameter Types

IPoint

Used for coordinate points in the PDF viewer.

IRect

Used for rectangular regions in the PDF document.

PageInfo

Contains information about a specific page in the PDF document.

FormField

Represents a form field in the PDF document.

PdfAnnotationBase

Base class for PDF annotations.

CustomToolbarItem

Represents a custom toolbar menu item.

ExtractTextOptions

Represents a custom toolbar menu item.

Basic Usage Example

Load PDF Document

<script>
    var pdfViewer = document.getElementById('pdfViewer').ej2_instances[0];
    pdfViewer.load('loaded document.pdf');
</script>

Download PDF

<script>
    var pdfViewer = document.getElementById('pdfViewer').ej2_instances[0];
    pdfViewer.download();
</script>

Export Annotations

<script>
    var pdfViewer = document.getElementById('pdfViewer').ej2_instances[0];
    var annotations = pdfViewer.exportAnnotation();
    console.log(annotations);
</script>

Note: The complete setup and component structure is available in the getting-started.md file.

Bookmark Navigation

Brief: Bookmark navigation enables users to navigate through embedded PDF bookmarks. The ASP.NET MVC PDF Viewer automatically loads and presents bookmarks for easy document traversal. Use the goToBookmark method to navigate to specific bookmarks and getBookmarks to retrieve all available bookmarks in a PDF document.

Enabling Bookmark Navigation

Enable bookmark functionality in the PDF Viewer component to display and interact with bookmarks embedded in the PDF document.

Property

EnableBookmark="true"

Description

Enables the bookmark panel in the PDF Viewer, allowing users to view and navigate through document bookmarks.

Usage

@Html.EJS().PdfViewer("pdfviewer").EnableBookmark(true).Render()

Note: The complete setup and component structure is available in the getting-started.md file.

---

Navigate to Bookmark

Use the goToBookmark method to programmatically navigate to a specific bookmark location within the PDF document.

Method

goToBookmark(x, y)

Description

Navigates to a specific bookmark location in the PDF document. The method throws an error if the specified bookmark does not exist in the document.

Parameters

• x: (number) The zero-based page index to navigate to
• y: (number) The vertical Y coordinate on the target page to position the viewport

Usage

var onGoToBookmark = function() {
  // Navigate to page index 0 with Y coordinate 100
  var pdfViewer = document.getElementById('pdfViewer').ej2_instances[0];
  if (pdfViewer) {
    pdfViewer.bookmark.goToBookmark(0, 100);
  }
};

// Button integration
<button onclick="onGoToBookmark()">Go to Specific Bookmark</button>

Note: The complete setup and component structure is available in the getting-started.md file.

Behavior

• The method requires a valid page index (x parameter)
• The Y coordinate (y parameter) determines the vertical position on the target page
• An error is thrown if the page index is invalid or bookmark doesn't exist
• The view updates immediately upon successful navigation

---

Retrieve All Bookmarks

Use the getBookmarks method to retrieve a complete list of all bookmarks available in the PDF document.

Method

getBookmarks()

Description

Retrieves a list of all bookmarks in the PDF document. Returns a collection of Bookmark objects containing information about each bookmark, including title, page references, and hierarchy.

Return Value

• Type: Array of Bookmark objects
• Contains: Bookmark information including titles, page indices, and nested hierarchy

Usage

var onGetBookmarks = function() {
  var pdfViewer = document.getElementById('pdfViewer').ej2_instances[0];
  var bookmarks = pdfViewer && pdfViewer.bookmark.getBookmarks();
  console.log(bookmarks);
  
  // Process bookmarks
  if (bookmarks && bookmarks.length > 0) {
    bookmarks.forEach(function(bookmark, index) {
      console.log('Bookmark ' + index + ': ' + bookmark.title);
    });
  }
};

// Button integration
<button onclick="onGetBookmarks()">Retrieve Bookmarks</button>

Note: The complete setup and component structure is available in the getting-started.md file.

Behavior

• Returns an empty array if the document contains no bookmarks
• Bookmarks maintain their hierarchical structure in the returned list
• The method is non-destructive and does not modify the PDF document
• Can be called at any time during PDF document viewing

---

Bookmark Structure

Bookmark objects returned by getBookmarks() contain the following information:

Bookmark Object Properties

• title: The display name of the bookmark
• page: The zero-based page index the bookmark references
• y: The Y coordinate position on the page
• children: Array of child bookmarks (for nested bookmarks)
• destination: The navigation destination details

Example Bookmark Data Structure

[
  {
    title: "Chapter 1",
    page: 0,
    y: 150,
    children: [
      {
        title: "Section 1.1",
        page: 2,
        y: 200,
        children: []
      },
      {
        title: "Section 1.2",
        page: 5,
        y: 100,
        children: []
      }
    ]
  },
  {
    title: "Chapter 2",
    page: 10,
    y: 50,
    children: []
  }
]

---

Open/close bookmark pane programmatically

Approach 1: Use IsBookmarkPanelOpen property on PDF Viewer instance. Setting it to true opens the bookmark panel. Using it during initialization opens the bookmark panel on load

@Html.EJS().PdfViewer("pdfviewer").IsBookmarkPanelOpen(true);

<script>
  var pdfviewer = document.getElementById('pdfViewer').ej2_instances[0];
  function toggleBookmark(isOpen) {
    if (isOpen) {
      pdfviewer.isBookmarkPanelOpen = true;
    }
    else {
      pdfviewer.isBookmarkPanelOpen = false;
    }
  }
</script>

Approach 2: Use openBookmarkPane() of bookmark module to open bookmark panel and use closeBookmarkPane() of bookmark module to close bookmark panel.

@Html.EJS().PdfViewer("pdfviewer").IsBookmarkPanelOpen(true);

<script>
  var pdfviewer = document.getElementById('pdfViewer').ej2_instances[0];
  function toggleBookmark(isOpen) {
    if (isOpen) {
      pdfviewer.bookmark.openBookmarkPane();
    }
    else {
      pdfviewer.bookmark.closeBookmarkPane();
    }
  }
</script>

Best Practices

1. Always check for valid references before calling bookmark methods:

var pdfViewer = document.getElementById('pdfViewer').ej2_instances[0];
pdfViewer && pdfViewer.bookmark.goToBookmark(pageIndex, yCoordinate);

2. Handle errors gracefully when navigating to bookmarks:

try {
  var pdfViewer = document.getElementById('pdfViewer').ej2_instances[0];
  pdfViewer.bookmark.goToBookmark(pageIndex, yCoordinate);
} catch (error) {
  console.error('Bookmark navigation failed:', error);
}

3. Cache bookmark data if accessing frequently:

var cachedBookmarks = null;
function getAllBookmarks() {
  if (!cachedBookmarks) {
    var pdfViewer = document.getElementById('pdfViewer').ej2_instances[0];
    cachedBookmarks = pdfViewer && pdfViewer.bookmark.getBookmarks();
  }
  return cachedBookmarks;
}

---

Integration Example

Complete example showing bookmark navigation with a bookmark list:

<div style="display: flex; height: 100vh;">
  <div style="width: 200px; overflowY: 'auto'; borderRight: '1px solid #ccc';">
    <h3>Bookmarks</h3>
    <ul id="bookmarkList"></ul>
  </div>
  <div style="flex: 1;">
    @Html.EJS().PdfViewer("pdfviewer").EnableBookmark(true).IsBookmarkPanelOpen(true);
  </div>
</div>

<script>
function populateBookmarks() {
  var pdfViewer = document.getElementById('pdfViewer').ej2_instances[0];
  var allBookmarks = pdfViewer && pdfViewer.bookmark.getBookmarks();
  var bookmarkList = document.getElementById('bookmarkList');
  bookmarkList.innerHTML = '';
  
  if (allBookmarks && allBookmarks.length > 0) {
    allBookmarks.forEach(function(bookmark, index) {
      var li = document.createElement('li');
      li.textContent = bookmark.title;
      li.onclick = function() {
        handleBookmarkClick(bookmark);
      };
      bookmarkList.appendChild(li);
    });
  }
}

function handleBookmarkClick(bookmark) {
  var pdfViewer = document.getElementById('pdfViewer').ej2_instances[0];
  if (pdfViewer) {
    pdfViewer.bookmark.goToBookmark(bookmark.page, bookmark.y);
  }
}

// Populate bookmarks when document loads
function onDocumentLoad () {
  populateBookmarks();
}
</script>

Note: The complete setup and component structure is available in the getting-started.md file.

---

Context Menu

Brief: The ASP.NET MVC PDF Viewer provides a context-aware context menu that dynamically updates based on the right-clicked element. It supports built-in menu items for text, annotations, and form fields, with extensive customization options to add custom items, handle click events, and dynamically show or hide items.

Understanding the Context Menu

The context menu is designed to be context-aware, meaning it dynamically updates its items based on the target element. Right-clicking on different document areas reveals different options suited to the specific element.

MVC Capabilities

The context menu supports:

• Default Behavior: Provides standard actions such as cut, copy, and annotation management.
• Customization: Allows adding new menu items, removing default ones, or reordering them.
• Granular Control: Developers can fully disable the menu or replace it with custom logic.
• Client-side Interaction: Availability and behavior are governed by client-side logic, independent of server-side configurations.

---

Context Menu Component Properties

These properties are available directly on the PdfViewerComponent to control context menu-related functionality:

---

Built-in Context Menu Items

The context menu displays different default items based on the element being right-clicked.

Text Menu Items

When right-clicking on selected text, the following items appear:

Annotation Menu Items

When interacting with annotations, these items are available:

Form Field Menu Items

When the viewer is in designer mode and a form field is selected:

Empty Space Menu Items

When right-clicking on empty space in the document:

---

Add Custom Context Menu Items

Method

addCustomMenu(menuItems, hideDefaultMenu?, addAtBottom?)

Adds custom options to the context menu using the addCustomMenu() method, typically called during the documentLoad event.

Parameters

• menuItems: Array of custom menu item objects
• hideDefaultMenu (optional): Boolean to hide default menu items (default: false)
• addAtBottom (optional): Boolean to add custom items at the bottom of the menu (default: false)

Menu Item Object Structure

Each menu item should have the following properties:

{
  text: string;           // Display text for the menu item
  id: string;             // Unique identifier for the menu item
  iconCss?: string;       // CSS class for the icon (e.g., 'e-icons e-search')
}

Usage

<script>
var menuItems = [
    {
        text: 'Search In Google',
        id: 'search_in_google',
        iconCss: 'e-icons e-search'
    },
    {
        text: 'Lock Annotation',
        iconCss: 'e-icons e-lock',
        id: 'lock_annotation'
    },
    {
        text: 'Unlock Annotation',
        iconCss: 'e-icons e-unlock',
        id: 'unlock_annotation'
    }
];

function documentLoad(args) {
    var pdfViewer = document.getElementById('pdfViewer').ej2_instances[0];
    if (pdfViewer) {
        pdfViewer.addCustomMenu(menuItems, false);
    }
}
</script>

Note: The complete setup and component structure is available in the getting-started.md file.

---

Handle Click Events for Custom Menu Items

Event Method

customContextMenuSelect(args)

Defines actions for custom menu items when they are clicked.

Parameters

• args.id: The unique identifier of the clicked menu item
• args.cancel: Set to false to allow the default action

Usage

<script>
var pdfViewer = document.getElementById('pdfViewer').ej2_instances[0];

function customContextMenuSelect(args) {
    switch (args.id) {
        case 'search_in_google':
            if (pdfViewer.textSelectionModule && pdfViewer.textSelectionModule.isTextSelection) {
                for (var i = 0; i < pdfViewer.textSelectionModule.selectionRangeArray.length; i++) {
                    var content = pdfViewer.textSelectionModule.selectionRangeArray[i].textContent;
                    if (/\S/.test(content)) {
                        window.open('http://google.com/search?q=' + content);
                    }
                }
            }
            break;
        case 'lock_annotation':
            lockAnnotations(args);
            break;
        case 'unlock_annotation':
            unlockAnnotations(args);
            break;
        default:
            break;
    }
}

function lockAnnotations(args) {
    for (var i = 0; i < pdfViewer.annotationCollection.length; i++) {
        if (pdfViewer.annotationCollection[i].uniqueKey === pdfViewer.selectedItems.annotations[0].id) {
            pdfViewer.annotationCollection[i].annotationSettings.isLock = true;
            pdfViewer.annotationCollection[i].isCommentLock = true;
            pdfViewer.annotation.editAnnotation(pdfViewer.annotationCollection[i]);
            args.cancel = false;
        }
    }
}

function unlockAnnotations(args) {
    for (var i = 0; i < pdfViewer.annotationCollection.length; i++) {
        if (pdfViewer.annotationCollection[i].uniqueKey === pdfViewer.selectedItems.annotations[0].id) {
            pdfViewer.annotationCollection[i].annotationSettings.isLock = false;
            pdfViewer.annotationCollection[i].isCommentLock = false;
            pdfViewer.annotation.editAnnotation(pdfViewer.annotationCollection[i]);
            args.cancel = false;
        }
    }
}
</script>

---

Dynamic Context Menu Customization

Event Method

customContextMenuBeforeOpen(args)

Allows for dynamic showing or hiding of menu items based on selection or document state before the context menu is displayed.

Parameters

• args.ids: Array of menu item IDs that are about to be displayed
• args: Event arguments containing menu state information

Usage

<script>
function customContextMenuBeforeOpen(args) {
    var pdfViewer = document.getElementById('pdfViewer').ej2_instances[0];
    for (var i = 0; i < args.ids.length; i++) {
        var menuElement = document.getElementById(args.ids[i]);
        if (menuElement) {
            menuElement.style.display = 'none';
            
            if (args.ids[i] === 'search_in_google' && pdfViewer.textSelectionModule 
                && pdfViewer.textSelectionModule.isTextSelection) {
                menuElement.style.display = 'block';
            }
            else if (args.ids[i] === "lock_annotation" || args.ids[i] === "unlock_annotation") {
                var isLockOption = args.ids[i] === "lock_annotation";
                for (var j = 0; j < pdfViewer.selectedItems.annotations.length; j++) {
                    var selectedAnnotation = pdfViewer.selectedItems.annotations[j];
                    if (selectedAnnotation && selectedAnnotation.annotationSettings) {
                        var shouldDisplay = (isLockOption && !selectedAnnotation.annotationSettings.isLock) ||
                            (!isLockOption && selectedAnnotation.annotationSettings.isLock);
                        menuElement.style.display = shouldDisplay ? 'block' : 'none';
                    }
                }
            }
        }
    }
}
</script>

---

Disable the Context Menu

Property

contextMenuOption

Disables the context menu entirely by setting this property to None.

Usage

@Html.EJS().PdfViewer("pdfviewer").ContextMenuOption("None");

Note: The complete setup and component structure is available in the getting-started.md file.

---

Properties and Enums

ContextMenuSettings

ContextMenuAction

• None
• MouseUp
• RightClick

ContextMenuItem

• Comment
• Copy
• Cut
• Delete
• Highlight
• Paste
• Properties
• ScaleRatio
• Squiggly
• Strikethrough
• TextRedact
• Underline

Important Notes

• Icon Classes: Use Syncfusion EJ2 icon classes (e.g., e-icons e-search, e-icons e-lock, e-icons e-unlock) for custom menu items.
• Event Order: The documentLoad event is the recommended place to call addCustomMenu() to ensure the viewer is fully initialized.

Enable Properties in ASP.NET MVC Syncfusion PDFViewer Component

The ASP.NET MVC PDFViewer component provides a comprehensive set of enable properties to control and customize various features and functionalities of the PDF viewer. These boolean properties allow you to enable or disable specific capabilities such as annotations, form design, navigation, printing, and more.

How to Use the Enable Properties in PDF Viewer

EnableToolbar(true)
EnableNavigation(true)
EnableAnnotation(true)
EnableFormDesigner(true)
EnablePrint(true)
EnableTextSearch(true)
EnableThumbnail(true)
EnableDownload(true)

Note: The complete setup and component structure is available in the getting-started.md file.

List of Enable Properties

Usage Example with Multiple Enable Properties

// Set multiple enable properties on <ejs-pdfviewer>:
@Html.EJS().PdfViewer("pdfviewer").EnableToolbar(true).EnableNavigation(true).EnableAnnotation(true).EnableAnnotationToolbar(true).EnableBookmark(true).EnableCommentPanel(true).EnableFormDesigner(true).EnableFormDesignerToolbar(true).EnableFormFields(true).EnableFormFieldsValidation(true).EnableDownload(true).EnablePrint(true).EnableTextSearch(true).EnableTextSelection(true).EnableThumbnail(true).EnableMagnification(true).EnablePinchZoom(true).EnablePageOrganizer(true).EnableRedactionToolbar(true).EnableHandwrittenSignature(true).EnableZoomOptimization(true).Render()

Important: If a property is assigned a value that is the same as its default value, do not include that property in the output.

Notes

• All enable properties accept boolean values (true or false)
• These properties can be set during component initialization or modified dynamically
• Disabling certain features can improve performance for specific use cases
• Some features may depend on others (e.g., enabling enableAnnotationToolbar requires enableAnnotation to be enabled)

Form Field Validation

Built-in validation ensures required form fields are completed before critical actions (print, download).

Enable Form Field Validation

@Html.EJS().PdfViewer("pdfviewer").EnableFormFieldsValidation(true).Render()

<script>
    pdfviewer.validateFormFields = function(args) {
        // Triggered when user attempts print/download with validation enabled
        if (args && args.formField && args.formField.length > 0) {
            // Handle validation failure
            alert('Please fill all required fields. Missing: ' + args.formField[0].name);
            args.isFormSubmitCancelled = true;  // Cancel print/download
        }
    };
</script>

Mark Fields as Required

// Method 1: When creating field
pdfviewer.formDesignerModule.addFormField('Textbox', {
  name: 'Email',
  isRequired: true  // This field must be filled
});

// Method 2: Set default for field type
pdfviewer.textFieldSettings = { isRequired: true };

// Method 3: Update existing field
var field = pdfviewer.formFieldCollections.find(f => f.name === 'Email');
if (field) {
  pdfviewer.formDesignerModule.updateFormField(field, { isRequired: true });
}

Validation Flow

User clicks Print/Download
  ↓
System checks enableFormFieldsValidation
  ↓ (if enabled)
Validation event triggered with empty required fields list
  ↓
Custom code can:
  - Cancel action (args.isFormSubmitCancelled = true)
  - Show error message
  - Focus invalid field
  - Apply custom validation logic
  ↓
If not cancelled → Action proceeds

Custom Validation Examples

// Example 1: Email format validation
pdfviewer.validateFormFields = function(args) {
  var fields = pdfviewer.retrieveFormFields();
  var emailField = fields.find(f => f.name === 'Email');
  
  if (emailField && emailField.value) {
    var isValidEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailField.value);
    if (!isValidEmail) {
      alert('Invalid email format');
      args.isFormSubmitCancelled = true;
    }
  }
};

// Example 2: At least one checkbox selected
pdfviewer.validateFormFields = function(args) {
  var fields = pdfviewer.retrieveFormFields();
  var checkboxes = fields.filter(f => f.fieldType === 'CheckBox');
  
  var anyChecked = checkboxes.some(f => f.isChecked);
  if (!anyChecked) {
    alert('Please select at least one option');
    args.isFormSubmitCancelled = true;
  }
};

Form Fields Properties and flags

Form Field Properties

Common Properties (All Field Types)

Type-Specific Properties

Textbox/Password:

• maxLength: Maximum characters allowed

CheckBox/RadioButton:

• isChecked: Current checked state

Dropdown/ListBox:

• options: Array of {itemName, itemValue} objects

Signature/Initial:

• Supports draw, type, upload signature methods

---

Form Field Flags and Constraints

Form field flags control how users interact with fields and how they behave during validation and printing.

isReadOnly Flag

Prevents UI modification while allowing API updates. Useful for displaying computed or system-generated values.

pdfviewer.formDesignerModule.addFormField('Textbox', {
  name: 'EmployeeId',
  bounds: { X: 146, Y: 229, Width: 150, Height: 24 },
  isReadOnly: true,
  value: 'EMP-0001'  // User cannot change this
});

Read-only Field Behavior:

• User cannot edit through UI
• Field is grayed out or visually disabled
• API can still update value programmatically
• Ideal for display-only fields with backend values

---

isRequired Flag

Marks field as mandatory. When validation is enabled, required empty fields block print/download.

pdfviewer.formDesignerModule.addFormField('Textbox', {
  name: 'Email',
  bounds: { X: 146, Y: 260, Width: 220, Height: 24 },
  isRequired: true,
  tooltip: 'Email is required'
});

Validation Behavior:

• Only applies if enableFormFieldsValidation = true
• Triggers validation on print/download
• Empty required fields are listed in validation event
• Can prevent action or show error message

---

isPrint Flag

Controls whether field appears in printed PDF output.

// Signature not included in print
pdfviewer.formDesignerModule.addFormField('SignatureField', {
  name: 'ApplicantSign',
  bounds: { X: 57, Y: 923, Width: 200, Height: 43 },
  isPrint: false  // Will not appear when printed
});

// Checkbox appears in print
pdfviewer.formDesignerModule.addFormField('CheckBox', {
  name: 'ConsentCheckbox',
  bounds: { X: 100, Y: 300, Width: 18, Height: 18 },
  isPrint: true   // Will appear when printed
});

---

Set Default Constraints for Field Type

Configure default constraints so new fields inherit them from toolbar.

// All textboxes will be required and editable
pdfviewer.textFieldSettings = {
  isReadOnly: false,
  isRequired: true,
  isPrint: true,
  tooltip: 'Required field'
};

// All signature fields will be optional and not printed
pdfviewer.signatureFieldSettings = {
  isReadOnly: false,
  isRequired: false,
  isPrint: false,
  tooltip: 'Sign if applicable'
};

// All checkbox fields will be printed
pdfviewer.checkBoxFieldSettings = {
  isPrint: true
};

---

Common Form Operations

Retrieve All Form Fields

Get all form fields from current document.

var allFields = pdfviewer.retrieveFormFields();
console.log('Total fields:', allFields.length);

allFields.forEach(field => {
  console.log(`Field: ${field.name}, Type: ${field.fieldType}, Value: ${field.value}`);
});

---

Update Single Field Value

Modify field value programmatically after document is loaded.

pdfviewer.updateFormFieldsValue({
  name: 'FirstName',
  value: 'Jane',
  pageNumber: 1
});

---

Update Field Properties

Change field properties like read-only, required, visibility.

var field = pdfviewer.formFieldCollections.find(f => f.name === 'Email');
if (field) {
  pdfviewer.formDesignerModule.updateFormField(field, {
    isRequired: true,
    isReadOnly: false,
    tooltip: 'Email is now required'
  });
}

---

Move and Resize Fields

Adjust field position and size programmatically.

var field = pdfviewer.formFieldCollections.find(f => f.name === 'FirstName');
if (field) {
  pdfviewer.formDesignerModule.updateFormField(field, {
    bounds: { X: 200, Y: 300, Width: 250, Height: 30 }
  });
}

---

Delete Form Field

Remove field from document completely.

// Delete via Form Designer
var field = pdfviewer.formFieldCollections.find(f => f.name === 'OldField');
if (field) {
  pdfviewer.formDesignerModule.removeFormField(field);
}

---

Group Related Fields

Group multiple fields logically for tab order and organization.

var fields = [
  pdfviewer.formFieldCollections.find(f => f.name === 'FirstName'),
  pdfviewer.formFieldCollections.find(f => f.name === 'LastName'),
  pdfviewer.formFieldCollections.find(f => f.name === 'Email')
];

if (fields.every(f => f)) {
  pdfviewer.formDesignerModule.groupFormFields(fields);
}

---

Add Custom Data to Form Field

Attach custom metadata to form field for application use.

pdfviewer.formDesignerModule.addFormField('Textbox', {
  name: 'Department',
  bounds: { X: 100, Y: 150, Width: 200, Height: 24 },
  value: 'Engineering',
  customData: {
    department_id: 'DEPT-123',
    region: 'North America',
    manager: 'john@company.com'
  }
});

// Retrieve custom data
var field = pdfviewer.formFieldCollections.find(f => f.name === 'Department');
console.log(field.customData);  // { department_id: 'DEPT-123', ... }