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"
}
]
}]
This section provides a detailed description of each block of options, their names and their purposes.
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:
2.the "excel-import" option allows importing data from Excel
3.the "excel-export" option allows exporting data into Excel.
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-filters"},
{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:
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:
2.the ‘graph’ select contains:
3.the "add-comment" option adds a comment into a cell
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:
2.the "create-filter" option sets a filter in a cell
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.
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.
In case you want to remove some blocks or options from the default configuration, set the menu array without them.
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:
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"
}]
}
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" });
}
}
}
});
Back to top