How to filter by one element of the column at a time

Hello, Koryn!
 
Thank you for reaching out to us.
 
As we understand, you want to disable all filters except for one field visible on the grid and let the user select only one member of that field.
For the described case, our team suggests the following approach to customizing filtering:
 
1. Disable default Flexmonster filters by setting showFIlter option of options.grid to false:

report: {
   // other report properties
    options: {
      grid: {
        showFilter: false
      },
    },
}

 
2. Add your custom UI control, e.g. <select> (it can be added directly to Flexmonster Toolbar if needed)

<select id='filter'></select>

 
3. Using our getMembers() API call along with reportcomplete event, add the select options from the data already loaded to the pivot component:

pivot.on("reportcomplete", () => {
   const members = pivot.getMembers("your field name");
   members.forEach(member => {
       const option = document.createElement('option');
       option.value = member.uniqueName;
       option.textContent = member.caption;
       selectElement.appendChild(option);
   });
})

 
4. Add filtering function and use our setFilter() API call to apply filter to Flexmonster:

function filter(hierarchyName, memberName) {
  pivot.setFilter(hierarchyName, {
    members: [memberName]
  })
}

 
5. Add an event listener to your UI control to trigger filter() function on change.
 
We have prepared a JSFiddle to illustrate the idea: https://jsfiddle.net/flexmonster/d0n9th1r/.
 
Hope you will find our answer helpful. Please let us know if the suggested approach works well for your case.
 
Kind regards,
Solomiia

Hello, Koryn!
 
Thank you for specifying additional details about the case.
 
Kindly note that in the filteropen event handler, there is a name of the hierarchy for which the filter button is pressed.
I have modified the provided example to open a custom filter pop-up only for the "Category" field: https://jsfiddle.net/flexmonster/132aesrj/.
 
Here are the two things that have changed:
1. In the styles, added the class name to the styles that disable the default filter pop-up:

div.fm-filter-view.hideDefaultFilter{
    display: none !important;
}

 
2. In the filteropen event handler, added an if statement to open the custom filter only for the "Category" field and toggle the .hideDefaultFilter class with the same condition:

flexmonster.on('filteropen', function(params) {
    const defaultFIlterPopup = document.querySelector('div#fm-pivot-view div.fm-filter-view');
    defaultFIlterPopup.classList.toggle("hideDefaultFilter", params.hierarchy.uniqueName == "Category");
    if (params.hierarchy.uniqueName == "Category") {
        openPivotPopup(params.hierarchy.uniqueName);
    }
});

 
Hope it helps. Please let us know if there are any further questions.
 
Kind regards,
Solomiia

Hello, Koryn!
 
Thank you for your swift response.
 
I have changed the approach of hiding our native filter view from "display: none" to setting the negative z-index. I have also made some minor changes to the provided example.
You are welcome to check out the updated JSFiddle: https://jsfiddle.net/flexmonster/rLocjbxy/.
 
Please let us know if the provided example works well now.
 
Kind regards,
Solomiia