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—Configures the tools displayed in theFiletab.Home—Configures theHometab of the toolbar in the component.Insert—Configures theInserttab of the toolbar in the component.Format—Configures theFormattab of the toolbar in the component.Data—Configures theDatatab of the toolbar in the component.View—Configures theViewtab 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:
<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:
<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:
<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:
<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:
<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:
<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:
<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();
})
)
)
)