Menu
Download Free Trial
Table of contents

beforetoolbarcreated

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.
  • 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:
$("#pivot").flexmonster({
    toolbar: true,
    beforetoolbarcreated: customizeToolbar
});

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

Try the example on JSFiddle.