React FlexGrid - Change condition filter selectable values for Boolean column

React FlexGrid - Change condition filter selectable values for Boolean column

Posted by: jschnurer on 15 May 2024, 6:21 am EST

• 

  jschnurer

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 15 May 2024, 6:21 am EST - Updated 15 May 2024, 6:26 am EST

  In a Flex Grid I have a column whose data type is Boolean. I have enabled and customized the filters so the user only has the Condition Filter available.

  Additionally, all my Boolean columns use a cell template to display the text “Yes” and “No” based on the bound value.

  When the user opens the filter, they are presented with a dropdown that contains “true” and “false”. I’ve attached a screenshot of what it looks like currently, showing the dropdown with the “true” and “false” values.

  

  I need to change these dropdown texts to be “Yes” and “No”. How can I accomplish this?

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 15 May 2024, 5:10 pm EST

  Hello,

  To achieve the desired requirement you can handle the initialized event of FlexGridFilter and update the dataMap property of ColumnFilter with your custom dataMap values. Please refer to the code snippet and sample link below for implementation:

    const initFilter = (filter) => {
      let flex = grid.current.control;
      var map = new DataMap(
        [
          { value: true, caption: 'Yes' },
          { value: false, caption: 'No' },
        ],
        'value',
        'caption'
      );
  
      for (var c = 0; c < flex.columns.length; c++) {
        if (flex.columns[c].dataType == DataType.Boolean) {
          filter.getColumnFilter(c).dataMap = map;
        }
      }
    };

  Sample link: https://stackblitz.com/edit/react-oaiykq?file=index.js

  Regards

• 

  jschnurer

  • Post Options:
  • Link
    Copy

  Posted 16 May 2024, 1:31 am EST

  Thanks, this works perfectly.

  I also persist and load the grid’s state to/from localStorage and noticed that when I load the grid state it destroys this. I had to run this code both during the initial load AND after loading the grid state from storage and applying it.

  But now it works exactly how I want! Thanks!