Despite the COVID-19 outbreak, our team continues operating at full speed. We are always here to support and answer all your questions.

Feel free to reach out by filling this quick form.

Fill the form
Get Free Trial

Add sublevel functionality in new icon similar to Export with its types

Answered
Ravi Kumar asked on October 13, 2020

Hi,
 
As flexmonster excel icon functionality which have ability to export in different formats with it’s sublevels.
 
Need to add extra icon in the toolbar with few sub-level functionalities like how export icon contains.
 
Please provide any solution.

1 answer

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster October 13, 2020

Hello,
 
Thank you for contacting us.
 
Our team suggests referring to our Toolbar customization guide to learn more about adjusting the Toolbar to fit your needs.
 
We have also prepared the JSFiddle that demonstrates adding the “Export+” tab with a dropdown menu.
 
We want to provide some additional explanations about the following code snippets used in the example:
The code block below demonstrates subscription on the beforetoolbarcreated event. It is triggered before the creation of the Toolbar.

var pivot = new Flexmonster({
  ...
  beforetoolbarcreated: customizeToolbar
});

 
Next, the handler is created:

function customizeToolbar(toolbar) {
  var tabs = toolbar.getTabs(); //get all existing tabs of the Toolbar
  toolbar.getTabs = function() {
    tabs.unshift({ //add an additional tab to the first position
      title: "Export+", //title of the created tab
      icon: tabs[3].icon, //currently, the icon is taken from the existing tab, it can be replaced with a custom one
      menu: [{ //creation of the submenu. Elements of the submanu have the same structure as described above.
          title: "Excel XLSX",
          handler: xlsxHandler, //function that is going to be invoked after user clicks the button
          icon: tabs[3].menu[3].icon
        },
        {
          title: "Excel XLSB",
          handler: xlsbHandler,
          icon: tabs[3].menu[3].icon
        }
      ]
    })
    return tabs;
  }
}

 
Also, it is possible to customize or complement existing tabs of the Toolbar in a similar way: overwrite their properties or add additional elements to menus.
 
Please let us know if it helps.
Feel free to contact us in case further assistance is needed on this point.
 
Kind regards,
Illia

Please login or Register to Submit Answer