Menu Configuration Settings
You can add a dropdown menu at the top of the SpreadSheet. It allows saving space on the toolbar, moving some of its commands to the menu.
To add a default menu, set the menu property to true.
webix.ui({
view:"spreadsheet",
data: math_data_simple,
menu: true
});
Settings for the default menu are specified in the menu configuration array. This array contains objects, each representing a single block of the menu. These objects have the id property with the name of the block, and the submenu property with the array of objects representing menu options. Each object in submenu can also have the id with the name of the block or option and (optionally) submenu.
const menu = [{
id: "file",
submenu: [{
id: "sheet",
submenu: [{
id: "new-sheet"
},
{
id: "copy-sheet"
},
{
id: "remove-sheet"
},
{
id: "hide-sheet"
}
]
},
{
id: "excel-import"
},
{
id: "excel-export"
},
{
id: "print"
},
{
id: "print-borders"
}
]
},
{
id: "data",
submenu: [{
id: "sort",
submenu: [{
id: "sort-asc"
},
{
id: "sort-desc"
}
]
},
{
id: "create-filter"
}
]
}]
Menu Blocks
This section provides a detailed description of each block of options, their names and their purposes.
File block
This block includes a set of options for manipulations with sheets:
webix.ui({
view:"spreadsheet",
data:base_data,
menu:[{ id:"file", submenu:[
{id: "sheet", submenu: [
{id: "new-sheet"},
{id: "copy-sheet"},
{id: "remove-sheet"},
{id: "hide-sheet"}
]},
{id: "excel-import"},
{id: "excel-export"},
{id: "print"},
{id: "print-borders"}
]}]
});
1.The "sheet" selector, which allows working with a sheet and contains three options:
- "new-sheet" - for creating a new sheet
- "copy-sheet" - for copying the sheet's content into a new sheet
- "remove-sheet" - for removing a sheet.
- "hide-sheet" - for hiding a sheet.
2.the "excel-import" option allows importing data from Excel
3.the "excel-export" option allows exporting data into Excel.
Edit block
This block includes a set of options for editing the cell's content:
view:"spreadsheet",
menu:[{ id:"edit", submenu:[
{id: "add-range"},
{id: "add-dropdown"},
{id: "add-link"},
{id: "lock-cell"},
{id: "conditional-format"},
{id: "clear", submenu:[
{id: "clear-value"},
{id: "clear-style"},
{id: "clear-conditional-formats"},
{id: "clear-dropdown-editors"},
{id: "clear-comments"},
{ $template:"Separator" },
{id: "clear-all"}
]}
]}]
1.the "add-range" option sets a named range of cells for using it further in math formulas
2.the "add-dropdown" option creates an editor with options in a cell
3.the "add-link" option sets a link in a cell
4.the "lock-cell" option blocks/allows editing of the cell's value
5.the "conditional-format" option allows specifying a particular style for a cell, depending on a certain condition
6.the "clear" select contains a set of options for clearing a cell:
- the "clear-value" - for clearing the cell value
- the "clear-style" - for clearing styles applied to a cell
- the "clear-conditional-formats" - for clearing conditional formatting applied to a cell
- the "clear-dropdown-editors" - for clearing applied filters and dropdown lists
- the "clear-comments" - for clearing the comments
- the "clear-all" - for clearing all of the above
Insert block
This block includes a set of options for additional content, which can be attached to cells:
view:"spreadsheet",
menu:[{ id:"insert", submenu:[
{id: "image", submenu:[
{ id: "add-image-cell"},
{ id: "add-image-top"}
]},
{id: "graph", submenu:[
{ id: "add-sparkline"},
{ id: "add-chart"}
]},
{id: "add-comment"}
]}]
1.the "image" select contains:
- "add-image-cell" inserts an image into a cell
- "add-image-top" adds an image above cells
2.the ‘graph’ select contains:
- "add-sparkline" inserts a sparkline into a cell
- "add-chart" inserts a chart above cells
3.the "add-comment" option adds a comment into a cell
Data block
This block includes options for sorting and filtering cells data:
view:"spreadsheet",
menu:[{ id:"data", submenu:[
{id: "sort", submenu: [
{id: "sort-asc"},
{id: "sort-desc"}
]},
{id: "create-filter"}
]}]
1.the ‘sort’ select contains:
- "sort-asc" option is used for sorting in ascending direction
- "sort-desc" option is used for sorting in descending direction
2.the "create-filter" option sets a filter in a cell
View block
This block includes options for columns/rows operations:
view:"spreadsheet",
menu:[{ id: "view", submenu:[
{id: "columns", submenu: [
{id: "insert-column"},
{id: "delete-column"},
{id: "show-column"},
{id: "hide-column"},
{id: "resize-column"}
]},
{id: "rows", submenu: [
{id: "insert-row"},
{id: "delete-row"},
{id: "show-row"},
{id: "hide-row"},
{id: "resize-row"}
]},
{ $template:"Separator" },
{id: "freeze-columns"},
{id: "freeze-rows"},
{id: "hide-gridlines"},
{id: "hide-headers"},
{id: "show-formulas"}
]}]
1.the "column" select is used to insert, delete,show, hide, resize columns
2.the "row" select contains similar options for rows
3.the "freeze-rows" option freezes and unfreezes rows
4.the "freeze-columns" option freezes and unfreezes rows
5.the "hide-gridlines" option toggles gridlines of Spreadsheet
6.the "hide-headers" option toggles the headers of rows and columns
7.the "show-formulas" option shows formulas in cells instead of values
Note that all available default options are already added to the menu. You can only delete or reorder them.
Customizing Menu
You can change the top menu in two ways: by setting the menu property as an array of options or by changing this array in the onViewInit handler.
Customizing via configuration
Removing a block or an option
In case you want to remove some blocks or options from the default configuration, set the menu array without them.
Adding a custom block or an option
To add custom option/block into the menu, you should specify it as a value of the id property, and its label as a value of the value property.
There are two ways to add a label to a custom option/block:
- via the locale
- via the value property.
If you are using locale, key would be the value of the id property of your option and value would be the label:
webix.i18n.spreadsheet.menus["new-option"] = "New option";
Then you can add your option to the menu array during SpreadSheet configuration:
menu:[{ id: "new-option" }]
Another way to add a label is to set the value property directly at the menu array while also setting the id property of your option:
menu:[{ id: "new-option", value: "New option" }]
Note that this method won't allow localization.
To define the action that will be triggered when your option is selected, you should attach a handler to Spreadsheet onCommand event:
webix.ready(function(){
webix.ui({
view:"spreadsheet",
data:base_data,
menu:[{ id: "new-option", value: "My option"}],
on:{
onCommand(obj) {
if (obj.id === "new-option")
webix.message("click on custom option");
}
}
});
});
If you want to add an option from the existing list of commands, specify it as a value of the id property of the corresponding object in the submenu array:
{
id: "my-options",
value: "My Options",
submenu: [{
id: "excel-import"
}, {
id: "new-sheet"
}]
}
Customizing via event
You can also use the onViewInit event to add or remove custom blocks and options of the default menu. For example, this is how you can add an option:
webix.ui({
view:"spreadsheet",
menu:true,
on:{
onViewInit(view, config){
if (view == "menu"){
config.data.push({ id: "new-option", value: "New option" });
}
}
}
});