toolbar Boolean|Object (default: true)

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

Apart from the built-in tools, the Spreadsheet Home, Insert and Data 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.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"].

• open
• exportAs
• [cut, copy, paste]
• [bold, italic, underline]
• backgroundColor, textColor
• borders
• fontSize, fontFamily
• alignment
• textWrap
• [formatDecreaseDecimal, formatIncreaseDecimal]
• format
• merge
• freeze
• filter

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"].

• [ 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.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>