Need to change the symbol of the operator in slickgrid toggle filter (angular-slickgrid)

64 Views Asked by At

Problem statement

I need to change the symbol for the contains operator in the slick grid row filter feature in angular-slickgrid.

What I have tried is changing the operator in compoundOperatorList inside the column definition for all field types but it's throwing an error Type *'"a"' is not assignable to type 'OperatorType | OperatorString'.

Note: Where "a" is the symbol I'm trying to change for contains operator

For reference

1

There are 1 best solutions below

0
On

Please note that I'm the author of Angular-Slickgrid and Slickgrid-Universal.

Most of the classes are extendables since they are TypeScript classes and I purposely use protected (instead of private) which makes everything extendable. However in the case of operator, it is a define list that you cannot change because that will break the library. The current list of operator is the following (ref operatorString.type.ts)

export type OperatorString = '' | '<>' | '!=' | '=' | '==' | '>' | '>=' | '<' | '<=' | '*' | 'a*' | '*z' | 'EQ' | 'GE' | 'GT' | 'NE' | 'LE' | 'LT' | 'IN' | 'NIN' | 'NOT_IN' | 'IN_CONTAINS' | 'NIN_CONTAINS' | 'NOT_IN_CONTAINS' | 'NOT_CONTAINS' | 'Not_Contains' | 'CONTAINS' | 'Contains' | 'EndsWith' | 'StartsWith' | 'RangeInclusive' | 'RangeExclusive' | 'IN_COLLECTION' | 'NOT_IN_COLLECTION';

You also made a mistake in your question, a* is equivalent to StartsWith NOT Contains (which is the default and is an empty string). If you try to change a* for something else, then the library will recognize it as an invalid operator and will not work.

So does that mean you can't do anything? The answer is No, you can create a Custom Filter that will behave the way you want it to. I know it's a lot of work but that is the only possibly solution since again operator is a defined list that you cannot change without breaking the library.

You can take a look at Angular-Slickgrid Example 3, the column with the title "Title, Custom Editor" uses both a Custom Editor and a Custom Filter.

I could maybe add a way to provide an alternate text in the future, that is instead of always using the operator as text shown in the compound dropdown list, but that's a feature request for a future version. As it is today you cannot change it unless you create your own Custom Filter

EDIT

in the next Angular-Slickgrid v6.5, that will land in a week or two, you will be able to change any of the operator texts or their description via the following grid option.

this.gridOptions = {
  compoundOperatorAltTexts: {
    // where '=' is any of the `OperatorString` type shown above
    numeric: { '=': { operatorAlt: 'eq', descAlt: 'alternate numeric equal description' } },
    text: { '=': { operatorAlt: 'eq', descAlt: 'alternate text equal description' } }
  },
}

For reference, this is the Slickgrid-Universal Pull Request that will bring this new feature.

Please Note that the operatorAlt should not be more than 2 chars (or maybe 3) if you want them align properly. If you show more than 2-3 characters then you will have to adjust the CSS styling

For example, changing = to eq and providing a different description

enter image description here