diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html index 10694e6b8..953b125e7 100644 --- a/Document-Processing-toc.html +++ b/Document-Processing-toc.html @@ -250,6 +250,24 @@
  • To Azure Active Directory
    • +
  • Toolbar Customization + +
    • +
  • Interactive PDF Navigation + +
  • Accessibility
  • Toolbar
  • Navigation
    • @@ -260,30 +278,45 @@
  • Text Markup Annotation
  • Shape Annotation
  • Stamp Annotation
    • -
  • Sticky Notes Annotation
    • +
  • Sticky Notes
  • Measurement Annotation
  • Free Text Annotation
  • Comments
  • Ink Annotation
  • Line Angle Constraint
    • +
  • Handwritten signature
    • +
  • Annotations Events
    • +
  • Annotations in Mobile view
    • -
  • Form Filling
    • -
  • Hand Written Signature
  • Interaction Mode
  • Form Designer +
    • +
  • Form Filling
    • +
  • Organize Pages +
  • Organize Pages
  • Print
  • Download
    • +
  • Event
  • Globalization
  • Server Actions
    • -
  • How To +
  • How To
  • Troubleshooting diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/accessibility.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/accessibility.md index 12bf9449d..28f087d08 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/accessibility.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/accessibility.md @@ -4,27 +4,25 @@ title: Accessibility with EJ2 ASP.NET MVC PDF Viewer | Syncfusion description: Learn here all about accessibility in ASP.NET MVC PDF Viewer component of Syncfusion Essential JS 2 and more. platform: document-processing control: PDF Viewer -publishingplatform: ASP.NET MVC documentation: ug --- +# Accessibility in Syncfusion PDF Viewer component -# Accessibility in Syncfusion® PDF Viewer components +The PDF Viewer component adheres to accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), and [WCAG 2.2](https://www.w3.org/TR/WCAG22/). It also integrates [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) commonly used for accessibility evaluation. -The PDF Viewer component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. - -The accessibility compliance for the PDF Viewer component is outlined below. +Below is an outline of the accessibility compliance for the PDF Viewer component: | Accessibility Criteria | Compatibility | -| -- | -- | -| [WCAG 2.2 Support]| Yes | -| [Section 508 Support] | Yes | -| [Screen Reader Support]| Yes | -| [Right-To-Left Support]| Yes | -| [Color Contrast] | Yes | -| [Mobile Device Support]| Intermediate | -| [Keyboard Navigation Support]| Yes | -| [Accessibility Checker Validation] | Yes | -| [Axe-core Accessibility Validation]| Yes | +| --- | --- | +| WCAG 2.2 Support | Yes | +| Section 508 Support | Yes | +| Screen Reader Support | Yes | +| Right-To-Left Support | Yes | +| Color Contrast | Yes | +| Mobile Device Support | Intermediate | +| Keyboard Navigation Support | Yes | +| Accessibility Checker Validation | Yes | +| Axe-core Accessibility Validation | Yes | +``` + +N> The icons are embedded in the font file used in the previous code snippet. + +**Step 5:** Add the following scripts to perform user interactions in the PDF Viewer: + +```html + + +``` + +[View sample in GitHub](https://github.com/SyncfusionExamples/asp-core-pdf-viewer-examples/tree/master/How%20to/Create%20Custom%20Toolbar) diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/toolbar-customization/form-designer-toolbar-customization.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/toolbar-customization/form-designer-toolbar-customization.md new file mode 100644 index 000000000..c48b916d3 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/toolbar-customization/form-designer-toolbar-customization.md @@ -0,0 +1,63 @@ +--- +layout: post +title: Form Designer Toolbar Customization in ASP.NET MVC PDF Viewer Component | Syncfusion +description: Learn here all about form designer toolbar customization in Syncfusion ASP.NET MVC PDF Viewer component of Syncfusion Essential JS 2 and more. +platform: document-processing +control: PDF Viewer +publishingplatform: ASP.NET MVC +documentation: ug +--- + +# Form Designer Toolbar Customization + +The form designer toolbar can be customized by showing or hiding default items and by controlling the order in which the items appear. + +## Show or hide the form designer toolbar + +Show or hide the form designer toolbar programmatically during initialization or at runtime. + +Use the [EnableFormDesigner](https://help.syncfusion.com/cr/aspnetmvc-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 toggle visibility. + +The following code snippet explains how to show or hide the toolbar using the `EnableFormDesigner` property. + +{% tabs %} +{% highlight html tabtitle="Standalone" %} +```html +
    + @Html.EJS().PdfViewer("pdfviewer").EnableFormDesigner(false).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() +
    +``` +{% endhighlight %} +{% highlight html tabtitle="Server-Backed" %} +```html +
    + @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).EnableFormDesigner(false).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() +
    +``` +{% endhighlight %} +{% endtabs %} + +## How to customize the form designer toolbar + +Choose which tools appear and control their order in the form designer toolbar. + +Use [`PdfViewerToolbarSettings`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings.html/) with the [`FormDesignerToolbarItems`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings.html#Syncfusion_EJ2_PdfViewer_PdfViewerToolbarSettings_FormDesignerToolbarItems) property to choose which form design tools are available. The property accepts a list of [`FormDesignerToolbarItem`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings.html#Syncfusion_EJ2_PdfViewer_PdfViewerToolbarSettings_FormDesignerToolbarItems/) values. The items you include are both displayed and rendered in the order listed; any items you omit are hidden. This provides a streamlined, user-friendly form design experience across devices. + +The following example demonstrates how to customize the form designer toolbar by configuring specific tools using `FormDesignerToolbarItem`. + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} + +
    + @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").ToolbarSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings { ShowTooltip = true, FormDesignerToolbarItems = "TextboxTool PasswordTool CheckBoxTool RadioButtonTool DropdownTool ListboxTool DrawSignatureTool DeleteTool" }).Render() +
    + +{% endhighlight %} +{% highlight cshtml tabtitle="Server-Backed" %} + +
    + @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").ToolbarSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings { ShowTooltip = true, FormDesignerToolbarItems = "TextboxTool PasswordTool CheckBoxTool RadioButtonTool DropdownTool ListboxTool DrawSignatureTool DeleteTool" }).Render() +
    + +{% endhighlight %} +{% endtabs %} \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/toolbar-customization/mobile-toolbar.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/toolbar-customization/mobile-toolbar.md new file mode 100644 index 000000000..8d090fa7a --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/toolbar-customization/mobile-toolbar.md @@ -0,0 +1,107 @@ +--- +layout: post +title: Mobile Toolbar Interface in ASP.NET MVC PDF Viewer control | Syncfusion +description: Learn All About the Mobile Toolbar Interface in Syncfusion ASP.NET MVC PDF Viewer control of Syncfusion Essential JS 2 and more. +platform: document-processing +control: PDF Viewer +publishingplatform: ASP.NET MVC +documentation: ug +--- +# Mobile Toolbar Interface in ASP.NET MVC PDF Viewer control + +The Mobile PDF Viewer offers a variety of features for viewing, searching, annotating, and managing PDF documents on mobile devices. It includes essential tools like search, download, bookmarking, annotation, and page organization. Users also have the option to enable desktop toolbar features in mobile mode, providing a more extensive set of actions. + +## Mobile Mode Toolbar Configuration +In mobile mode, the toolbar is optimized for ease of use on small screens, presenting users with the most common actions for interacting with a PDF document. Below are the key features available in mobile mode: + +![Mobile toolbar with primary PDF interaction options](../images/mobileToolbar.png) + +### Main Toolbar Options: + +**OpenOption:** Tap to load a PDF document. + +**SearchOption:** Access the search bar to find text within the document. + +![Search bar displayed for finding text within a PDF](../images/searchOption.png) + +**UndoRedoTool:** Quickly undo or redo any annotations made. + +**OrganizePagesTool:** Enable or disable page organization features to modify document pages. + +![Page organization interface for modifying PDF pages](../images/organizePages.png) + +**AnnotationEditTool:** Activate or deactivate annotation editing to add or modify annotations. + +![Annotation editing toolbar allowing users to add, edit, or delete annotations on a PDF](../images/editAnnotation.png) + + +N> In mobile mode, the annotation toolbar is conveniently displayed at the bottom of the viewer. + +### More Options Menu: +When you open the "more options" menu, you will see additional actions such as: + +**DownloadOption:** Tap to download the currently opened PDF document. + +**BookmarkOption:** Allows you to view bookmarks within the document. + +![More options menu showing additional actions like download and bookmark](../images/more-options.png) + +## Enabling Desktop Mode in Mobile + +The desktop version of the toolbar can be enabled on mobile devices by using the `EnableDesktopMode` API. This API allows you to bring desktop-like features to the mobile PDF viewer, providing access to additional toolbar actions that are typically available on desktop platforms. + +### Steps to Enable Desktop Mode: + +**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. + +{% tabs %} +{% highlight html tabtitle="Standalone" %} +```html +
    + @Html.EJS().PdfViewer("pdfviewer").EnableDesktopMode(true).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() +
    +``` +{% endhighlight %} +{% highlight html tabtitle="Server-Backed" %} +```html +
    + @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).EnableDesktopMode(true).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() +
    +``` +{% endhighlight %} +{% endtabs %} + +## Enable Scrolling in Desktop Mode with Touch Gestures + +To ensure smooth scrolling of PDF documents on a mobile device in desktop mode, it is important to enable touch gesture scrolling. You can achieve this by setting the `EnableTextSelection` option to **false**. + +{% tabs %} +{% highlight html tabtitle="Standalone" %} +```html +
    + @Html.EJS().PdfViewer("pdfviewer").EnableTextSelection(false).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() +
    +``` +{% endhighlight %} +{% highlight html tabtitle="Server-Backed" %} +```html +
    + @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).EnableTextSelection(false).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() +
    +``` +{% endhighlight %} +{% endtabs %} + +## Print Option Not Available + +The Print option is not available in mobile mode by default. However, if you need to use the print functionality on mobile devices, we recommend enabling the desktop toolbar on mobile using the `EnableDesktopMode` API. + +### How to Use Print on Mobile: + +**Enable Desktop Mode:** Set `EnableDesktopMode` to true to load the desktop version of the toolbar on your mobile device. + +**Print Option:** Once desktop mode is enabled, the print option will be available, allowing you to print the document directly from your mobile device. + +N> In mobile mode, the print functionality will not be available unless desktop mode is enabled. \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/toolbar-customization/primary-toolbar-customization.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/toolbar-customization/primary-toolbar-customization.md new file mode 100644 index 000000000..e5b09f955 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/toolbar-customization/primary-toolbar-customization.md @@ -0,0 +1,288 @@ +--- +layout: post +title: Primary Toolbar Customization in ASP.NET MVC PDF Viewer Component | Syncfusion +description: Learn here all about primary toolbar customization in Syncfusion ASP.NET MVC PDF Viewer component of Syncfusion Essential JS 2 and more. +platform: document-processing +control: PDF Viewer +publishingplatform: ASP.NET MVC +documentation: ug +--- + +# Primary Toolbar Customization in PDF Viewer Component + +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 placed at specific index positions among the existing items. + +## Show or hide the primary toolbar + +Toggle the built-in primary toolbar to create custom toolbar experiences or simplify the UI. In scenarios where a custom toolbar is required, the built-in toolbar can be hidden. Use the [EnableToolbar](https://help.syncfusion.com/cr/aspnetmvc-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. + +Show or hide the toolbar using the `enableToolbar` property: + +{% tabs %} +{% highlight html tabtitle="Standalone" %} +```html +
    + @Html.EJS().PdfViewer("pdfviewer").EnableToolbar(false).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() +
    +``` +{% endhighlight %} +{% highlight html tabtitle="Server-Backed" %} +```html +
    + @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).EnableToolbar(false).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() +
    +``` +{% endhighlight %} +{% endtabs %} + +The following code snippet explains how to show or hide the toolbar using the `showToolbar` method. + +{{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} + +
    + @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").DocumentLoad("showToolbar").Render() +
    + + + +{% endhighlight %} +{% highlight cshtml tabtitle="Server-Backed" %} + +
    + @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").DocumentLoad("showToolbar").Render() +
    + + + +{% endhighlight %} +{% endtabs %} + +## Show or hide toolbar items + +The PDF Viewer has an option to show or hide these grouped items in the built-in toolbar. + +* Show or hide toolbar items using toolbarSettings: + +{% tabs %} +{% highlight html tabtitle="Standalone" %} + +```html + +
    + @Html.EJS().PdfViewer("pdfviewer").ToolbarSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings { ShowTooltip = true, ToolbarItems = "OpenOption" }).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() +
    +``` + +{% endhighlight %} +{% highlight html tabtitle="Server-Backed" %} + +```html + +
    + @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).ToolbarSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings{ ShowTooltip = true, ToolbarItem = "OpenOption" ).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() +
    +``` + +{% endhighlight %} +{% endtabs %} + +* Show or hide toolbar items using showToolbarItem: + +{% tabs %} +{% highlight html tabtitle="Standalone" %} + +```html + +
    + @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() +
    + + +``` + +{% endhighlight %} +{% highlight html tabtitle="Server-Backed" %} + +```html + +
    + @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() +
    + +``` + +{% endhighlight %} +{% endtabs %} + +## Customize the built-in toolbar + +The PDF Viewer allows you to customize (add, show, hide, enable, and disable) existing items in the toolbar. + +- Add: Define new items using **CustomToolbarItemModel** and include them with existing items via the [**ToolbarSettings**](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings.html) property. Handle clicks in the toolbarClick event. + +- Show/Hide: Show or hide existing items using the [**ToolbarSettings**](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings.html) property. Predefined toolbar items are available via [`ToolbarItem`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings.html#Syncfusion_EJ2_PdfViewer_PdfViewerToolbarSettings_ToolbarItems). + +- Enable/Disable: Toolbar items can be enabled or disabled using enableToolbarItem. + +{% tabs %} +{% highlight html tabtitle="Standalone" %} + +@using Syncfusion.EJ2 +@{ + ViewBag.Title = "Home Page"; +} + +
    +
    +

    + @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").ResourceUrl("https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib").ToolbarClick("toolbarClick").Render() +
    +
    + + + +{% endhighlight %} +{% highlight html tabtitle="Server-Backed" %} + +@{ + ViewBag.Title = "Home Page"; +} +@using Syncfusion.EJ2.PdfViewer +@using ToolbarCustomization.Controllers +@{ + var toolItem1 = new { id = "submit_form", text = "Submit Form", tooltipText = "Custom toolbar item", align = "Center", cssClass = "custom_button" }; + CustomToolbarItems customToolbarItems = new CustomToolbarItems(); + customToolbarItems.ToolbarItems = new List { toolItem1, "OpenOption", "PageNavigationTool", "MagnificationTool", "PanTool", "SelectionTool", "SearchOption", "PrintOption", "DownloadOption", "UndoRedoTool", "AnnotationEditTool", "FormDesignerEditTool", "CommentTool" }; + PdfViewerToolbarSettings toolbarSettings = new PdfViewerToolbarSettings() + { + ShowTooltip = true, + ToolbarItems = customToolbarItems.ToolbarItems + }; +} +
    +
    +

    + @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/Home/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/form-designer.pdf").ToolbarClick("toolbarClick").ToolbarSettings(toolbarSettings).Render() +
    +
    + + + + +{% endhighlight %} +{% endtabs %} + +N> Default toolbar items: ['OpenOption', 'PageNavigationTool','MagnificationTool', 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', 'DownloadOption','UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', 'CommentTool', 'SubmitForm'] + +### Align property + +The Align property specifies the alignment of a toolbar item within the toolbar. + +`Left`: Aligns the item to the left side of the toolbar. +`Right`: Aligns the item to the right side of the toolbar. + +### Tooltip property + +The Tooltip property sets the tooltip text for a toolbar item. Tooltips provide additional information when a user hovers over the item. + +### CssClass property + +The CssClass property applies custom CSS classes to a toolbar item for custom styling. + +### Prefix property + +The Prefix property sets the CSS class or icon added as a prefix to the existing content of the toolbar item. + +### ID property + +The Id property of a CustomToolbarItemModel uniquely identifies a toolbar item and is required for customization. + +When defining or customizing toolbar items, assign a specific and descriptive Id to each item. +These properties are commonly used when defining custom toolbar items with the CustomToolbarItemModel in the context of the Syncfusion PDF Viewer. When configuring the toolbar using the ToolbarSettings property, you can include these properties to customize the appearance and behavior of each toolbar item. + +N> When customizing toolbar items, you have the flexibility to include either icons or text based on your design preference. + +[View sample in GitHub](https://github.com/SyncfusionExamples/mvc-pdf-viewer-examples/tree/master/How%20to/Customize%20existing%20toolbar) diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/toolbar.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/toolbar.md index 248ffddff..3e469f765 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/toolbar.md @@ -1,29 +1,38 @@ --- layout: post -title: Toolbar in ASP.NET MVC Pdfviewer Component| Syncfusion -description: Learn here all about Toolbar in Syncfusion ASP.NET MVC Pdfviewer component of Syncfusion Essential JS 2 and more. +title: Overview of the toolbars in ASP.NET MVC PDF Viewer Component | Syncfusion +description: Check out and learn about the primary, annotation, form designer, and redaction toolbars in the Syncfusion ASP.NET MVC PDF Viewer component. platform: document-processing -control: Toolbar +control: PDF Viewer publishingplatform: ASP.NET MVC documentation: ug --- -# Built-in toolbar in ASP.NET MVC PDFViewer Control +# Toolbar in ASP.NET MVC PDF Viewer Component -The PDF Viewer comes with a powerful built-in toolbar to execute important actions such as page navigation,text search,view mode,download print,bookmark and thumbnails. +The PDF Viewer includes a built-in, responsive toolbar that surfaces common PDF actions and provides entry points to feature-specific toolbars. It adapts across desktop, tablet, and mobile, and can be customized to show or hide items, reorder commands, add custom items, and handle toolbar events. -The following table shows built-in toolbar items and its actions:- +There are three toolbars in the PDF Viewer: +* Primary toolbar +* Annotation toolbar +* Form designer toolbar + +## Primary Toolbar in ASP.NET MVC PDF Viewer Component + +The PDF Viewer includes a built-in, responsive primary toolbar that provides quick access to common viewer actions and feature-specific toolbars. It adapts to the available width for desktop, tablet, and mobile layouts. + +The primary toolbar includes the following options: | Option | Description | |---|---| | OpenOption | This option provides an action to load the PDF documents to the PDF Viewer.| -| PageNavigationTool | This option provides an action to navigate the pages in the PDF Viewer. It contains GoToFirstPage,GoToLastPage,GotoPage,GoToNext, and GoToLast tools.| -| MagnificationTool | This option provides an action to magnify the pages either with predefined or user defined zoom factors in the PDF Viewer. Contains ZoomIn, ZoomOut, Zoom, FitPage and FitWidth tools| -| PanTool |This option provides an action for panning the pages in the PDF Viewer.| -| SelectionTool |This option provides an action to enable/disable the text selection in the PDF Viewer.| -| SearchOption |This option provides an action to search a word in the PDF documents.| -| PrintOption |This option provides an action to print the PDF document being loaded in the PDF Viewer.| -| DownloadOption |This Download option provides an action to download the PDF document that has been loaded in the PDF Viewer.| +| PageNavigationTool | This option provides an action to navigate pages in the PDF Viewer. It contains GoToFirstPage, GoToLastPage, GotoPage, GoToNext, and GoToLast tools.| +| MagnificationTool | This option provides an action to magnify pages with predefined or user-defined zoom factors in the PDF Viewer. Contains ZoomIn, ZoomOut, Zoom, FitPage, and FitWidth tools.| +| PanTool | This option provides an action for panning the pages in the PDF Viewer.| +| SelectionTool | This option provides an action to enable or disable text selection in the PDF Viewer.| +| SearchOption | This option provides an action to search for text in PDF documents.| +| PrintOption | This option provides an action to print the PDF document loaded in the PDF Viewer.| +| DownloadOption | This option provides an action to download the PDF document loaded in the PDF Viewer.| | UndoRedoTool | This tool provides options to undo and redo the annotation actions performed in the PDF Viewer.| | AnnotationEditTool | This tool provides options to enable or disable the edit mode of annotation in the PDF Viewer.| @@ -352,24 +361,20 @@ new ToolbarItem { Type = ItemType.Button, PrefixIcon = "e-pv-zoom-out-icon", Too div#magnificationToolbar.e-toolbar .e-toolbar-items { background: transparent; } - #magnificationToolbar.e-toolbar .e-tbar-btn { border-radius: 50%; min-height: 30px; min-width: 30px; } - #topToolbar { top: 0px; z-index: 1001; } - .e-pv-current-page-number { width: 46px; height: 28px; text-align: center; } - .e-icons { font-family: "e-icons"; font-style: normal; @@ -378,11 +383,9 @@ new ToolbarItem { Type = ItemType.Button, PrefixIcon = "e-pv-zoom-out-icon", Too line-height: 1; text-transform: none; } - .e-pv-icon::before { font-family: 'e-icons'; } - .e-pv-icon-search::before { font-family: 'e-icons'; font-size: 12px; @@ -390,23 +393,18 @@ new ToolbarItem { Type = ItemType.Button, PrefixIcon = "e-pv-zoom-out-icon", Too .e-pv-download-document-icon::before { content: '\e914'; } - .e-pv-print-document-icon::before { content: '\e917'; } - .e-pv-previous-page-navigation-icon::before { content: '\e910'; } - .e-pv-next-page-navigation-icon::before { content: '\e911'; } - .e-pv-zoom-out-icon::before { content: '\e912'; } - .e-pv-zoom-in-icon::before { content: '\e91d'; } @@ -424,7 +422,6 @@ new ToolbarItem { Type = ItemType.Button, PrefixIcon = "e-pv-zoom-out-icon", Too } ``` - N>The icons are embedded in the font file used in above code snippet. **Step 6:** Add the following scripts for performing user interaction in PDF Viewer in code behind @@ -532,7 +529,6 @@ N>The icons are embedded in the font file used in above code snippet. return true; } } - function currentPageClicked() { var currentPage = document.getElementById('currentPage'); (currentPage).select(); @@ -575,12 +571,47 @@ N>The icons are embedded in the font file used in above code snippet. } } - ``` [View sample in GitHub](https://github.com/SyncfusionExamples/asp-core-pdf-viewer-examples/tree/master/How%20to/Create%20Custom%20Toolbar) +![ASP.NET MVC PDF Viewer primary toolbar with customized items](./images/pdfviewer-primary-toolbar.png) + +* [Get more info about primary toolbar customization](./toolbar-customization/primary-toolbar-customization) + +## Annotation toolbar in ASP.NET MVC PDF Viewer Component + +The Annotation toolbar appears below the primary toolbar when annotation features are enabled. It provides tools to create and edit annotations. + +* Text markup: Highlight, Underline, Strikethrough, Squiggly +* Shapes: Line, Arrow, Rectangle, Circle, Polygon +* Measurement: Distance, Perimeter, Area, Radius, Volume +* Freehand: Ink, Signature +* Text: Free text +* Stamp: Predefined and custom stamps +* Properties: Color, opacity, thickness, font +* Edit helpers: Comments panel, Delete +* Close + +![ASP.NET MVC PDF Viewer annotation toolbar](./images/annotation-toolbar.png) + +* [Get more info about annotation toolbar customization](./toolbar-customization/annotation-toolbar-customization) + +## Form Designer toolbar in ASP.NET MVC PDF Viewer Component + +Use the Form Designer toolbar to add and configure interactive form fields in the PDF. It appears below the primary toolbar when form designer is enabled. + +* Field types: Button, Text box, Password, Checkbox, Radio button, Drop-down, List box, Signature, Initial +* Edit helpers: Delete +* Close + +![ PDF Viewer form designer toolbar](./images/form-deigner-toolbar.png) + +* [Get more info about form designer toolbar customization](./toolbar-customization/form-designer-toolbar-customization) + ## See also -* [Toolbar customization](./how-to/toolbar_customization) -* [Feature Modules](./feature-module) +* [Mobile toolbar](./toolbar-customization/mobile-toolbar) +* [Adding the shape annotation in PDF viewer](./annotation/shape-annotation) +* [Form designer in PDF viewer](./form-designer/create-programmatically) +* [Feature Modules](./feature-module) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/troubleshooting/document-loading-issues.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/troubleshooting/document-loading-issues.md index 389771f2c..5cbf5b8e3 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/troubleshooting/document-loading-issues.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/troubleshooting/document-loading-issues.md @@ -1,7 +1,7 @@ --- layout: post -title: Document Loading Issues in Version 23.1 or Newer ASP.NET MVC Pdfviewer Component -description: Learn here all about troubleshooting Document Loading Issues in Version 23.1 or newer in ASP.NET MVC Pdfviewer of Syncfusion Essential JS 2 and more. +title: Fix document loading issues in v23.1 for the ASP.NET MVC PDF Viewer component +description: Resolve document rendering failures in v23.1 or newer by calling dataBind before load, verifying source URLs, checking CORS and CSP, and confirming network connectivity in the ASP.NET MVC PDF Viewer. platform: document-processing control: PDF Viewer publishingplatform: ASP.NET MVC @@ -10,9 +10,9 @@ documentation: ug # Document Loading Issues in Version 23.1 or Newer -If you're experiencing problems with your document not rendering in the viewer, especially when using version 23.1 or a newer version, follow these troubleshooting steps to resolve the issue: +If the document does not render in the viewer when using version 23.1 or newer, follow these steps: -1. **Check for `viewer.dataBind()` Requirement**: Ensure that you have called `viewer.dataBind()` as required in version 23.1 or newer. This explicit call is essential for initializing data binding and document rendering correctly. It is must to call the dataBind() method before load. +1. Call `pdfViewer.dataBind()` before `load()`. Starting with v23.1, an explicit dataBind call is required to initialize data binding and render correctly. ```html @@ -30,18 +30,18 @@ If you're experiencing problems with your document not rendering in the viewer, ``` -2. **Verify Document Source**: Confirm that the document source or URL you're trying to display is valid and accessible. Incorrect URLs or document paths can lead to loading issues. +2. Verify the document source. Ensure the URL or path is valid and accessible. -3. **Network Connectivity**: Ensure that your application has a stable network connection. Document rendering may fail if the viewer can't fetch the document due to network issues. +3. Check network connectivity. The viewer cannot fetch the document without a stable connection. -4. **Console Errors**: Use your browser's developer tools to check for any error messages or warnings in the console. These messages can provide insights into what's causing the document not to load. +4. Inspect console errors. Use browser developer tools to identify issues. -5. **Loading Sequence**: Make sure that you're calling `viewer.dataBind()` and initiating document loading in the correct sequence. The viewer should be properly initialized before attempting to load a document. +5. Validate the initialization order. Initialize the viewer, call `dataBind()`, then call `load()`. -7. **Update Viewer**: Ensure that you're using the latest version of the viewer library or framework. Sometimes, issues related to document loading are resolved in newer releases. +6. Update to the latest viewer version. Issues may be resolved in newer releases. -8. **Cross-Origin Resource Sharing (CORS)**: If you're loading documents from a different domain, ensure that CORS headers are correctly configured to allow cross-origin requests. +7. Configure CORS correctly for cross-domain documents. -9. **Content Security Policies (CSP)**: Check if your application's Content Security Policy allows the loading of external resources, as this can affect document loading. Refer [here](https://ej2.syncfusion.com/javascript/documentation/common/troubleshoot/content-security-policy) to troubleshoot. +8. Review Content Security Policy (CSP) settings. Ensure external resources are permitted. See the [Content Security Policy troubleshooting guide](https://ej2.syncfusion.com/javascript/documentation/common/troubleshoot/content-security-policy) for details. -By following these troubleshooting steps, you should be able to address issues related to document loading in version 23.1 or newer, ensuring that your documents render correctly in the viewer. \ No newline at end of file +Following this checklist typically resolves document loading issues in v23.1 or newer.