Is there a way to call Toolbar methods?

Jon asked on January 15, 2019

Hi there,
My company has tasked me with a way to call some of your innate Toolbar methods using our own buttons and click events. Is there an easy way to accomplish this with your API?
To clarify with an example, we want to open the Conditional Formatting dialog via a button we create on our site ourselves. Normally I would look for a “openConditionalFormattingDialog” method in your API, but I don’t see that as an option. Is there a way I can accomplish this? Would I have to copy event handlers/listeners from the DOM object to simulate the desired functionality?
Thanks for your time!

9 answers

Tanya Gryshko Flexmonster January 16, 2019

Hello, Jon,
Thank you for writing to us!
We would like to inform you that the Toolbar uses our standard API calls. For example, we use the addCondition API call to add a conditional formatting rule.
To customize the Toolbar, we suggest referring to this tutorial:
It describes how to change the Toolbar. If the approach described doesn’t work for you, please have a look at Further customization section.
Please let us know if it helps.


Hi Tanya,
While I’ve read the “customize toolbar” articles relatively thoroughly, what I’m really getting at is a way to refer to Toolbar dialogs from outside the Pivot tool. Something along the lines of:

<button (click)="openConditionalFormattingDialog()">Open</button>

…from outside the Flexmonster Pivot tool elsewhere on the page where I’m embedding the tool. We’re basically building a UI around the pivot tool and we want to be able to open several of the dialog boxes from buttons/links more along the lines of what we have in mind organizationally for our software. Is this possible?

Iryna Kulchytska Flexmonster January 17, 2019

Hi Jon,
Thank you for providing us with the details of your case.
Here is a JSFiddle that shows how you can get the reference to the Toolbar instance to be able to call its functions on the page from outside the Flexmonster Pivot:
Right now you need to use a beforetoolbarcreated hook to add the Toolbar reference to the pivot table reference, but we will include it in the component to be available by default with the next minor release (ETA Jan 28).
Please let me know if this works for you.
Kind regards,


Hi Iryna,
Thank you! This is exactly what I needed!

Dmytro Zvazhii Flexmonster January 29, 2019

Hello Jon,
We are glad to inform you that now the 'toolbar' property is available in Flexmonster’s object.
You can refer to it the following way: flexmonster.toolbar.
You are welcome to download the latest version and try it.

Javier G. March 12, 2019

Is there a way to hide the toolbar but still calls its methods as in the example ??
I’d like to use all the button functionalities but without using the default toolbar of the component (we have designed a custom vertical toolbar).
Furthermore, I’d also like to call the dropdowns (for the Export and the Charts buttons) but, again, from a custom toolbar.

Dmytro Zvazhii Flexmonster March 13, 2019

Hello Javier,
Thank you for your question.
Such behavior can be achieved by hiding toolbar with an appropriate CSS.
Please find an example here:
Let us know if everything works fine for you.

Javier G. March 13, 2019

Yes Dmytro, that works perfectly. Thank you.
What about the dropdown menus of the “Charts” and “Export” options of the toolbar? Is there a way of showing those? 
I know we could develope the dropdowns ourselves but they fit our needs pretty well as they are by default.

Vera Didenko Flexmonster March 15, 2019

Hello Javier,

Thank you for your question.

Yes, in Flexmonster you can customize the Toolbar to fit your needs via beforetoolbarcreated event.
Here is a link to our how to customize toolbar guide.

With such an approach you can also reuse our Toolbar tabs in your custom one.

Please let us know if everything works fine for you.

Best Regards,

Please login or Register to Submit Answer