|
@Component({
selector: 'app-root',
template: `<button id='show' ej-button class='e-flat' (click)='show()'> Search </button>
<button id='clear' ej-button class='e-flat' (click)='clear()'> Clear </button>
<ejs-grid #grid [dataSource]='data' [searchSettings]='searchOptions' [allowPaging]='true' [toolbar]='toolbarOptions' height='272px'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
. . . . .
</e-columns>
</ejs-grid>`,
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
public data: object[];
public toolbarOptions: ToolbarItems[];
. . . .
@ViewChild('grid') public grid: GridComponent;
ngOnInit(): void {
this.data = data;
this.toolbarOptions = ['Search'];
}
show() {
const searchText = (document.getElementsByClassName('e-input')[0] as any).value;
const text = searchText.split(/[" (,)|]/); //Split your entered text and get the values
console.log(text); // See your test and get the values
var filterCharges = new Predicate('CustomerID', 'startswith', text[2], true);
filterCharges = filterCharges.and('EmployeeID', 'contains', text[4], true);
filterCharges = filterCharges.or('ShipName', 'startswith', text[7], true);
this.grid.query = new Query().where(filterCharges);
this.grid.refresh();
this.fdata = new DataManager({ json: data }).executeQuery(this.grid.query).then((e: any) => {
this.pdfdata = <Object[]>e.result; // to get the filtered records
this.grid.dataSource = DataUtil.distinct(this.pdfdata, 'OrderID', true); // Remove duplication
});
}
clear() {
this.grid.query = new Query();
this.grid.dataSource = this.data;
}
} | 
