Despite the COVID-19 outbreak, our team continues operating at full speed. We are always here to support and answer all your questions.

Feel free to reach out by filling this quick form.

Fill the form
Get Free Trial

How to dock the Fields List to the right of the screen

Courtney Chow asked on August 6, 2019

Hi, we need to customize the Fields List UI to not appear in a model. Instead, we want it to be docked at the right of the screen when Flexmonster loads. Is there a “right” way to do it? After some investigation, it seems to me that this task needs modifying the source code of Flexmonster, which is hard because we are only provided with an uglified version of js.
The design is in the attachment.

7 answers

Dmytro Zvazhii Dmytro Zvazhii Flexmonster August 6, 2019

Hello Courtney,
Thank you for writing to us.
Please have a look at fieldListPosition property of options object: It allows opening the fields list on the right side and keeps it opened. 
Still, if your use case requires some custom behavior you can implement your own field list model view based on Flexmonster API:
Please let us know in case of any other question.

Courtney Chow August 7, 2019

Hi, Zvazhii,
Thanks a lot for your reply! But how can I keep the fields list open as soon as the grid renders? Right now it still requires a click.

Courtney Chow August 7, 2019

What’s more, if I want to do some DOM manipulation, such as reordering the panels of the fields list, which event should I put my code in? Is it “aftergriddraw”?

Courtney Chow August 7, 2019

If I call flexmonster.openFieldsList() in “aftergriddraw”, it will retrigger “aftergriddraw” and enter a infinite loop…

Ian Sadovy Ian Sadovy Flexmonster August 7, 2019

Hello Courtney,
Thank you for your answer.
Please try configuratorActive: true option to keep the Field List open.
Here is the sample:
As for the DOM manipulations, Field List is not designed to support this, but you can try to do some customizations using CSS.
Hope it helps.

Courtney Chow August 8, 2019

Thanks a lot, Sadovy. The configuration does work, for the first report. In our app we allow the user to switch report (using tabs) by utilizing the flexmonster.setReport API. In both the global configuration and the report object we generated on the server-side we set “{configuratorActive: true, fieldListPosition: “right”}, but in all reports, the field list stays closed initially except for the first one.

Tanya Gryshko Tanya Gryshko Flexmonster August 8, 2019

Hello, Courtney,

Thank you for your reply.

Please have a look at the following example: At line 29, reportcomplete event is used to open the Field List when a new report is set.

Please let us know if this helps.


Please login or Register to Submit Answer