Overlapping modals

Answered
Ben Greaves asked on May 20, 2021

Hello,

We're using Flexmonster 2.8.2.1 and Flexmonster-react.
Something we have noticed is that if we are using the toolbar, and the user opens the Field Selector, and then the user opens a different modal (Conditional Formatting, Format Cells, or Layout Options), then the Field Selector stays open, with the new modal overlapping on top.
We would like to only display one modal at a time to the user. I have found the method flexmonster.closeFieldsList() which is very helpful for closing the Field Selector when one of the other modals appears. But I have not found a way to programmatically close the other modals when the Field Selector is open. For instance, there is no flexmonster.toolbar.closeConditionalFormatting method that I can see.
Do you have any advice for this situation? Is there a method I can call to do this?

Thank you!

4 answers

Public
Ben Greaves May 20, 2021

I have one more question, sorry.
Our users sometimes ask if they can move the modals around on the screen, the same way that you can move different windows around on a Windows desktop. Is this behavior supported?
Thanks again!

Public
Mykhailo Halaida Mykhailo Halaida Flexmonster May 21, 2021

Hi Ben,
 
Thank you for posting your question.
 
Currently, Flexmonster does not provide methods for programmatically closing other pop-up windows – this has to do with the structure of the component: the Field List is native to the pivot table itself, and the other pop-ups are parts of the default Flexmonster Toolbar.
 
That being said, you can implement similar functionality by yourself through customizing the Flexmonster Toolbar source code (the Toolbar is an open-source component) or by simply simulating clicks on the corresponding pop-up window close buttons. 
 
We've also added your inquiry to our customers' wishlist to consider in our future releases and will let you know in case anything changes on this matter.
 
Speaking of pop-up window movement, this is not supported as well.
 
Please let us know if there are any other questions we can help you with in the meantime.
 
Best regards,
Mykhailo

Public
Ben Greaves May 24, 2021

Thanks Mykhailo.
Glad to hear it is on the roadmap for future releases.
I solved the problem with your suggestion - simulating clicks with Jquery.
For any other customers who would like to implement "one modal at a time" functionality, here's the code we used. All handleFooBar functions are called from our custom toolbar.
 

const openFieldsList = () => {
closeFlexmonsterModals();
closeToolbarModals();
gridRef.current.flexmonster.openFieldsList();
};

const closeFlexmonsterModals = () => {
const classCancelButtons = $("button.fm-ui-btn:contains('Cancel')"); //non-toolbar modals use classes instead of IDs
if (classCancelButtons.length)
classCancelButtons.click(); // jquery uses implicit iteration, no need to iterate this collection
};

const closeToolbarModals = () => {
const idCancelButton = $("#fm-btn-cancel"); // ID of the element that is used in the format, options, layout modals
if (idCancelButton.length)
idCancelButton.click();
};

const handleFieldsListOpen = () => {
closeToolbarModals();
};

const handleFormat = () => {
closeFlexmonsterModals();
gridRef.current.flexmonster.toolbar.formatCellsHandler();
};

const handleOptions = () => {
closeFlexmonsterModals();
gridRef.current.flexmonster.toolbar.conditionalFormattingHandler();
};

const handleLayout = () => {
closeFlexmonsterModals();
gridRef.current.flexmonster.toolbar.optionsHandler();
};

 

Public
Mykhailo Halaida Mykhailo Halaida Flexmonster May 25, 2021

Hi Ben,
 
Thank you for sharing your solution - it is good to hear this approach works for you. We hope other users find it helpful as well.
 
As always, feel free to reach out if there is anything else we can assist you with.
 
Best regards,
Mykhailo 

Please login or Register to Submit Answer