ASP.NET MVC Data Management Spreadsheet Toolbar

New to Telerik UI for ASP.NET MVC? Start a free 30-day trial

The Telerik UI for ASP.NET MVC 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—Configures the tools displayed in the File tab.
Home—Configures the Home tab of the toolbar in the component.
Insert—Configures the Insert tab of the toolbar in the component.
Format—Configures the Format tab of the toolbar in the component.
Data—Configures the Data tab of the toolbar in the component.
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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    <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();
                })
            )
        )
    )