Open thumbnail pane programmatically
23 Oct 20251 minute to read
The Syncfusion® ASP.NET MVC PDF Viewer lets you open the thumbnail pane programmatically by calling the openThumbnailPane() method after the document loads. This approach helps highlight page navigation immediately or in response to user actions.
The following steps explain how to open the thumbnail pane.
Step 1: Create an ASP.NET MVC PDF Viewer sample by following the ASP.NET MVC getting started guide for the PDF Viewer. The tutorial shows how to configure Razor Pages, reference the required Syncfusion scripts and styles, and register the PDF Viewer service endpoint.
Step 2: Add the following markup and script to open the thumbnail pane automatically or on demand.
<button type="button" onclick="openThumbnail()">Open Thumbnail Pane</button>
<div id="e-pv-e-sign-pdfViewer-div">
@Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render()
</div>
<script>
function openThumbnail() {
var viewer = document.getElementById('pdfViewer').ej2_instances[0];
// Open Thumbnail Pane.
viewer.thumbnailViewModule.openThumbnailPane();
}
</script><button type="button" onclick="openThumbnail()">Open Thumbnail Pane</button>
<div id="e-pv-e-sign-pdfViewer-div">
@Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render()
</div>
<script>
function openThumbnail() {
var viewer = document.getElementById('pdfViewer').ej2_instances[0];
// Open Thumbnail Pane.
viewer.thumbnailViewModule.openThumbnailPane();
}
</script>