SpreadSheet consists of two main parts: a toolbar with instruments and a stylized datatable.
The full structure of SpreadSheet can be presented as:
The toolbar contains a panel with instruments for editing and formatting the content of table's cells.
There are two modes of displaying a toolbar: the "default" short one and the "full" one. In the default mode, toolbar is shown with a limited set of buttons.
To show all available buttons on the toolbar, you should specify the "full" mode, using the toolbar property:
webix.ui({
view:"spreadsheet",
data: base_data,
toolbar: "full"
});
Related sample: Toolbar with all buttons
To refer to the toolbar object, first you need to specify the id of a toolbar in the toolbar configuration.
var bar = {
view: "toolbar",
css: "webix_ssheet_toolbar webix_layout_toolbar",
id: "bar",
elements: [{...}]
}
Then you can address the toolbar via its id.
spreadsheet.$$("bar");
This section provides a detailed description of each block of buttons, their names and their purposes.
It includes the "sheet" select, which allows working with a sheet and contains three options:
and three buttons:
It includes two buttons:
This block contains a large group of buttons for setting fonts and cell borders:
Beside managing Horizontal and Vertical cell alignment, this block also includes means of text wrapping and merging cells' content:
This block contains the "format" select, which sets the format of cell content. The available formats are:
Besides, it includes a pair of buttons "increase-decimals" and "decrease-decimals" which allow increase/decrease the number of decimal places.
The block includes a set of buttons for editing the cell's content:
Settings for the default toolbar are specified in the buttons configuration object. It contains the names of button blocks as parameters. The parameters' values are arrays of buttons that are included into the blocks.
buttons: {
"undo": ["undo","redo"],
"font": ["font-family","font-size","font-weight","font-style",
"text-decoration","color","background","borders"],
"align": ["text-align","vertical-align","wrap","span"],
"format": ["format"]
}
The names of button blocks correspond to the properties defined in the localization files, which specify the language of its labels. The default toolbar specified through the buttons configuration object has a single level.
If you want to create a two-level toolbar with more buttons or to customize the "full" toolbar with the full set of buttons, you should follow the instructions described in the Customizing the "toolbar" collection section of the User Interface Guidelines chapter.
In case you want to remove some block or button specified in the default configuration, don't define them in the buttons object.
To add your own block of buttons into the toolbar, you should specify its name as a property in the "buttons" configuration. The value of this property is an array of buttons.
To add a custom button, you should specify its name in the array of buttons of the corresponding block.
If you don't want to show the block's name, add the "$" sign before the block's name.
buttons: {
"$title": [{
view: "label", width: 150, label: "My SpreadSheet"
}],
"undo": ["undo","redo"],
"text": ["font-weight","font-style","text-decoration","color"],
"My Block": [{
view: "button", name: "my-button", width: 100, label: "My Button",
tooltip: "Click this button", click: function(){webix.message("Click")}
}]
}
Related sample: Toolbar buttons
The datatable part of SpreadSheet features the same functionality that the Datatable widget does. So you can customize the datatable in SpreadSheet in various ways.
You can refer to the datatable object as follows:
spreadsheet.$$("cells");
For example, you can attach a context menu with some actions for datatable cells and call the handler function on the right click.
webix.ready(function(){
webix.ui({
view:"spreadsheet",
id:"ss",
math:true,
data:base_data
});
webix.ui({
view:"contextmenu",
data:["Cut", "Copy", "Paste", "Delete"],
click:function(id, event){
var cell = this.getContext().id;
webix.message(id+" on row "+cell.row+" of the column "+cell.column);
}).attachTo( $$("ss").$$("cells"));
});
Back to top