beforetoolbarcreated:String

[starting from version: 2.3]

It is triggered before the creation of the Toolbar. Use this event to override the default Toolbar and customize it without changing flexmonster.toolbar.js. beforetoolbarcreated gets the toolbar object as an input. Override existing tabs and set custom tabs using the toolbar.getTabs() function. Each tab object should have the following structure:

• title – String. The tab’s label.
• id – String. Id used in CSS styles.
• handler – String. The name of the function that handles clicks on this tab.
• icon – String. The HTML tag containing your custom icon for this new tab. You can choose one of the basic vector icons defined in the flexmonster.toolbar.js file.
• args (optional) – Any. Arguments to pass to the handler.
• menu (optional) – Array. Dropdown menu items.
• mobile (optional) – Boolean. When set to false, the tab does not show on mobile devices. Default value: true.
• ios (optional) – Boolean. When set to false, the tab does not show on iOS devices. Default value: true.
• android (optional) – Boolean. When set to false false, the tab does not show on Android devices. Default value: true.
• rightGroup (optional) – Boolean. When set to true, the tab is positioned on the right side of the Toolbar. Default value: false.

Example

Hide all default tabs and add a new tab to load a CSV file:

var pivot = new Flexmonster({
    container: "pivot-container",
    toolbar: true,
    beforetoolbarcreated: customizeToolbar
});

function customizeToolbar(toolbar) {
    // override tabs
    toolbar.getTabs = function() {
        var tabs = [];
        tabs.push({
        id: "fm-tab-connect",
        icon: this.icons.connect,
        title: this.Labels.connect,
        handler: function() {
            this.pivot.connectTo({ 
                type: "csv", 
                filename: "http://cdn.flexmonster.com/2.3/data/data.csv" 
            });
        }
        });
        return tabs;
    }
}

Try the example on JSFiddle.

See also

Customizing toolbar tutorial