Customising operators available on each data type not working

Question

Hi team, on my component I set the following `filterOptions` to reduce the number of operators available for each data type:

filterOptions: {
  type: "Menu",
  operators: {
    stringOperator: [
      { value: 'contains', text: 'contains' },
      { value: 'doesnotcontain', text: 'does not contain' },
      { value: 'isnull', text: 'is not set' },
      { value: 'isNull', text: 'is not set' },
      { value: 'isnotnull', text: 'is any' },
    ],
    numberOperator: [
      { value: 'equal', text: 'is' },
      { value: 'notequal', text: 'is not' },
      { value: 'greaterthanorequal', text: 'is greater than or equal' },
      { value: 'lessthanorequal', text: 'is less than or equal' },
      { value: 'between', text: 'between' },
      { value: 'isnull', text: 'is not set' },
      { value: 'isnotnull', text: 'is any' },
    ],
    dateOperator: [
      { value: 'equal', text: 'is on' },
      { value: 'notequal', text: 'is not on' },
      { value: 'greaterthanorequal', text: 'is more recent than' },
      { value: 'lessthanorequal', text: 'is older than' },
      { value: 'between', text: 'between' },
      { value: 'isnull', text: 'is not set' },
      { value: 'isnotnull', text: 'is any' },
    ],
    booleanOperator: [
      { value: 'equal', text: 'is' },
      { value: 'notequal', text: 'is not' }
    ],
  }

However this doesn't seem to work because way more options are showing on a number column:

https://cln.sh/mwGwQYl9

Am I doing something wrong? Thank you.

Rajapandi Ravi · Accepted Answer

Celso,As per our shared code example in our previous update, we have
prepared a sample and it was working fine at our end. Please refer the below
sample and screenshot for more information.Sample: https://stackblitz.com/edit/dkawfg-c9k8qz?file=src%2FApp.vueScreenshot:

Rajapandi Ravi · Answer

Hi Celso,Greetings from Syncfusion supportAfter reviewing your query, we could see that you like to
set your custom operators for all type of columns (number, string, date,
boolean). You can achieve your requirement by using dataBound event of Grid.
Please refer the below code example for more information.

dataBound: function() { //dataBound event
  of Grid
                  //here we have defined the
  string operator and you can follow the same for your number,date&Boolean opeators
                  grid.filterModule.customOperators.stringOperator = [
                      { value: 'contains',
  text: 'contains' },
                      { value:
  'doesnotcontain', text: 'does not contain' },
                      { value: 'isnull', text:
  'is not set' },
                      { value: 'isNull', text:
  'is not set' },
                      { value: 'isnotnull',
  text: 'is any' },
                    ];
              }

API: https://helpej2.syncfusion.com/vue/documentation/api/grid/#databoundRegards,Rajapandi R

Celso · Answer

Hi Rajapandi, thanks for the recommendation. Unfortunately that doesn't seem to work:

For this configuration:

grid.filterModule.customOperators.stringOperator = [

{ value: 'contains', text: 'contains' },
{ value: 'doesnotcontain', text: 'does not contain' },
{ value: 'isempty', text: 'is not set' },
{ value: 'isnotempty', text: 'is any' },
];

I get these options: https://cln.sh/bD2qKc8B, so it's missing everything other than the contains.

And for this configuration:

grid.filterModule.customOperators.numberOperator = [
  { value: 'equal', text: 'is' },
  { value: 'notequal', text: 'is not' },
  { value: 'greaterthanorequal', text: 'is greater than or equal' },
  { value: 'lessthanorequal', text: 'is less than or equal' },
  { value: 'isnull', text: 'is not set' },
  { value: 'isnotnull', text: 'is any' },
];

I get all these options: https://cln.sh/cpV6QJ03. I do not want to show the eg. Greater than and Less than options.

Celso · Answer