Pivot Table & Charts Component Documentation

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 for all HTML5 and Flash/JS editions. Enabling toolbar is very easy, just set the appropriate parameter in flexmonster.embedPivotComponent() function to true.


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

Note: Flex edition of the component is an exception, where toolbar is provided as ActionScript 3.0 code within All-In-One demo. This article is not applicable to Flex edition of the component.


Toolbar can be customized. Tabs and buttons can be removed from it and new ones can be added to it easily.

To get started, let’s discover the toolbar/ folder contents (you can find it in the [package]/demo all-in-one/html5/flexmonster/):

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

Removing tab from Toolbar

Open flexmonster.toolbar.js file. Find the Tab section (~120th line). Every tab describes with an Object, and Toolbar simply represents an Array of such Objects. For example, Connect Tab looks in the code like this:

dataProvider.push({ title: Labels.CONNECT, id: "fm-tab-connect",
  menu: [
    { title: Labels.CONNECT_LOCAL_CSV, id: "fm-tab-connect-local-csv", handler: "connectLocalCSVHandler", mobile: false },
    { title: Labels.CONNECT_LOCAL_OCSV, id: "fm-tab-connect-local-ocsv", handler: "connectLocalOCSVHandler", mobile: false },
    { title: isMobile ? Labels.CONNECT_REMOTE_CSV_MOBILE : Labels.CONNECT_REMOTE_CSV, id: "fm-tab-connect-remote-csv", handler: "connectRemoteCSV" },
    { title: isMobile ? Labels.CONNECT_OLAP_MOBILE : Labels.CONNECT_OLAP, id: "fm-tab-connect-olap", handler: "connectOLAP", flat: false }

To remove a tab you should just comment these lines.

Adding new tab to Toolbar

To add a new tab let’s add the following code:

  title: "New Tab", 
  id: "fm-tab-newtab", 
  handler: "newtabHandler" 


  • 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
  • flash – [Boolean] if false – doesn’t show with Flash/JS version
  • html5 – [Boolean] if false – doesn’t show with HTML5 version

Look at the existing code to understand how to use these parameters properly.

CSS styles

Best practice to apply your custom styles is to look into flexmonster.toolbar.css file and create a separate CSS file on its basis. And then include it in the HTML page with Flexmonster Pivot Component. In such a way you will override styles without changing the original files.


Please see Step 3 in Localizing component article to find out how to localize toolbar.

Suggest Edit