Get Free Trial
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.

9 answers

Public
Courtney Chow August 8, 2019

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

Public
Vera Didenko Flexmonster August 8, 2019

Hello,
 
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,
Vera

Public
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?

Public
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,
Ian

Public
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?

Public
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.

Public
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: https://www.flexmonster.com/question/prevent-to-modify-fields-options/.
 
You are welcome to contact us in case questions arise.
 
Best Regards,
Vera

Public
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.

Public
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: https://jsfiddle.net/flexmonster/duty97vr/
Regarding how to create your filter pop-up, please see the following thread: https://www.flexmonster.com/question/filter-requires-two-passes-over-the-data/
 
 
Please let us know if everything works.
 
You are welcome to write to us in case of further questions.
 
Best Regards,
Vera

Please login or Register to Submit Answer