filter all the columns by some keyword separated by spaces or commas doesn't work properly

[Maroua Ayari]

I want to be able to filter all the columns by some keyword separated by spaces or commas (written in the search input).




For example: 

• When I write "aa" and "aa" is in the first column, it shows the rows containing "aa".
• When I write "bb" and "bb" is in the second column, it shows the rows containing "bb".
• When I write "aa bb", I expect to see rows in both the first and second columns."

[Sivaranjani Rajasekaran]

Hi Maroua Ayari,

Greetings from Syncfusion support,

We hope this message finds you well. After reviewing your query regarding the request for filtering all columns by multiple keywords separated by spaces or commas in the Grid component, we would like to suggest the following solution:

To implement this feature, we utilize the actionBegin event of the Grid. In our shared sample, we demonstrate how to perform a search with multiple keywords in the Grid by utilizing the query property when the requestType is 'searching' in the actionBegin event. 

We parse the searchString into multiple keywords using a comma (,) as the delimiter. Each keyword is then used to create a predicate that checks for a match in the desired columns. If multiple keywords are present, the predicates are combined using an OR condition. Finally, we update the Grid’s query property with the constructed predicate and refresh the Grid to update the changes in the UI.

Additionally, we use the actionComplete event to manage the completion of the search operation. This event ensures that the search input value is updated if necessary and clears the query when the search input is empty.

Please refer to the code below  for more information:

Example Code:

export class AppComponent implements OnInit {

    ngOnInit(): void {

        this.searchOptions = {

            fields: [

                'OrderID',

                'CustomerID',

                'EmployeeID',

                'ShipCity',

                'ShipCountry',

                'ShipName'

            ],

            operator: 'contains',

            key: '',

            ignoreCase: true,

        };

        this.toolbarOptions = ['Search'];

    }

    actionBegin({ requestType, searchString }: SearchEventArgs) {

        if (requestType == 'searching') {

            const keys = (searchString as string).split(',');     //Here you can change the separator

            var flag = true;

            var predicate: any;

            if (keys.length > 1) {

                if ((this.grid as GridComponent).searchSettings.key !== '') {

                    this.values = searchString;

                    keys.forEach((key: string) => {

                        (this.grid as GridComponent).getColumns().forEach((col: Column) => {

                            if (flag) {

                                predicate = new Predicate(col.field, 'contains', key, true);

                                flag = false;

                            }

                            else {

                                var predic = new Predicate(col.field, 'contains', key, true);

                                predicate = predicate.or(predic);

                            }

                        });

                    });

                   

                    (this.grid as GridComponent).query = new Query().where(predicate);

                    (this.grid as GridComponent).searchSettings.key = '';

                    this.valueAssign = true;

                    this.removeQuery = true;

                    (this.grid as GridComponent).refresh();

                }

            }

        }

    }

    actionComplete(args: SearchEventArgs) {

        const searchBar = document.querySelector<HTMLInputElement>('#' + (this.grid as GridComponent).element.id + '_searchbar');

        if (args.requestType === 'refresh' && this.valueAssign) {

            if (searchBar) {

                searchBar.value = this.values || '';

                this.valueAssign = false;

            }    

        }

        else if (

            (searchBar as any).value == '' &&

            args.requestType === 'refresh' &&

            this.removeQuery

        ) {

            const searchBar = document.querySelector<HTMLInputElement>('#' + (this.grid as GridComponent).element.id + '_searchbar');

            if (searchBar) {

                searchBar.value = '';

            }

            (this.grid as GridComponent).query = new Query();

            this.removeQuery = false;

            (this.grid as GridComponent).refresh();

        }

       

    }

}

Sample Link : https://stackblitz.com/edit/github-icbx5s?file=src%2Fapp.component.ts,src%2Fdatasource.ts

Documentation Link:

1. actionBegin - https://ej2.syncfusion.com/angular/documentation/api/grid/#actionbegin
2. actionComplete - https://ej2.syncfusion.com/angular/documentation/api/grid/#actioncomplete
3. Searching - https://ej2.syncfusion.com/angular/documentation/grid/searching
   
   

Please get back to us if you need further assistance.

Regards,

Sivaranjani R.