destroy

Destroys the widget.

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">
            <ul class="options">
                <li>
                    <button class="k-button" id="destroyBtn" type="button">Destroy the widget</button>
                </li>
            </ul>
    </div>
    <div id="pdfViewer">
    </div>
</div>

<script type="module">
    $(document).ready(function () {

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

        $("#destroyBtn").click(function () {
          console.log('--- Before Destroy ---')
          console.log($("#pdfViewer").data("kendoPDFViewer"))
          $("#pdfViewer").data("kendoPDFViewer").destroy();
          console.log('--- After Destroy ---')
          console.log($("#pdfViewer").data("kendoPDFViewer"))

          // The destroy() method will destroy the PDFViewer widget. To remove the rendered component remove or empty the element from      which the widget has been initialized
          //$("#pdfViewer").remove()
        });
    });
</script>
In this article