|
export class AppComponent implements OnInit, AfterViewInit {
public data: Observable<DataStateChangeEventArgs>;
public pageOptions: Object;
public state: DataStateChangeEventArgs;
constructor(public service: OrdersService) {
this.data = service;
}
templateOptions: IFilterUI;
public columns: any;
@ViewChild('grid') grid: GridComponent;
@ViewChild('template1') template1: NgModel;
@ViewChild('template2') template2: NgModel;
public dataStateChange(state: DataStateChangeEventArgs): void {
this.service.execute(state);
}
public ngOnInit(): void {
this.pageOptions = { pageSize: 5, pageCount: 4 };
const state = { skip: 0, take: 20 };
this.service.execute(state);
this.columns = [
{ field: 'OrderID', headerText: 'Order ID', isPrimaryKey: true, width: 120, textAlign: 'Right' },
. . . . .
];
this.templateOptions = {
create: (args: { element: Element, column: Column }) => {
const dd = document.createElement('input');
dd.id = 'CustomerID';
return dd;
},
write: (args: { element: Element, column: Column }) => {
const source: string[] = ['All', 'VINET', 'HANAR', 'VICTE'];
const msObject: MultiSelect = new MultiSelect({
dataSource: source,
select(e: any) {
// here you can filter the column from you custom data with selected value.
}
});
msObject.appendTo(args.element as any);
args.element.addEventListener('input', (args1: Event): void => {
const target: HTMLInputElement = args1.currentTarget as HTMLInputElement;
if (target.value !== 'All') {
const value = + +target.value;
this.grid.filterByColumn(target.id, 'equal', value);
} else {
this.grid.removeFilteredColsByField(target.id);
}
});
},
};
}
ngAfterViewInit(): void {
. . . .
}
} | 
