toolbar Boolean|Object (default: true)

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:

Example

<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.file Boolean|Array (default: true)

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

Example - customizing the File tab

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

Example - disabling the File tab

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

Example - showing a custom tool

<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/javascript/ui/toolbar/configuration/items
                {
                    type: "button",
                    text: "Custom",
                    showText: "both",
                    icon: "k-icon k-i-cog",
                    click: function() {
                        window.alert("custom tool");
                    }
                }
            ]
        }
    });
</script>

toolbar.home Boolean|Array (default: true)

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

Example - customizing the Home tab

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

Example - disabling the Home tab

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

Example - showing a custom tool

<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/javascript/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 (default: true)

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 ]

Example - customizing the Insert tab

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

Example - disable insert tab

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

toolbar.format Boolean|Array (default: true)

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

Example - customizing the Format tab

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

Example - disable format tab

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

toolbar.data Boolean|Array (default: true)

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

Example - customizing the Data tab

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

Example - disabling the Data tab

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

toolbar.view Boolean|Array (default: true)

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

Example - customizing the View tab

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

Example - disable view tab

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