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:
- Bind to the
clickevent of the PDFViewer Toolbar. - Set the default search text value in the search input.
- Use a
setTimeoutfunction 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.