activatePage

Loads and scrolls to the page by number.

To run the below example, open it in Dojo

Example

    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.3.136/pdf.mjs" type="module"></script> <!-- Include pdf.js before the kendo scripts -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.3.136/pdf.worker.mjs" type="module"></script> <!-- Include pdf.worker.js before the kendo scripts -->
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2024.4.1112/js/kendo.all.min.js" type="module"></script>

    <div id="example">
        <div class="box">
            <div class="box-col">
                <h4>Change page</h4>
                <ul class="options">
                    <li>
                        <input id="numeric" type="number" title="numeric" value="17" min="1" max="3" step="1" style="width: 100%;" />
                    </li>
                </ul>
            </div>
        </div>
        <div id="pdfViewer">
        </div>
    </div>

    <script type="module">
        $(document).ready(function () {
            var numeric = $("#numeric").kendoNumericTextBox({
                change: onChange,
                spin: onSpin,
                format: "n0",
                value: 1
            }).data("kendoNumericTextBox");

            var pdfViewer = $("#pdfViewer").kendoPDFViewer({
                pdfjsProcessing: {
                    file: "https://demos.telerik.com/kendo-ui/content/web/pdfViewer/sample.pdf"
                },
                width: "100%",
                height: 700
            }).data("kendoPDFViewer");


            function onChange(e) {
                var value = this.value();
                changePdfViewerPage(value)
            }

            function onSpin(e) {
                var value = this.value();
                changePdfViewerPage(value)
            }

            function changePdfViewerPage(value) {
                pdfViewer.activatePage(value);
            }
        });
    </script>