1.Customizing toolbar

About Toolbar

Toolbar is an extra HTML/JS addition to Flexmonster Pivot Component. It uses standard API and provides easy access to the most used features. Toolbar is free and provided “as is”.

Toolbar is available since version 2.0. Enabling toolbar is very easy, just set the appropriate parameter in $(“#pivotContainer”).flexmonster() function to true.

$("#pivotContainer").flexmonster({
    componentFolder:String, 
    global:Object, 
    width:Number, 
    height:Number, 
    report:Object, 
    toolbar:Boolean, 
    licenseKey:String})

Please verify that your flexmonster/ folder includes toolbar/ folder and it’s not empty.

Customizing

Toolbar can be customized via beforetoolbarcreated event. Tabs and buttons can be removed from it and new ones can be added easily.

Removing tab from Toolbar

Subscribe to beforetoolbarcreated. Get all tabs using getTabs() method that returns an Array of Objects, each of them describes a tab. To remove a tab you should just delete corresponding Object from the Array. The following example will remove the first tab:

$("#pivot").flexmonster({
    toolbar: true,
    licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX",
    beforetoolbarcreated: customizeToolbar
});

function customizeToolbar(toolbar) {
    // get all tabs
    var tabs = toolbar.getTabs();
    toolbar.getTabs = function () {
        // delete the first tab
        delete tabs[0];
        return tabs;
    }
}

Open the example on JSFiddle.

Adding new tab to Toolbar

The following code will add a new tab:

$("#pivot").flexmonster({
    toolbar: true,
    licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX",
    beforetoolbarcreated: customizeToolbar
});

function customizeToolbar(toolbar) {
    // get all tabs
    var tabs = toolbar.getTabs(); 
    toolbar.getTabs = function () {
        // add new tab
        tabs.unshift({
            id: "fm-tab-newtab",
            title: "New Tab",
            handler: newtabHandler
        });
        return tabs;
    }

    var newtabHandler = function() {
    	// add new functionality
    }  
}

where:

• 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.

Also there are another optional parameters:

• args – Any. Argument to pass to handler.
• menu – Array. Dropdown menu items.
• mobile – Boolean. If false – doesn’t show on mobile devices.
• ios – Boolean. If false – doesn’t show on iOS devices.
• android – Boolean. If false – doesn’t show on Android devices.

Check out the example with new tab on JSFiddle.

Further customization

You can customize almost everything. To explore all the options we recommend investigation of the existing code. Look at the toolbar/ folder contents (you can find it in the [package]/flexmonster/):

• img/ – icons and other graphic assets
• flexmonster.toolbar.js – JavaScript code
• flexmonster.toolbar.css – CSS styles

Open flexmonster.toolbar.js file. Find the Tab section (it starts with getTabs() method) to understand how it works.

To change appearance of Toolbar read Customizing appearance.