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!
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: https://www.flexmonster.com/doc/customizing-toolbar/
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.
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:
…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?
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: https://jsfiddle.net/flexmonster/r5pkysj1/
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.
Thank you! This is exactly what I needed!
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:
You are welcome to download the latest version and try it.
Is there a way to hide the toolbar but still calls its methods as in the example https://jsfiddle.net/flexmonster/r5pkysj1/ ??
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.
Thank you for your question.
Such behavior can be achieved by hiding toolbar with an appropriate CSS.
Please find an example here: https://jsfiddle.net/flexmonster/r5pkysj1/14/.
Let us know if everything works fine for you.
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.
Thank you for your question.
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.