Menu
Download Free Trial

Toolbar customization: introducing new approach

As you already may know, in addition to pivot grid and charts our component is also bundled with handy Toolbar. It provides easy access to the most used features: connecting to data, opening saved reports, switching between different chart types, applying number and conditional formatting, exporting to Excel, etc. 

Pivot Toolbar

Also, many of our users find it useful to add or hide some tabs. Before version 2.307 it was only possible by modifying original JavaScript code (flexmonster.toolbar.js) that leads to the complication of the update process.

We have changed the code structure of Toolbar and now it is possible to override mostly anything without changing the original flexmonster.toolbar.js. And after updating Toolbar to the latest version your custom changes will remain!

The key point is to use the new beforetoolbarcreated event. Let’s create a simple 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; } }

First of all, we subscribe to the beforetoolbarcreated event. Inside the customizeToolbar handler we can override any method of the toolbar instance. In our case, we are interested in getTabs() as it is responsible for all tabs that are shown. getTabs() returns an Array of Objects, each Object describes a tab. Please refer to the Toolbar documentation to find more details.

That’s it. It is highly recommended to explore the code inside flexmonster.toolbar.js to understand how particular things can be customized. Working sample is available on the JSFiddle.

Easy pivoting!