toolbar - API Reference - Kendo UI Spreadsheet

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

configuration

A Boolean value which indicates if the toolbar will be displayed.

Apart from the built-in tools, the Spreadsheet File, Home, Insert, Format, Data and View ToolBars fully expose the ToolBar.items API. This way you can specify any custom tools in the widget using the components available in the ToolBar itself:

Boolean|Object

Default: true

<div id="spreadsheet"></div>
<script>
    $("#spreadsheet").kendoSpreadsheet({
        toolbar: {
            home: [ {
                type: "button",
                text: "Button"
            }, {
                type: "button",
                text: "Toggle",
                togglable: true,
                icon: "cancel"
            }, {
                type: "splitButton",
                text: "SplitButton",
                menuButtons: [{text: "Option 1"}, {text: "Option 2"}]
            } ]
        }
    });
</script>

toolbar.data

Boolean|Array

A Boolean value which indicates if the Data tab or a collection of tools that will be shown in the Data tab will be displayed.

The available tools are:

sort
filter
validation

Default: true

<div id="spreadsheet"></div>
<script>
    $("#spreadsheet").kendoSpreadsheet({
        toolbar: {
            data: ["validation"]
        }
    });
</script>

<div id="spreadsheet"></div>
<script>
    $("#spreadsheet").kendoSpreadsheet({
        toolbar: {
            data: false
        }
    });
</script>

toolbar.file

Boolean|Array

A Boolean value which indicates if the File tab or a collection of tools that will be shown in the Home tab will be displayed.

The following list indicates the available tools.

open
exportAs

Default: true

<div id="spreadsheet"></div>
<script>
    $("#spreadsheet").kendoSpreadsheet({
        toolbar: {
            file: ["exportAs"]
        }
    });
</script>

<div id="spreadsheet"></div>
<script>
    $("#spreadsheet").kendoSpreadsheet({
        toolbar: {
            file: false
        }
    });
</script>

<div id="spreadsheet"></div>
<script>
    $("#spreadsheet").kendoSpreadsheet({
        toolbar: {
            file: [
                // for all available options, see the toolbar items configuration
                // https://docs.telerik.com/kendo-ui/api/ui/toolbar/configuration/items
                {
                    type: "button",
                    text: "Custom",
                    showText: "both",
                    icon: "k-icon k-i-cog",
                    click: function() {
                        window.alert("custom tool");
                    }
                }
            ]
        }
    });
</script>

toolbar.format

Boolean|Array

A Boolean value which indicates if the Format tab or a collection of tools that will be shown in the Format tab will be displayed.

The following list indicates the available tools

format
formatDecreaseDecimal
formatIncreaseDecimal

Default: true

<div id="spreadsheet"></div>
<script>
    $("#spreadsheet").kendoSpreadsheet({
        toolbar: {
            format: [ ["formatDecreaseDecimal", "formatIncreaseDecimal"] ]
        }
    });
</script>

<div id="spreadsheet"></div>
<script>
    $("#spreadsheet").kendoSpreadsheet({
        toolbar: {
            format: false
        }
    });
</script>

toolbar.home

Boolean|Array

A Boolean value which indicates if the Home tab or a collection of tools that will be shown in the Home tab will be displayed.

The following list indicates the available tools. The tools which are part of a tool group are defined as an array. For example ["bold", "italic", "underline"].

[undo, redo]
[cut, copy, paste]
[bold, italic, underline]
backgroundColor, textColor
borders
fontSize, fontFamily
alignment
textWrap

Default: true

<div id="spreadsheet"></div>
<script>
    $("#spreadsheet").kendoSpreadsheet({
        toolbar: {
            home: [ ["bold", "italic"], "format" ]
        }
    });
</script>

<div id="spreadsheet"></div>
<script>
    $("#spreadsheet").kendoSpreadsheet({
        toolbar: {
            home: false
        }
    });
</script>

<div id="spreadsheet"></div>
<script>
    $("#spreadsheet").kendoSpreadsheet({
        toolbar: {
            home: [
                // for all available options, see the toolbar items configuration
                // https://docs.telerik.com/kendo-ui/api/ui/toolbar/configuration/items
                {
                    type: "button",
                    text: "Custom",
                    showText: "both",
                    icon: "k-icon k-i-cog",
                    click: function() {
                        window.alert("custom tool");
                    }
                }
            ]
        }
    });
</script>

toolbar.insert

Boolean|Array

A Boolean value which indicates if the Insert tab or a collection of tools that will be shown in the Insert tab will be displayed.

The following list indicates the available tools. The tools which are part of a tool group are defined as an array. For example ["deleteColumn", "deleteRow"].

insertComment
hyperlink
insertImage
[ addColumnLeft, addColumnRight, addRowBelow, addRowAbove ]
[ deleteColumn, deleteRow ]

Default: true

<div id="spreadsheet"></div>
<script>
    $("#spreadsheet").kendoSpreadsheet({
        toolbar: {
            insert: [ ["deleteColumn", "deleteRow"] ]
        }
    });
</script>

<div id="spreadsheet"></div>
<script>
    $("#spreadsheet").kendoSpreadsheet({
        toolbar: {
            insert: false
        }
    });
</script>

toolbar.view

Boolean|Array

A Boolean value which indicates if the View tab or a collection of tools that will be shown in the View tab will be displayed.

The following list indicates the available tools

freeze
merge
toggleGridlines

Default: true

<div id="spreadsheet"></div>
<script>
    $("#spreadsheet").kendoSpreadsheet({
        toolbar: {
            view: [ ["freeze", "toggleGridlines"] ]
        }
    });
</script>

<div id="spreadsheet"></div>
<script>
    $("#spreadsheet").kendoSpreadsheet({
        toolbar: {
            view: false
        }
    });
</script>