We have updated Flexmonster Software License Agreement, effective as of September 30, 2024. Learn more about what’s changed.

How to add a dropdown element to the toolbar

Resolved
Yosef asked on May 4, 2022

I can see it's possible to add custom buttons to the toolbar and I'm wondering if there's a way to add a dropdown element too?

6 answers

Public
Nadia Khodakivska Nadia Khodakivska Flexmonster May 4, 2022

Hello, Yosef,
 
Thank you for reaching out to us. 
 
Yes, adding a tab with a dropdown menu to the Toolbar is possible. Please check the following JSFiddle for reference: https://jsfiddle.net/flexmonster/5m0js7wr/
You can find more information in our documentation: https://www.flexmonster.com/doc/customizing-toolbar/ 
 
Please let us know if it works for you. Feel free to contact us if other questions arise.
 
Kind regards,
Nadia

Public
Yosef May 10, 2022

Thanks Nadia,
This menu could work for us. Is there anyway to add a custom dropdown HTML element to the toolbar as well?

Public
Nadia Khodakivska Nadia Khodakivska Flexmonster May 10, 2022

Hello,

Thank you for the response.

Could you please provide us with more details on your use case? How do you want to use a custom dropdown HTML element on the toolbar? It would greatly help us.

Looking forward to hearing from you.

Kind regards,
Nadia

Public
Yosef May 17, 2022

Hi Nadia,

Thanks for your support.

Our use case is to have a list of report configurations inside a dropdown, and use it to load reports into the grid with the setReport() and getReport() API.

The dropdown is in place and I'm wondering now if it can be included inside Flexmonster's toolbar.

Public
Nadia Khodakivska Nadia Khodakivska Flexmonster May 18, 2022

Hello, 

Thank you for the response.

Kindly note that recommended approach is using the Flexmonster dropdown. You are welcome to check the following example illustrating how to set a report via the toolbar menu: https://jsfiddle.net/flexmonster/1t0a67zx/ 
In case you want to display your custom dropdown, we recommend placing it as an external UI control and, for example, hiding our toolbar:

var pivot = new Flexmonster({
    container: "pivotContainer", 
    toolbar: false
}); 

We hope it helps. You are welcome to write to us in case further questions arise.

Kind regards,
Nadia

Public
Yosef May 19, 2022

Hi Nadia, that's great, thanks for the information.

Please login or Register to Submit Answer