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

Toolbar.items

configuration

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.

toolbar.items

Array

<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.items.attributes

Object

Specifies the HTML attributes of a ToolBar button.

<div id="pdfviewer"></div>
<script type="module">
$("#pdfviewer").kendoPDFViewer({
    toolbar: {
        items: [
            {
                type: "button",
                text: "Custom",
                attributes: {
                    "data-action": "custom",
                    "title": "Custom Action"
                }
            },
            "pager"
        ]
    },
    pdfjsProcessing: {
        file: {
            url: "https://demos.telerik.com/kendo-ui/content/web/pdfViewer/sample.pdf"
        }
    }
});
</script>

toolbar.items.click

Function

Specifies the click event handler of the button.

<div id="pdfviewer"></div>
<script type="module">
$("#pdfviewer").kendoPDFViewer({
    toolbar: {
        items: [
            {
                type: "button",
                text: "Custom",
                click: function(e) {
                    console.log("Custom button clicked");
                }
            },
            "pager"
        ]
    },
    pdfjsProcessing: {
        file: {
            url: "https://demos.telerik.com/kendo-ui/content/web/pdfViewer/sample.pdf"
        }
    }
});
</script>

toolbar.items.command

String

Default commands in the PDF Viewer are:

OpenCommand
PageChangeCommand
DownloadCommand
EnableSelectionCommand
EnablePanCommand
ExportCommand

<div id="pdfviewer"></div>
<script type="module">
$("#pdfviewer").kendoPDFViewer({
    toolbar: {
        items: [
            { type: "pager", command: "PageChangeCommand" },
            { type: "button", text: "Download", command: "DownloadCommand" }
        ]
    },
    pdfjsProcessing: {
        file: {
            url: "https://demos.telerik.com/kendo-ui/content/web/pdfViewer/sample.pdf"
        }
    }
});
</script>

PrintCommand
OpenSearchCommand
ZoomCommand

toolbar.items.enable

Boolean

Specifies whether the control is initially enabled or disabled. Default value is "true".

Default: true

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

toolbar.items.hidden

Boolean

Determines if a button is visible or hidden. By default buttons are visible.

Default: false

<div id="pdfviewer"></div>
<script type="module">
$("#pdfviewer").kendoPDFViewer({
    toolbar: {
        items: [
            {
                type: "button",
                text: "Hidden Button",
                hidden: true
            },
            "pager"
        ]
    },
    pdfjsProcessing: {
        file: {
            url: "https://demos.telerik.com/kendo-ui/content/web/pdfViewer/sample.pdf"
        }
    }
});
</script>

toolbar.items.icon

String

Sets icon for the item. The icon should be one of the existing in the Kendo UI theme sprite.

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

toolbar.items.id

String

Specifies the ID of the button.

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

toolbar.items.imageUrl

String

If set, the ToolBar will render an image with the specified URL in the button.

<div id="pdfviewer"></div>
<script type="module">
$("#pdfviewer").kendoPDFViewer({
    toolbar: {
        items: [
            {
                type: "button",
                text: "Custom Image",
                imageUrl: "https://demos.telerik.com/kendo-ui/content/shared/icons/sports/snowboarding.png"
            },
            "pager"
        ]
    },
    pdfjsProcessing: {
        file: {
            url: "https://demos.telerik.com/kendo-ui/content/web/pdfViewer/sample.pdf"
        }
    }
});
</script>

toolbar.items.name

String

Specifies the tool's name. Tool definition will be taken from the default collection - kendo.pdfviewer.DefaultTools

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

toolbar.items.overflow

String

Specifies the overflow behavior of the toolbar item. Accepts auto, never, or always to control when the item appears in the toolbar's overflow menu.

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

toolbar.items.primary

Boolean

Specifies whether the button is primary. Primary buttons receive different styling.

Default: false

<div id="pdfviewer"></div>
<script type="module">
$("#pdfviewer").kendoPDFViewer({
    toolbar: {
        items: [
            {
                type: "button",
                text: "Important Action",
                primary: true
            },
            "pager"
        ]
    },
    pdfjsProcessing: {
        file: {
            url: "https://demos.telerik.com/kendo-ui/content/web/pdfViewer/sample.pdf"
        }
    }
});
</script>

toolbar.items.showIcon

String

Specifies where the button icon will be displayed. Possible values are: "toolbar", "overflow" or "both" (default).

Default: "both"

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

toolbar.items.showText

String

Specifies where the text will be displayed. Possible values are: "toolbar", "overflow" or "both" (default).

Default: "both"

<div id="pdfviewer"></div>
<script type="module">
$("#pdfviewer").kendoPDFViewer({
    toolbar: {
        items: [
            {
                type: "button",
                text: "Open File",
                command: "OpenCommand",
                showText: "toolbar"
            },
            "pager"
        ]
    },
    pdfjsProcessing: {
        file: {
            url: "https://demos.telerik.com/kendo-ui/content/web/pdfViewer/sample.pdf"
        }
    }
});
</script>

toolbar.items.spriteCssClass

String

Defines a CSS class (or multiple classes separated by spaces) which will be used for button icon.

<div id="pdfviewer"></div>
<script type="module">
$("#pdfviewer").kendoPDFViewer({
    toolbar: {
        items: [
            {
                type: "button",
                text: "Custom Icon",
                spriteCssClass: "k-icon k-i-star"
            },
            "pager"
        ]
    },
    pdfjsProcessing: {
        file: {
            url: "https://demos.telerik.com/kendo-ui/content/web/pdfViewer/sample.pdf"
        }
    }
});
</script>

toolbar.items.template

String|Function

Specifies what element will be added in the ToolBar wrapper. Items with template does not have a type.

<div id="pdf-viewer"></div>
<script type="module">
  $("#pdf-viewer").kendoPDFViewer({
    toolbar: {
      items: [
        {
          name: "myCustomTool",
          template: "<button>My custom button </button>"
        }
      ]
    }
  });
</script>

toolbar.items.text

String

Sets the text of the button.

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

toolbar.items.togglable

Boolean

Specifies if the button is togglable, e.g. has a selected and unselected state.

Default: false

<div id="pdfviewer"></div>
<script type="module">
$("#pdfviewer").kendoPDFViewer({
    toolbar: {
        items: [
            {
                type: "button",
                text: "Selection Mode",
                togglable: true,
                command: "EnableSelectionCommand"
            },
            "pager"
        ]
    },
    pdfjsProcessing: {
        file: {
            url: "https://demos.telerik.com/kendo-ui/content/web/pdfViewer/sample.pdf"
        }
    }
});
</script>

toolbar.items.toggle

Function

Specifies the toggle event handler of the button. Applicable only for commands of type button and togglable: true.

<div id="pdfviewer"></div>
<script type="module">
$("#pdfviewer").kendoPDFViewer({
    toolbar: {
        items: [
            {
                type: "button",
                text: "Toggle",
                togglable: true,
                toggle: function(e) {
                    console.log("Toggle state: " + e.checked);
                }
            },
            "pager"
        ]
    },
    pdfjsProcessing: {
        file: {
            url: "https://demos.telerik.com/kendo-ui/content/web/pdfViewer/sample.pdf"
        }
    }
});
</script>

toolbar.items.type

String

Specifies the type of toolbar item to be rendered. Supported types include button, separator, spacer, splitButton, buttonGroup, and template as defined by the ToolBar component.

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