Skip to content

Commit 2536a1d

Browse files
rparthi-1687rparthi-1687
authored
Merge pull request #4248 from syncfusion-content/EJ2-845073-shAnnot
845073: Show and Hide Annotation UG Docs
2 parents db306e9 + 26d3022 commit 2536a1d

File tree

4 files changed

+143
-0
lines changed

4 files changed

+143
-0
lines changed

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

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
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+
{% tabs %}
28+
{% highlight html tabtitle="Standalone" %}
29+
30+
@using Syncfusion.EJ2
31+
@{
32+
ViewBag.Title = "Home Page";
33+
}
34+
<div>
35+
<div class="button-container" style="margin-bottom: 10px;">
36+
<button id="hideBtn" class="e-btn e-primary">Hide Annotations</button>
37+
<button id="unhideBtn" class="e-btn e-primary">Show Annotations</button>
38+
</div>
39+
<div style="height:500px;width:100%;">
40+
@Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").ResourceUrl("https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib").Render()
41+
</div>
42+
</div>
43+
44+
<script type="text/javascript">
45+
var exportObject;
46+
47+
// Function to hide annotations
48+
function HideAnnotations() {
49+
var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0];
50+
pdfviewer.exportAnnotationsAsObject().then(function(value) {
51+
exportObject = value;
52+
pdfviewer.deleteAnnotations();
53+
});
54+
}
55+
56+
// Function to unhide annotations
57+
function UnHideAnnotations() {
58+
var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0];
59+
if (exportObject) {
60+
pdfviewer.importAnnotation(JSON.parse(exportObject));
61+
}
62+
}
63+
64+
// Add event listeners to buttons
65+
document.getElementById('hideBtn').addEventListener('click', HideAnnotations);
66+
document.getElementById('unhideBtn').addEventListener('click', UnHideAnnotations);
67+
</script>
68+
69+
{% endhighlight %}
70+
{% endtabs %}
71+
72+
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.
73+
74+
[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: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
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+
### How to Show and Hide Annotations
18+
19+
**Step 1:** Set up the PDF Viewer in your ASP.NET Core project
20+
21+
First, create a basic PDF Viewer implementation in your ASP.NET Core application.
22+
23+
**Step 2:** Add a toggle button and implement the show/hide functionality
24+
25+
Add a button that allows users to toggle the visibility of annotations within the PDF document.
26+
27+
{% tabs %}
28+
{% highlight cshtml tabtitle="Standalone" %}
29+
30+
@page "{handler?}"
31+
@using ShowHideAnnotations.Pages
32+
@model IndexModel
33+
@{
34+
ViewData["Title"] = "Home page";
35+
}
36+
<div class="text-center">
37+
<button id="hideBtn">Hide Annotations</button>
38+
<button id="unhideBtn">Show Annotations</button>
39+
<ejs-pdfviewer id="pdfviewer" style="height:600px" resourceUrl="https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
40+
</ejs-pdfviewer>
41+
</div>
42+
<script type="text/javascript">
43+
var exportObject = null;
44+
document.addEventListener('DOMContentLoaded', function() {
45+
var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0];
46+
function HideAnnotations() {
47+
pdfviewer.exportAnnotationsAsObject().then(function(value) {
48+
exportObject = value;
49+
pdfviewer.deleteAnnotations();
50+
});
51+
}
52+
function UnHideAnnotations() {
53+
if (exportObject) {
54+
pdfviewer.importAnnotation(JSON.parse(exportObject));
55+
}
56+
}
57+
document.getElementById('hideBtn').addEventListener('click', HideAnnotations);
58+
document.getElementById('unhideBtn').addEventListener('click', UnHideAnnotations);
59+
});
60+
</script>
61+
62+
{% endhighlight %}
63+
{% endtabs %}
64+
65+
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.
66+
67+
[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)