New to Kendo UI for jQuery? Download free 30-day trial

Setting Default Search Text in PDFViewer's Search Box

Environment

Product Version
PDFViewer for Progress® Kendo UI® 2024.2.514

Description

When using the PDFViewer, I want to set a default search text that appears in the search textbox upon opening a PDF. The goal is to have the search box open automatically, display a predefined keyword, and highlight all matches within the PDF.

This KB article also answers the following questions:

  • How can I programmatically set search text in the PDFViewer's search box?
  • How to highlight all instances of a word in PDFViewer on load?
  • How to automatically open the search dialog with a predefined search text in PDFViewer?

Solution

To set a default search text in the PDFViewer's search box, handle the click event of the PDFViewer Toolbar. In the event handler, set the value of the search input. Then, use the same text to execute a search operation by accessing the private_searchDOM property of the PDFViewer. Below is an example of how to implement this:

  1. Bind to the click event of the PDFViewer Toolbar.
  2. Set the default search text value in the search input.
  3. Use a setTimeout function to ensure the search operation is triggered after setting the value.

<div id="pdfviewer"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.js"></script>
    <script>
      window.pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js';
    </script>
    <script>
      $("#pdfviewer").kendoPDFViewer({
        pdfjsProcessing: {
          file: "https://demos.telerik.com/kendo-ui/content/web/pdfViewer/sample.pdf"
        },
        messages: {      
          dialogs: {
            search: {
              inputLabel: 'My input label'
            }
          }
        }
      });

      $("#pdfviewer").data('kendoPDFViewer').toolbar.bind('click',function(e){
        if($(e.target).find('.k-svg-i-search').length > 0){          
          $('.k-search-dialog-input').val('Telerik DevCraft');
          setTimeout(() => {
            $("#pdfviewer").data('kendoPDFViewer')._searchDOM.search("Telerik DevCraft")
          });
        }        
      })
    </script>

Notes

  • This approach relies on internal properties (_searchDOM) which may change in future versions of Kendo UI. Use it with caution and test after updates.

See Also

In this article