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!
-Jon
⋅ 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: 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.
Regards,
Tanya
⋅ January 16, 2019
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?
Thanks,
Jon
⋅ 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: 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.
Kind regards,
Iryna
⋅ January 17, 2019
Hi Iryna,
Thank you! This is exactly what I needed!
Thanks,
Jon
⋅ 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.
Regards,
Dmytro
⋅ March 12, 2019
Hi,
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.
Thanks.
⋅ 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: https://jsfiddle.net/flexmonster/r5pkysj1/14/.
Let us know if everything works fine for you.
Regards,
Dmytro
⋅ 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.
⋅ 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,
Vera
