Articles in this section
Category / Section

How to create custom toolbar for ejPdfViewer with themes support?

1 min read

You can create custom toolbar with ej themes support by using the Syncfusion ejToolbar control. Refer to the following code snippet.

 

<div id="ToolbarItem">
        <ul>
            <li id="Previous" title="Go to the previous page of the PDF document">
                <div class="PdfDocument e-icon e-pdfviewer-icon e-pdfviewer-gotoprevious "></div>
            </li>
            <li id="Next" title="Go to the next page of the PDF document">
                <div class="PdfDocument e-pdfviewer-icon e-pdfviewer-gotonext "></div>
            </li>
        </ul>
        <ul>
            <li id="ZoomIn" title="Zoom in to the PDF document">
                <div class="PdfDocument e-pdfviewer-icon e-pdfviewer-zoomin "></div>
            </li>
            <li id="ZoomOut" title="Zoom out of the PDF document">
                <div class="PdfDocument e-pdfviewer-icon e-pdfviewer-zoomout "></div>
            </li>
        </ul>
    </div>
<script type="text/javascript">
$(function () {
            // initializing ejToolbar
            $("#ToolbarItem").ejToolbar({
                height: "auto",
                enableSeparator: true,
                click: "onItemclick"
            });
        });
        function ondocumentload(args) {
            var _ejPdfViewer = $("#container").data("ejPdfViewer");
            //hiding the default toolbar
            _ejPdfViewer.showToolbar(false);
        }
        function onItemclick(args) {
            // adding functionalities to the icons
            var option = args.currentTarget.id;
            var _ejPdfViewer = $("#container").data("ejPdfViewer");
            switch (option) {
                case "ZoomIn":
                    _ejPdfViewer.zoomIn();
                    break;
                case "ZoomOut":
                    _ejPdfViewer.zoomOut();
                    break;
                case "Previous":
                    _ejPdfViewer.goToPreviousPage();
                    break;
                case "Next":
                    _ejPdfViewer.goToNextPage();
                    break; 
            }
    </script>

 

Sample link:

https://www.syncfusion.com/downloads/support/directtrac/general/ze/PdfViewer_CustomToolbar-1696570670

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied