# Toolbar

The Telerik UI for ASP.NET Core Spreadsheet component supports a variety of options for customizing its Toolbar.
In this article, you will find information about the available options and the tools that you can configure in the Toolbar of the Spreadsheet component.

## Options

The Toolbar of the Spreadsheet supports the following options:

* [`File`](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/data-management/spreadsheet/toolbar#file)—Configures the tools displayed in the `File` tab.
* [`Home`](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/data-management/spreadsheet/toolbar#home)—Configures the `Home` tab of the toolbar in the component.
* [`Insert`](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/data-management/spreadsheet/toolbar#insert)—Configures the `Insert` tab of the toolbar in the component.
* [`Format`](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/data-management/spreadsheet/toolbar#format)—Configures the `Format` tab of the toolbar in the component.
* [`Data`](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/data-management/spreadsheet/toolbar#data)—Configures the `Data` tab of the toolbar in the component.
* [`View`](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/data-management/spreadsheet/toolbar#view)—Configures the `View` tab of the toolbar in the component.

You can enable or disable each Toolbar's tab by setting its option to a boolean value.

### File

The `File` option accepts a boolean or a configuration of tools that will be available in the `File` tab in the Toolbar.

You can configure any of the following options in the `File` configuration:

* `Open`—Opens an existing spreadsheet file.
* `ExportAs`—Exports the spreadsheet content in various formats.

The following example demonstrates how to set the `File` option in the Toolbar declaration of the Spreadsheet:

```Razor HtmlHelper
    <script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>

    @(Html.Kendo().Spreadsheet()
        .Name("spreadsheet")
        .Toolbar(t => t.File(f => f.Open()))
    )
```

```Razor TagHelper
    @addTagHelper *, Kendo.Mvc
    <script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
    
    <kendo-spreadsheet name="spreadsheet">
        <toolbar>
            <file><tool name="open"></tool></file>
        </toolbar>
    </kendo-spreadsheet>
```

### Home

The `Home` option receives a boolean or a configuration of tools that will be available in the Spreadsheet for this option.

You can configure any of the following options in the `Home` configuration:

* `Cut`—Cuts the selected content.
* `Copy`—Copies the selected content.
* `Paste`—Pastes copied content.
* `Bold`—Makes text bold.
* `Italic`—Makes text italic.
* `Underline`—Underlines text.
* `BackgroundColor`—Changes the background color of selected cells.
* `TextColor`—Changes the text color.
* `Borders`—Applies borders to cells.
* `FontSize`—Changes the font size.
* `FontFamily`—Changes the font family.
* `Alignment`—Aligns cell content.
* `TextWrap`—Wraps text within a cell.

The following example demonstrates how to set the Home option in the toolbar declaration of the Spreadsheet:

```Razor HtmlHelper
    <script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>

    @(Html.Kendo().Spreadsheet()
        .Name("spreadsheet")
        .Toolbar(t => t.Home(h => h.Italic()))
    )
```

```Razor TagHelper
    @addTagHelper *, Kendo.Mvc
    <script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
    
    <kendo-spreadsheet name="spreadsheet">
        <toolbar>
            <home><tool name="italic"></tool></home>
        </toolbar>
    </kendo-spreadsheet>
```

### Insert

The `Insert` option receives a boolean or a configuration of tools that will be available in the Spreadsheet for this option.

You can configure any of the following options in the `Insert` configuration:

* `InsertComment`—Adds a comment to a cell.
* `Hyperlink`—Inserts a hyperlink.
* `InsertImage`—Inserts an image.
* `AddColumnLeft`—Adds a column to the left of the selected column.
* `AddColumnRight`—Adds a column to the right of the selected column.
* `AddRowBelow`—Adds a row below the selected row.
* `AddRowAbove`—Adds a row above the selected row.
* `DeleteColumn`—Deletes the selected column.
* `DeleteRow`—Deletes the selected row.

The following example demonstrates how to set the Insert option in the toolbar declaration of the Spreadsheet:

```Razor HtmlHelper
    <script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>

    @(Html.Kendo().Spreadsheet()
        .Name("spreadsheet")
        .Toolbar(t => t.Insert(i => i.DeleteRow()))
    )
```

```Razor TagHelper
    @addTagHelper *, Kendo.Mvc
    <script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>

    <kendo-spreadsheet name="spreadsheet">
        <toolbar>
            <insert><tool name="deleteRow"></tool></insert>
        </toolbar>
    </kendo-spreadsheet>
```

### Format

The `Format` option receives a boolean or a configuration of tools that will be available in the Spreadsheet for this option.

You can configure any of the following options in the `Format` configuration:

* `Format`—Applies a predefined number format.
* `FormatDecreaseDecimal`—Decreases the number of decimal places.
* `FormatIncreaseDecimal`—Increases the number of decimal places.

The following example demonstrates how to set the Format option in the toolbar declaration of the Spreadsheet:

```Razor HtmlHelper
    <script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>

    @(Html.Kendo().Spreadsheet()
        .Name("spreadsheet")
        .Toolbar(t => t.Format(f => f.Format()))
    )
```

```Razor TagHelper
    @addTagHelper *, Kendo.Mvc
    <script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>

    <kendo-spreadsheet name="spreadsheet">
        <toolbar>
            <format><tool name="format"></tool></format>
        </toolbar>
    </kendo-spreadsheet>
```

### Data

The `Data` option receives a boolean or a configuration of tools that will be available in the Spreadsheet for this option.

You can configure any of the following options in the `Data` configuration:

* `Sort`—Sorts the selected data.
* `Filter`—Applies a filter to the data.
* `Validation`—Defines data validation rules.

The following example demonstrates how to set the Data option in the toolbar declaration of the Spreadsheet:

```Razor HtmlHelper
    <script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>

    @(Html.Kendo().Spreadsheet()
        .Name("spreadsheet")
        .Toolbar(t => t.Data(d => d.Sort()))
    )
```

```Razor TagHelper
    @addTagHelper *, Kendo.Mvc
    <script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>

    <kendo-spreadsheet name="spreadsheet">
        <toolbar>
            <data><tool name="sort"></tool></data>
        </toolbar>
    </kendo-spreadsheet>
```

### View

The `View` option receives a boolean or a configuration of tools that will be available in the Spreadsheet for this option.

You can configure any of the following options in the `View` configuration:

* `Freeze`—Freezes rows or columns to keep them visible while scrolling.
* `Merge`—Merges selected cells.
* `ToggleGridlines`—Shows or hides gridlines.

The following example demonstrates how to set the View option in the toolbar declaration of the Spreadsheet:

```Razor HtmlHelper
    <script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>

    @(Html.Kendo().Spreadsheet()
        .Name("spreadsheet")
        .Toolbar(t => t.View(v => v.Merge()))
    )
```

```Razor TagHelper
    @addTagHelper *, Kendo.Mvc
    <script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>

    <kendo-spreadsheet name="spreadsheet">
        <toolbar>
            <view><tool name="merge"></tool></view>
        </toolbar>
    </kendo-spreadsheet>
```

### Grouping

Every option of the ToolBar can implement the configurations as a group. The following example demonstrates how to set a group of configurations for an option:

```Razor HtmlHelper
    <script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>

    @(Html.Kendo().Spreadsheet()
        .Name("spreadsheet")
        .Toolbar(toolbar => toolbar
            .Insert(home => home
                .Group(group =>
                {
                    group.Bold();
                    group.Italic();
                    group.Underline();
                })
            )
        )
    )
```

```Razor TagHelper
    @addTagHelper *, Kendo.Mvc
    <script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>

    <kendo-spreadsheet name="spreadsheet">
        <toolbar>
            <insert enabled="true">
                <group>
                    <tool name="bold" />
                    <tool name="italic" />
                    <tool name="underline" />
                </group>
            </insert>
        </toolbar>
    </kendo-spreadsheet>
```

## See Also

* [Basic Usage of the Spreadsheet HtmlHelper for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/spreadsheet/index)

* [API Reference of the Spreadsheet HtmlHelper for ASP.NET Core](https://www.telerik.com/aspnet-core-ui/documentation/api/spreadsheet)

* [API Reference of the Spreadsheet TagHelper for ASP.NET Core](https://www.telerik.com/aspnet-core-ui/documentation/api/taghelpers/spreadsheet)