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

How to render the toolbar without refresh

Answered
Sen asked on September 3, 2024

I would like to know possible way to render the toolbar without refresh.

I have a param `enableCustomTab` and initially set to false.

When a button handler is clicked, it turns `enableCustomTab` to true.

In beforetoolbarcreated, I have customizeToolbar function, have additionally added `customnewtab`.

I have to show only if the `enableCustomTab` is true. but toolbar is not been rendered.

sample code;

let enableCustomTab = false;
buttonHandler= () => {
enableCustomTab=true;
this.customizeToolbar();
}
let pivot = new Flexmonster({
//other Flexmonster properties
beforetoolbarcreated: customizeToolbar
});
function customizeToolbar(toolbar) {
let tabs = toolbar.getTabs();
if (enableCustomTab){ 
tabs.unshift({
id: "custom-tab"
});
return tabs;
}

Issue 1: does not show the custom tab

Issue 2: whenever button handler is called/clicked , toolbar menu keeps adding

 

// sample data of toolbar being added whenever the button handler is called {id: 'fm-tab-custom', title: 'New Tab',},{id: 'fm-tab-custom', title: 'New Tab',}

Start your code here

1 answer

Public
Nadia Khodakivska Nadia Khodakivska Flexmonster September 4, 2024

Hello,

Thank you for reaching out to us.

Please note that the default Flexmonster toolbar wasn't designed to be modified dynamically. Instead, the customization is available through the beforetoolbarcreated event handler that allows you to adjust the Toolbar to your needs before it is rendered.

In case you need to be able to modify the tabs at runtime, we would suggest implementing your own toolbar/another UI element that would provide access to the necessary functionality, while also being modifiable on the run.

Everything that the default toolbar does is available through the Flexmonster API calls, meaning you will have no issues linking the required functionality to your own toolbar implementation. You are welcome to check the available API calls in our documentation: https://www.flexmonster.com/api/methods/

You are welcome to contact us if other questions arise.

Kind regards,
Nadia

Please login or Register to Submit Answer