Toolbar and its Customization

SpreadSheet consists of two main parts: a toolbar with instruments and a stylized datatable.

The full structure of SpreadSheet can be presented as:

• Toolbar:
  • File block
    • Sheets select
    • Import from Excel button
    • Export to Excel button
    • Print button
  • Undo/Redo block
    • Undo button
    • Redo button
  • Font block:
    • Font family select
    • Font size select
    • Font type buttons
    • Font color select
    • Background color select
    • Borders select
  • Align block:
    • Horizontal Align button
    • Vertical Align button
    • Text Wrap button
    • Merge button
  • Number block:
    
    • Number format select
    • Increase decimal places button
    • Decrease decimal places button
  • Edit block:
    
    • Sort A to Z button
    • Sort Z to A button
    • Create filter button
    • Named range button
    • Conditional format button
    • Lock/unlock cell button
    • Add link button
    • Create dropdown button
    • Clear button
  • Insert block:
    
    • Image button
    • Graph button
  • View block:
    • Row button
    • Column button
    • Hide/show gridlines button
    • Hide/show headers button
    • Freeze/unfreeze rows button
    • Freeze/unfreeze columns button
• DataTable

Toolbar

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");

Toolbar buttons

This section provides a detailed description of each block of buttons, their names and their purposes.

File block

It includes the "sheet" select, 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

and three buttons:

• "excel-import" button allows importing data from Excel
• "excel-export" button allows exporting data into Excel
• "print" - for printing the data from a sheet

Undo/Redo block

It includes two buttons:

• the "undo" button discards the recent change and Spreadsheet reverts to its previous state
• the "redo" button restores the cancelled (undone) change

Font block

This block contains a large group of buttons for setting fonts and cell borders:

• the "font-family" select allows choosing the necessary font
• the "font-size" select sets the font size
• the Font group of buttons helps to define the weight, style and decoration of the font:
  • the "font-weight" button
  • the "font-style" button
  • the "text-decoration" button
• the "color" select sets the font color
• the "background" select sets the background color
• the "borders" select is used to apply a new style for cell borders

Align block

Beside managing Horizontal and Vertical cell alignment, this block also includes means of text wrapping and merging cells' content:

• the "text-align" select allows specifying one of the three modes of text alignment in a cell: left, right or center
• the "vertical-align" select defines the mode of vertical text alignment in a cell: top, middle or bottom
• the "wrap" button lets wrap text in a cell
• the "span" button allows merging the content of several cells as well as splitting it

Number block

This block contains the "format" select, which sets the format of cell content. The available formats are:

• Common
• Currency
• Number
• Percent
• Custom

Besides, it includes a pair of buttons "increase-decimals" and "decrease-decimals" which allow increase/decrease the number of decimal places.

Edit block

The block includes a set of buttons for editing the cell's content:

• the "sort-asc" and "sort-desc" buttons are used for sorting in ascending and descending directions
• the "create-filter" button sets a filter in a cell
• the "add-range" button sets a named range of cells for using it further in math formulas
• the "conditional-format" button allows specifying a particular style for a cell, depending on a certain condition
• the "lock-cell" button blocks/allows editing of the cell's value
• the "add-link" button sets a link in a cell
• the "add-dropdown" button creates an editor with options in a cell
• 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-all" - for clearing all of the above

Insert block

• the "add-image" button adds an image into a cell
• the "add-sparkline" button inserts a sparkline into a cell
• the "add-comment" button adds a comment into a cell

View block

• the "row" button is used to insert, delete, hide, show rows
• the "column" button is used to insert, delete, hide, show columns
• the "hide-gridlines" button toggles gridlines of Spreadsheet
• the "hide-headers" button toggles the headers of rows and columns
• the "freeze-rows" button freezes and unfreezes rows
• the "freeze-columns" button freezes and unfreezes columns

Customizing toolbar's buttons

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.

Removing a block or a button

In case you want to remove some block or button specified in the default configuration, don't define them in the buttons object.

Adding a custom block or a button

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

Customizing Datatable

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

Related sample:  Custom menu

Back to top