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 unselect a field when dragging it out

Courtney Chow asked on August 8, 2019

Right now the only way to unselect a field from columns or rows is to drag it back to allFields panel, which is pretty limiting. How to make it behave like this: when dragging a field outside its current panel (be it rows or columns), it automatically unselects.

12 answers

Courtney Chow August 8, 2019

BTW, is there an event for field drag & drop in the field list?

Vera Didenko Flexmonster August 8, 2019

Thank you for writing to us.
We would like to explain that there are several ways how to unselect a field from columns or rows:
1. On the grid:
    1) Through the right-click context menu.
    2) By dragging out of the grid the field that you want to unselect.
2. Through the Field List pop-up window:
    1) By double-clicking on the field that you want to unselect.
    2) By unselecting the checkbox near the field that you want to unselect in the “All Fields” panel.
    3) By dragging the field that you want to unselect back to “All Fields” panel
Please let us know if this works for you.
Best Regards,

Courtney Chow August 9, 2019

Hi, Vera,
But is there a way to allow unselect by justing dragging a field out the panel in which it currently is?

Ian Sadovy Flexmonster August 9, 2019

Hello Courtney,
Thank you for your reply.
Unselecting a field by just dragging it out of its current panel is only possible by dragging and dropping the field to the “All Fields” panel.

Having such feature (unselect by dragging a field out the panel) sounds reasonable and we will notify you in case of any updates on the matter.
Please let us know if you have any questions.
Best Regards,

Courtney Chow August 11, 2019

Hi Sadovy,
I understand that and thanks for your reply. But is it possible that we implement our own field list UI component (which supports this and other functionalities) and use specific APIs to interact with Flexmonster?

Courtney Chow August 12, 2019

Let me give you more information on our customization requirement. Basically, our design requires a very different style and DOM structure for all the UI elements (field list, filter modal, toolbar, etc) except for the pivot table and chart. Ideally, we want to build these UI elements using React which interact with the pivot table & chart using APIs provided by Flexmonster. The question and concerns are whether the available APIs are enough to achieve our goal? I’ve read through the doc and still not sure.

Vera Didenko Flexmonster August 12, 2019

Hello, Courtney,
Thank you for your response.
We would like to confirm that it is possible to implement your own Field List (Filter modal, toolbar, etc) supporting the desired behavior.
Flexmonster provides a list of API calls that can be used for adding functionality to your Field List (Filter modal, toolbar, etc).
The general idea of how a custom Field List can be created is provided in the following thread:
You are welcome to contact us in case questions arise.
Best Regards,

Courtney Chow November 4, 2019

Hi, Vera,
We managed to implement our own fields list. But there are always more product requirements :(. The question is, can we implement our own filter modals too?
According to the docs, we can get and set the filter object. But the trigger is inside the pivot table itself (the gear icons) and the filter APIs seems pretty complicated.

Vera Didenko Flexmonster November 4, 2019

Hello, Courtney,
Thank you for your question.
We kindly recommend the following approach:

  1. Hide Flexmonster’s Filter pop-up with CSS:
    #fm-filter-view, .fm-ui-modal-overlay{
    display: none !important;
  2. Using the filteropen event, get the clicked-on field uniqueName and open your filter pop-up when a field header is clicked:
    flexmonster.on('filteropen', function (params) {
    alert("Field uniqueName is: " + params.hierarchy.uniqueName);
    //show custom filter pop-up

Here is a JSFiddle example for illustration:
Regarding how to create your filter pop-up, please see the following thread:
Please let us know if everything works.
You are welcome to write to us in case of further questions.
Best Regards,

Courtney Chow December 13, 2019

Hi Vera,
Question 1: When using the “runQuery” and “getAllMeasures” and related APIs to implement our own FieldsList, fields with level seems very tricky. Sub-level fields share the uniqueName with the top-level field, but after we add the sub-level field to “column” or “row”, the pivot always show the top-level field. However, the built-in FieldList does not have this problem.
Question 2: This one is about the date string field. After adding one to the “column” or “row” and click the filter icon, the label filter or date filter are sometimes set “display: none” (by js probably, because it’s inline style). After sync the report data with the old version (with built-in) FieldList, it works correctly.
Are there some inner workings that are not covered by the public APIs related to date and level field type?

Vera Didenko Flexmonster December 17, 2019

Hello, Courtney,
Thank you for writing to us. 
Please see our answer in the following thread:
Best regards,

Vera Didenko Flexmonster 5 days ago

Hello, Courtney,
Hope all is well.
We are writing because a while back, you requested a UI improvement that would make it possible to unselect a field in the Field List by just dragging it out of its current panel.
Our team is happy to announce that we have added this feature.
Now it is possible to remove fields in the Field List by dragging them out of the current panel (columns, rows, measures, etc.).
This update is available in the latest version of Flexmonster:
You are welcome to update the component:
Please let us know if everything works fine for you.
We would be grateful for your feedback.
Kind regards, 

Please login or Register to Submit Answer