beforetoolbarcreated:String

[starting from version: 2.3]

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

• title – String. Label of the tab.
• id – String. Id used in CSS styles.
• handler – String. Name of the function that handles click on this tab.
• icon – String. HTML tag containing your custom icon for this new tab. You can choose one of our vector icons defined in flexmonster.toolbar.js file.
• args (optional) – Any. Argument to pass to handler.
• menu (optional) – Array. Dropdown menu items.
• mobile (optional) – Boolean. If false – doesn’t show on mobile devices.
• ios (optional) – Boolean. If false – doesn’t show on iOS devices.
• android (optional) – Boolean. If false – doesn’t show on Android devices.

Example

Hide all default tabs and add a new one 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