Menu
Download Free Trial
Table of contents

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

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

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

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.

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.