toolbar

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

configuration

Toolbar option accepts a Boolean value which indicates if the toolbar will be displayed or an Object with items and overflow configuration. Inherits Kendo UI Toolbar.

Boolean|Object

Default: true

<div id="pdfviewer"></div>
<script type="module">
$("#pdfviewer").kendoPDFViewer({
    toolbar: {
        items: ["pager", "spacer", "open", "download"],
        contextMenu: false
    },
    pdfjsProcessing: {
        file: {
            url: "https://demos.telerik.com/kendo-ui/content/web/pdfViewer/sample.pdf"
        }
    }
});
</script>

toolbar.contextMenu

Boolean

When this option is set to true, the toolbar will render a dropdown button as its first item. The dropdown will contain the open, download and print tools instead of them being rendered on the right-side of the toolbar.

Default: false

<div id="pdfviewer"></div>
<script type="module">
$("#pdfviewer").kendoPDFViewer({
    toolbar: {
        contextMenu: true
    },
    pdfjsProcessing: {
        file: {
            url: "https://demos.telerik.com/kendo-ui/content/web/pdfViewer/sample.pdf"
        }
    }
});
</script>

toolbar.items

Array

The following list indicates the default tools:

pager
zoomInOut
zoom
toggleSelection
search
open
download
print
annotations

For DPL Processing exportAs tool could be configured to export a single page to .png or .svg.

<div id="pdf-viewer"></div>
<script type="module">
    $("#pdf-viewer").kendoPDFViewer({
        toolbar: {
            items: [
              "pager", "spacer", "open", "download"
            ]
        }
    });
</script>

<div id="pdf-viewer"></div>
<script type="module">
    $("#pdf-viewer").kendoPDFViewer({
        toolbar: {
            items: [
              { type: "pager", input: false, previousNext: true, command: "PageChangeCommand"}
            ]
        }
    });
</script>

<div id="pdf-viewer"></div>
<script type="module">
    $("#pdf-viewer").kendoPDFViewer({
        toolbar: {
            items: [
              { type: "zoom", combobox: { zoomLevels: [50, 100, 200]}, command: "ZoomCommand"}
            ]
        }
    });
</script>

Apart from the built-in tools, the PDFViewer fully exposes the ToolBar.items API. This way you can specify any custom tools in the widget using the components available in the ToolBar itself.

toolbar.overflow

Object

Specifies Toolbar.overflow configuration for the toolbar.

<div id="pdfviewer"></div>
<script type="module">
$("#pdfviewer").kendoPDFViewer({
    toolbar: {
        overflow: {
            mode: "scroll",
            scrollButtons: "visible"
        }
    },
    pdfjsProcessing: {
        file: {
            url: "https://demos.telerik.com/kendo-ui/content/web/pdfViewer/sample.pdf"
        }
    }
});
</script>

toolbar

toolbar.contextMenu

toolbar.items

toolbar.overflow

Related Members