Open or close the bookmark pane in ASP.NET Core PDF Viewer

28 Feb 20264 minutes to read

Toggle the bookmark sidebar at runtime using openBookmarkPane() and closeBookmarkPane() methods. These APIs allow flexible document navigation workflows where bookmarks appear only when needed.

Follow these steps to implement bookmark pane toggling:

Step 1: Follow the Getting Started with ASP.NET Core PDF Viewer guide to set up a basic PDF Viewer instance with required Syncfusion EJ2 script and style references.

Step 2: Add buttons to open and close the bookmark pane. Place the viewer and script blocks in the Razor page. Ensure the document contains bookmarks before invoking the API, otherwise the pane will appear empty.

<button type="button" onclick="openBookmark()">Open Bookmark Pane</button>

<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                   resourceUrl="https://cdn.syncfusion.com/ej2/31.1.17/dist/ej2-pdfviewer-lib"">
    </ejs-pdfviewer>
</div>

<script>
    function openBookmark() {
        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
        viewer.bookmarkViewModule.openBookmarkPane();
    }
</script>
<button type="button" onclick="openBookmark()">Open Bookmark Pane</button>

<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   serviceUrl="/Index"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
    </ejs-pdfviewer>
</div>

<script>
    function openBookmark() {
        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
        viewer.bookmarkViewModule.openBookmarkPane();
    }
</script>

Close the bookmark pane

To hide the bookmark pane, call the closeBookmarkPane() method. Use the following code:

<button type="button" onclick="closeBookmark()">Close Bookmark Pane</button>

<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                   resourceUrl="https://cdn.syncfusion.com/ej2/31.1.17/dist/ej2-pdfviewer-lib">
    </ejs-pdfviewer>
</div>

<script>
    function closeBookmark() {
        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
        viewer.bookmarkViewModule.closeBookmarkPane();
    }
</script>
<button type="button" onclick="closeBookmark()">Close Bookmark Pane</button>

<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   serviceUrl="/Index"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
    </ejs-pdfviewer>
</div>

<script>
    function closeBookmark() {
        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
        viewer.bookmarkViewModule.closeBookmarkPane();
    }
</script>

View sample on GitHub