Skip to content

Commit 26d3022

Browse files
SF4524LogeshKumarSF4524LogeshKumar
committed
845073: Show and Hide Annotation UG Docs Updated
1 parent e341554 commit 26d3022

File tree

2 files changed

+55
-91
lines changed

2 files changed

+55
-91
lines changed

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

Lines changed: 32 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -24,61 +24,50 @@ First, follow the steps provided in the [getting started guide](https://ej2.sync
2424

2525
Add a button to toggle annotation visibility and implement the necessary JavaScript functions to handle the show/hide functionality:
2626

27-
```html
28-
@using Syncfusion.EJ2;
27+
{% tabs %}
28+
{% highlight html tabtitle="Standalone" %}
29+
30+
@using Syncfusion.EJ2
2931
@{
3032
ViewBag.Title = "Home Page";
3133
}
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()
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()
3641
</div>
3742
</div>
3843

3944
<script type="text/javascript">
40-
var exportObject = null;
41-
var annotationsVisible = true;
45+
var exportObject;
4246

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-
});
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+
}
5455

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';
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));
7761
}
7862
}
63+
64+
// Add event listeners to buttons
65+
document.getElementById('hideBtn').addEventListener('click', HideAnnotations);
66+
document.getElementById('unhideBtn').addEventListener('click', UnHideAnnotations);
7967
</script>
80-
```
81-
### Conclusion
68+
69+
{% endhighlight %}
70+
{% endtabs %}
8271

8372
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.
8473

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

Lines changed: 23 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,7 @@ documentation: ug
1414

1515
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.
1616

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
17+
### How to Show and Hide Annotations
2218

2319
**Step 1:** Set up the PDF Viewer in your ASP.NET Core project
2420

@@ -28,64 +24,43 @@ First, create a basic PDF Viewer implementation in your ASP.NET Core application
2824

2925
Add a button that allows users to toggle the visibility of annotations within the PDF document.
3026

31-
```html
27+
{% tabs %}
28+
{% highlight cshtml tabtitle="Standalone" %}
29+
3230
@page "{handler?}"
3331
@using ShowHideAnnotations.Pages
3432
@model IndexModel
3533
@{
36-
ViewData["Title"] = "Home page";
34+
ViewData["Title"] = "Home page";
3735
}
3836
<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>
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>
4241
</div>
43-
4442
<script type="text/javascript">
4543
var exportObject = null;
46-
var annotationsVisible = true;
47-
48-
// Function to run when page loads
4944
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-
}
45+
var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0];
46+
function HideAnnotations() {
47+
pdfviewer.exportAnnotationsAsObject().then(function(value) {
48+
exportObject = value;
49+
pdfviewer.deleteAnnotations();
5850
});
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';
51+
}
52+
function UnHideAnnotations() {
53+
if (exportObject) {
54+
pdfviewer.importAnnotation(JSON.parse(exportObject));
8355
}
8456
}
57+
document.getElementById('hideBtn').addEventListener('click', HideAnnotations);
58+
document.getElementById('unhideBtn').addEventListener('click', UnHideAnnotations);
59+
});
8560
</script>
86-
```
8761

88-
### Conclusion
62+
{% endhighlight %}
63+
{% endtabs %}
8964

9065
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.
9166

0 commit comments

Comments
 (0)