React Flex Grid - Column Filter should clear "not set" value

React Flex Grid - Column Filter should clear "not set" value

Posted by: jschnurer on 24 October 2024, 10:05 am EST

• 

  jschnurer

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 24 October 2024, 10:05 am EST - Updated 24 October 2024, 10:10 am EST

  In the column filter popup, the user has access to two value filters. If they enter a value into the textbox but then set the filter operator back to “(not set)”, the textbox becomes disabled. I have a requirement that when the user selects “(not set)” that it should also clear the value of the textbox.

  Here’s an example:

  1. The user selects an operator in both dropdowns and enters values into both text boxes.

  

  2. The user changes the second filter’s operator back to “(not set)”.

  

  3. The user changes the first filter’s operator back to “(not set)”.

  

  Is there a way to accomplish this requirement?

• 

  akshay.rajput

  

  • Post Options:
  • Link
    Copy

  Posted 25 October 2024, 5:09 am EST

  Hi Justin,

  For this please handle the filter changing event. As this even is called when the filter panel is opened, you can use this event to set the find the Filter Condition ComboBox and on it’s selection change set the Value Input Control’s value.

  For this, please refer to the following sample application:

  https://stackblitz.com/edit/react-ufbjqj?file=Hello.js

  I hope this resolves your query!

• 

  jschnurer

  • Post Options:
  • Link
    Copy

  Posted 25 October 2024, 9:23 am EST - Updated 25 October 2024, 9:23 am EST

  Thank you very much for the helpful example. I was very close to that in my own attempts but I was missing the Control.getControl(…) function from the Wijmo library which was the secret ingredient I needed.

  For those who may find this thread in the future, this is the code that I used (Typescript):

  // Get a reference to both combo boxes and input values.
  const cb1 = Control.getControl(filter.activeEditor.hostElement.querySelector(`[wj-part="div-cmb1"]`));
  const cb2 = Control.getControl(filter.activeEditor.hostElement.querySelector(`[wj-part="div-cmb2"]`));
  const val1 = Control.getControl(filter.activeEditor.hostElement.querySelector(`[wj-part="div-val1"]`));
  const val2 = Control.getControl(filter.activeEditor.hostElement.querySelector(`[wj-part="div-val2"]`));
  
  // Add handler to clear the filter values when the user chooses "(not set)".
  if (cb1
    && val1) {
    (cb1 as any).selectedIndexChanged.addHandler((s: any) => {
      if (s.selectedIndex <= 0) {
        (val1 as any).text = "";
      }
    });
  }
  
  if (cb2
    && val2) {
    (cb2 as any).selectedIndexChanged.addHandler((s: any) => {
      if (s.selectedIndex <= 0) {
        (val2 as any).text = "";
      }
    });
  }

  The Control object was imported like this:

  import { Control } from '@mescius/wijmo';

• 

  akshay.rajput

  

  • Post Options:
  • Link
    Copy

  Posted 28 October 2024, 3:16 am EST

  Hi Justin,

  I’m glad to hear the issue is resolved! Thank you for sharing your code; it will be helpful for others working on something similar.