This repository was archived by the owner on Jun 1, 2025. It is now read-only.
Single Search Filter
Some users might want to have 1 main single search for filtering the grid data instead of using multiple column filters. You can see a demo of that below
<angular-slickgrid gridId="grid23" [columnDefinitions]="columnDefinitions" [gridOptions]="gridOptions" [dataset]="dataset" (onAngularGridCreated)="angularGridReady($event.detail)"> </angular-slickgrid> <form class="form-inline"> <div class="form-group"> <label>Single Search: </label> <select class="form-control" name="selectedColumn" [(ngModel)]="selectedColumn" (ngModelChange)="updateFilter()"> <option [ngValue]="field" *ngFor="let field of columnDefinitions">{{field.name}}</option> </select> <select class="form-control" name="selectedOperator" [(ngModel)]="selectedOperator" (ngModelChange)="updateFilter()"> <option [ngValue]="operator" *ngFor="let operator of operatorList">{{operator}}</option> </select> <input type="text" class="form-control" name="searchValue" placeholder="search value" autocomplete="off" (input)="updateFilter()" [(ngModel)]="searchValue"> </div> </form>export class MyComponent { angularGrid: AngularGridInstance; grid: any; dataView: any; columnDefinitions: Column[]; gridOptions: GridOption; dataset: any[]; operatorList: OperatorString[] = ['=', '<', '<=', '>', '>=', '<>']; selectedOperator = '='; searchValue = ''; selectedColumn: Column; angularGridReady(angularGrid: AngularGridInstance) { this.angularGrid = angularGrid; } updateFilter() { if (this.selectedColumn && this.selectedOperator) { const fieldName = this.selectedColumn.field; const filter = {}; const filterArg: FilterCallbackArg = { columnDef: this.selectedColumn, operator: this.selectedOperator as OperatorString, // or fix one yourself like '=' searchTerms: [this.searchValue || ''] }; if (this.searchValue) { // pass a columnFilter object as an object which it's property name must be a column field name (e.g.: 'duration': {...} ) filter[fieldName] = filterArg; } this.angularGrid.dataView.setFilterArgs({ columnFilters: filter, grid: this.angularGrid.slickGrid }); this.angularGrid.dataView.refresh(); } }