Skip to content

Commit e341554

Browse files
SF4524LogeshKumarSF4524LogeshKumar
committed
845073: Show and Hide Annotation UG Docs
1 parent 0feb865 commit e341554

File tree

4 files changed

+179
-0
lines changed

4 files changed

+179
-0
lines changed

‎ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/how-to/show-hide-annotation.md‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
---
2+
layout: post
3+
title: Show and Hide Annotations in EJ2 ASP.NET MVC PdfViewer | Syncfusion
4+
description: Learn how to dynamically show and hide annotations in the Syncfusion ASP.NET MVC PDF Viewer component of Syncfusion Essential JS 2 and more.
5+
platform: ej2-asp-core-mvc
6+
control: Show and Hide Annotations
7+
publishingplatform: ##Platform_Name##
8+
documentation: ug
9+
---
10+
11+
# Show and Hide Annotations in PDF Viewer
12+
13+
### Overview
14+
15+
This guide demonstrates how to implement functionality to dynamically show and hide annotations in a PDF document loaded in the Syncfusion PDF Viewer using ASP.NET MVC. This feature is particularly useful in scenarios where you need to present a clean view of the document or toggle between annotated and non-annotated views.
16+
17+
### How to Show and Hide Annotations
18+
19+
**Step 1:** Set Up the PdfViewer in Your ASP.NET MVC Project
20+
21+
First, follow the steps provided in the [getting started guide](https://ej2.syncfusion.com/aspnetmvc/documentation/pdfviewer/getting-started) to create a simple PDF Viewer sample.
22+
23+
**Step 2:** Add Toggle Button and Implementation
24+
25+
Add a button to toggle annotation visibility and implement the necessary JavaScript functions to handle the show/hide functionality:
26+
27+
```html
28+
@using Syncfusion.EJ2;
29+
@{
30+
ViewBag.Title = "Home Page";
31+
}
32+
<div class="text-center">
33+
<button id="toggleBtn" onclick="toggleAnnotations()">Hide Annotations</button>
34+
<div style="height:600px">
35+
@Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/Home/")).Render()
36+
</div>
37+
</div>
38+
39+
<script type="text/javascript">
40+
var exportObject = null;
41+
var annotationsVisible = true;
42+
43+
// Function to run when page loads
44+
document.addEventListener('DOMContentLoaded', function () {
45+
// Get viewer instance
46+
var viewer = document.getElementById('pdfviewer').ej2_instances[0];
47+
// Load the PDF document
48+
if (viewer) {
49+
viewer.documentPath = "Annotations.pdf";
50+
// You can also add any initialization code here
51+
console.log("PDF viewer initialized and document loading started");
52+
}
53+
});
54+
55+
function toggleAnnotations() {
56+
var viewer = document.getElementById('pdfviewer').ej2_instances[0];
57+
if (annotationsVisible) {
58+
// Hide annotations by exporting and deleting them
59+
viewer.exportAnnotationsAsObject().then(function (value) {
60+
exportObject = value;
61+
var count = viewer.annotationCollection.length;
62+
for (var i = 0; i < count; i++) {
63+
// Always delete the first item as the collection shrinks
64+
viewer.annotationModule.deleteAnnotationById(viewer.annotationCollection[0].annotationId);
65+
}
66+
annotationsVisible = false;
67+
document.getElementById('toggleBtn').textContent = 'Show Annotations';
68+
});
69+
} else {
70+
// Restore annotations
71+
if (exportObject) {
72+
var exportAnnotObject = JSON.parse(exportObject);
73+
viewer.importAnnotation(exportAnnotObject);
74+
}
75+
annotationsVisible = true;
76+
document.getElementById('toggleBtn').textContent = 'Hide Annotations';
77+
}
78+
}
79+
</script>
80+
```
81+
### Conclusion
82+
83+
This implementation provides a clean, efficient way to toggle the visibility of annotations in your PDF documents. It's particularly useful for presentation scenarios or when you need to focus on the document content without the distraction of annotations.
84+
85+
[View sample in GitHub](https://github.com/SyncfusionExamples/mvc-pdf-viewer-examples/tree/master/How%20to)

‎ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/how-to/show-hide-annotation.md‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
---
2+
layout: post
3+
title: Show and Hide Annotations in EJ2 ASP.NET CORE PdfViewer | Syncfusion
4+
description: Learn how to show and hide annotations in the Syncfusion ASP.NET CORE PDF Viewer component of Syncfusion Essential JS 2 and more.
5+
platform: ej2-asp-core-mvc
6+
control: PDF Viewer
7+
publishingplatform: ##Platform_Name##
8+
documentation: ug
9+
---
10+
11+
# Show and Hide Annotations in PDF Viewer
12+
13+
### Overview
14+
15+
This guide demonstrates how to dynamically show and hide annotations in the Syncfusion PDF Viewer component in an ASP.NET Core application. This functionality is useful when you want to provide users with the ability to toggle the visibility of annotations within PDF documents.
16+
17+
##### Conclusion
18+
19+
By implementing the show and hide annotations functionality in the Syncfusion PDF Viewer, you can provide users with a more flexible document viewing experience. This approach maintains the original annotations data while giving users control over their visibility, which is particularly useful in document review, presentation, and analysis scenarios. The toggle mechanism demonstrates how to effectively use the PDF Viewer's annotation APIs to create enhanced user interactions with PDF documents.
20+
21+
[View sample in GitHub](https://github.com/SyncfusionExamples/asp-core-pdf-viewer-examples/tree/master/How%20to/ShowHideAnnotations) Implementation Steps
22+
23+
**Step 1:** Set up the PDF Viewer in your ASP.NET Core project
24+
25+
First, create a basic PDF Viewer implementation in your ASP.NET Core application.
26+
27+
**Step 2:** Add a toggle button and implement the show/hide functionality
28+
29+
Add a button that allows users to toggle the visibility of annotations within the PDF document.
30+
31+
```html
32+
@page "{handler?}"
33+
@using ShowHideAnnotations.Pages
34+
@model IndexModel
35+
@{
36+
ViewData["Title"] = "Home page";
37+
}
38+
<div class="text-center">
39+
<button id="toggleBtn" onclick="toggleAnnotations()">Hide Annotations</button>
40+
<ejs-pdfviewer id="pdfviewer" style="height:600px" serviceUrl="/Index" documentPath="">
41+
</ejs-pdfviewer>
42+
</div>
43+
44+
<script type="text/javascript">
45+
var exportObject = null;
46+
var annotationsVisible = true;
47+
48+
// Function to run when page loads
49+
document.addEventListener('DOMContentLoaded', function() {
50+
// Get viewer instance
51+
var viewer = document.getElementById('pdfviewer').ej2_instances[0];
52+
// Load the PDF document
53+
if (viewer) {
54+
viewer.documentPath="Data/Annotations.pdf";
55+
// You can also add any initialization code here
56+
console.log("PDF viewer initialized and document loading started");
57+
}
58+
});
59+
60+
function toggleAnnotations() {
61+
var viewer = document.getElementById('pdfviewer').ej2_instances[0];
62+
63+
if (annotationsVisible) {
64+
// Hide annotations by exporting and deleting them
65+
viewer.exportAnnotationsAsObject().then(function(value) {
66+
exportObject = value;
67+
var count = viewer.annotationCollection.length;
68+
for (var i = 0; i < count; i++) {
69+
// Always delete the first item as the collection shrinks
70+
viewer.annotationModule.deleteAnnotationById(viewer.annotationCollection[0].annotationId);
71+
}
72+
annotationsVisible = false;
73+
document.getElementById('toggleBtn').textContent = 'Show Annotations';
74+
});
75+
} else {
76+
// Restore annotations
77+
if (exportObject) {
78+
var exportAnnotObject = JSON.parse(exportObject);
79+
viewer.importAnnotation(exportAnnotObject);
80+
}
81+
annotationsVisible = true;
82+
document.getElementById('toggleBtn').textContent = 'Hide Annotations';
83+
}
84+
}
85+
</script>
86+
```
87+
88+
### Conclusion
89+
90+
This implementation provides a clean, efficient way to toggle the visibility of annotations in your PDF documents. It's particularly useful for presentation scenarios or when you need to focus on the document content without the distraction of annotations.
91+
92+
[View sample in GitHub](https://github.com/SyncfusionExamples/asp-core-pdf-viewer-examples/tree/master/How%20to/ShowHideAnnotations)

‎ej2-asp-core-toc.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2023,6 +2023,7 @@
20232023
<li><a href="/ej2-asp-core/pdfviewer/how-to/find-text-async">Find Text using findTextAsync</a></li>
20242024
<li><a href="/ej2-asp-core/pdfviewer/how-to/extract-text-completed">Extract Text Completed</a></li>
20252025
<li><a href="/ej2-asp-core/pdfviewer/how-to/enable-text-selection">Dynamically Enable or Disable Text Selection</a></li>
2026+
<li><a href="/ej2-asp-core/pdfviewer/how-to/show-hide-annotation">Show and Hide Annotations</a></li>
20262027
</ul>
20272028
</li>
20282029
<li>Troubleshooting

‎ej2-asp-mvc-toc.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1981,6 +1981,7 @@
19811981
<li><a href="/ej2-asp-mvc/pdfviewer/how-to/find-text-async">Find Text using findTextAsync</a></li>
19821982
<li><a href="/ej2-asp-mvc/pdfviewer/how-to/extract-text-completed">Extract Text Completed</a></li>
19831983
<li><a href="/ej2-asp-mvc/pdfviewer/how-to/enable-text-selection">Dynamically Enable or Disable Text Selection</a></li>
1984+
<li><a href="/ej2-asp-mvc/pdfviewer/how-to/show-hide-annotation">Show and Hide Annotation</a></li>
19841985
</ul>
19851986
</li>
19861987
<li>Troubleshooting

0 commit comments

Comments
 (0)