Customizing PDF Viewer toolbar in cshtml file

[Scot]

The objective is to keep certain functions(open, download, span) off the toolbar and add other buttons to the toolbar (email, close).  Does anyone know how to add the ZoomCommand to the toolbar?

The following is what I have so far.

 

        <kendo-pdfviewer name="kendoPdfViewer" id="kendoPdfViewer">
            <pdfjs-processing file=@(Url.Content("/YourPage?handler=PdfHandler")) />
            <toolbar enabled="true">
                <pdfviewer-toolbar-items>
                    <pdfviewer-toolbar-item command="OpenCommand" type="button" name="open" icon="folder-open"></pdfviewer-toolbar-item>
                    <pdfviewer-toolbar-item command="PageChangeCommand" type="pager" name="pager"></pdfviewer-toolbar-item>
                    <pdfviewer-toolbar-item command="DownloadCommand" type="button" name="download" icon="download"></pdfviewer-toolbar-item>
                    @*The below commands have not been implemented.  Feel free to answer how the below is implemented.*@
                    @*<pdfviewer-toolbar-item command="EnableSelectionCommand"></pdfviewer-toolbar-item>*@
                    @*<pdfviewer-toolbar-item command="EnablePanCommand"></pdfviewer-toolbar-item>*@
                    @*<pdfviewer-toolbar-item command="ExportCommand"></pdfviewer-toolbar-item>*@
                    @*The above commands have not been implemented.*@
                    <pdfviewer-toolbar-item command="PrintCommand" type="button" name="print" icon="print"></pdfviewer-toolbar-item>
                    <pdfviewer-toolbar-item command="OpenSearchCommand" type="button" name="search" icon="search"></pdfviewer-toolbar-item>
                    @* How do you implement the ZoomCommand? *@
                    <pdfviewer-toolbar-item command="ZoomCommand" name="zoom"></pdfviewer-toolbar-item>
                    <pdfviewer-toolbar-item type="button" id="button1" text="Email" click="EmailClickHandler"></pdfviewer-toolbar-item>
                    <pdfviewer-toolbar-item type="button" id="button2" text="Close" click="CloseClickHandler"></pdfviewer-toolbar-item>
                </pdfviewer-toolbar-items>
            </toolbar>
        </kendo-pdfviewer>

<style>
    html body #kendoPdfViewer {
        width: 100% !important;
    }
</style>

<script>
        function EmailClickHandler(e) {
            console.log("EmailClickHandler");
        }
        function CloseClickHandler(e) {
            console.log("CloseClickHandler");
        }

    </script>

I added Open and Download just to get them working.  I will remove them before the production release.

Does someone know how to define the ZoomCommand?

[Petar]

Hi Scot,

Using the below code should define the Zoom toolbar item correctly inside the PDFViewer. 

<pdfviewer-toolbar-item name="zoom"></pdfviewer-toolbar-item>

Try the above code and let me know if it works as expected.

Regards,
Petar
Progress Telerik

[Scot]

I did get it figured out.  Yes your post works.  I came up with the same code.  Additionally for anyone wondering about the other control code for EnableSelectionCommand and EnablePanCommand, use the code below. 

<pdfviewer-toolbar-item name="toggleSelection"></pdfviewer-toolbar-item>

[Petar]

Hi Scot,

Thank you for sharing the additional information about the EnableSelectionCommand and EnablePanCommand commands! It will surely help someone in the future. 

Regards,
Petar
Progress Telerik