React FlexGrid - Limit column condition filter to only Equals for all bool cols

React FlexGrid - Limit column condition filter to only Equals for all bool cols

Posted by: jschnurer on 31 October 2024, 10:23 am EST

• 

  jschnurer

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 31 October 2024, 10:23 am EST - Updated 31 October 2024, 10:28 am EST

  I have a FlexGrid in which I have enabled the FlexGridFilter. In its initializeFilter callback, I am configuring my boolean columns with a data map that shows Yes and No instead of the defaults.

      const map = new DataMap([
        { value: true, caption: "Yes", },
        { value: false, caption: "No", },
      ], "value",
        "caption");
  
      // Now, for each of the boolean columns, apply the filter options to them.
      for (let c = 0; c < filter.grid.columns.length; c++) {
        if (filter.grid.columns[c].dataType === DataType.Boolean) {
          var colFilter = filter.getColumnFilter(c);
          if (colFilter) {
            colFilter.dataMap = map;
          }
        }
      }

  By default, the filter popup had a bunch of different conditions:

  

  I have an new requirement, which is to limit the condition filters for boolean columns to only allow the Equals and Not Equals operators. How can I accomplish this?

  I tried adding a dataMap to the conditionFilter in initializeFilter but it didn’t seem to have any effect.

• 

  akshay.rajput

  

  • Post Options:
  • Link
    Copy

  Posted 4 November 2024, 12:58 am EST

  Hi Justin,

  For this, I would suggest you to get the ComboBox Filter control and modify the itemsSource array for the ComboBox on FilterChanging.

  Please refer to the following sample application: https://stackblitz.com/edit/react-hxwrg2?file=Hello.js

• 

  jschnurer

  • Post Options:
  • Link
    Copy

  Posted 4 November 2024, 10:10 am EST

  Thanks, this was exactly what I needed. I did this in typescript inside the filterChanging of the component.

  const cb1 = Control.getControl(filter.activeEditor.hostElement.querySelector(`[wj-part="div-cmb1"]`));
  const cb2 = Control.getControl(filter.activeEditor.hostElement.querySelector(`[wj-part="div-cmb2"]`));
  if (col.dataType === DataType.Boolean) {
    let filterConditionItemsSource = [
      { name: '(not set)', op: null },
      { name: 'Equals', op: 0 },
      { name: 'Does not equal', op: 1 },
    ];
    if (cb1) {
      (cb1 as any).itemsSource = filterConditionItemsSource;
    }
    if (cb2) {
      (cb2 as any).itemsSource = filterConditionItemsSource;
    }
  }

• 

  akshay.rajput

  

  • Post Options:
  • Link
    Copy

  Posted 5 November 2024, 12:37 am EST

  Hi Justin,

  I am glad to know the issue is resolved!