Changing layout options in options to a dropdown

Hello, Diana!

Thank you for reaching out to us.

Kindly note that our default popups are presented as-is. For the described case, we recommend creating your own pop-up and customizing the Toolbar "Options" tab to open it instead of the default one.

Here is a brief description of the suggested solution:

1) Create the HTML code and styles for your pop-up.

2) Add the beforetoolbarcreated handler to flexmonster instance:

new Flexmonster({
  container: "#pivot-container",
  beforetoolbarcreated: customizeToolbar,
  report: {...},
  //other Flexmonster properties
});

3) Inside the customizeToolbar() handler, find fm-tab-options and attach a new click handler to it:

function customizeToolbar(toolbar) {
  let tabs = toolbar.getTabs();
  toolbar.getTabs = function() {
    let optionsTab = tabs.find(tab => tab.id == "fm-tab-options");
    if (!optionsTab) return tabs;
    optionsTab.handler = () => {
      showOptionsPopup();
    }
    return tabs;
  }
}

4) Now, our pop-up is opening, but changes don't apply. Let's add onclick handlers for the Apply and Cancel buttons:

<button onclick="closeOptionsPopup()">Close</button>
<button onclick="submitOptions()">Submit</button>

5) Inside the Apply button handler, use our setOptions() API call to apply the new options to the pivot component. Do not forget to add refresh() to re-render the grid.

function submitOptions() {
  let options = pivot.getOptions();
  options.grid.type = layoutValue;
  options.grid.showTotals = subtotalsValue;
  options.grid.showGrandTotals = grandTotalsValue;
  pivot.setOptions(options);
  pivot.refresh();
  closeOptionsPopup();
}

We have prepared a JSFIddle example to illustrate the idea: https://jsfiddle.net/flexmonster/gt2zx48m/.

You can add more options for your users in the custom pop-up if necessary. Please check out the full list of options you can set from the code: https://www.flexmonster.com/doc/options/.

Here are also more details about customizing the Toolbar that we did in steps 2-3: https://www.flexmonster.com/doc/customizing-toolbar/.

Hope you will find our answer helpful. Please let us know if there are any further questions.

Kind regards,
Solomiia