This is a migrated thread and some comments may be shown as answers.

Customizing PDF Viewer toolbar in cshtml file

3 Answers 26 Views
PDFViewer
This is a migrated thread and some comments may be shown as answers.
Scot
Top achievements
Rank 1
Scot asked on 29 Sep 2020, 06:04 PM

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?

3 Answers, 1 is accepted

Sort by
0
Accepted
Petar
Telerik team
answered on 02 Oct 2020, 01:55 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Scot
Top achievements
Rank 1
answered on 02 Oct 2020, 02:06 PM

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>

0
Petar
Telerik team
answered on 07 Oct 2020, 09:29 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
PDFViewer
Asked by
Scot
Top achievements
Rank 1
Answers by
Petar
Telerik team
Scot
Top achievements
Rank 1
Share this question
or