@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
providers: [FilterService]
})
export class AppComponent {
public data: Object[];
public filter: any;
public dropInstance: NumericTextBox;
@ViewChild('grid')
public grid: GridComponent;
public filterOptions: FilterSettingsModel;
ngOnInit(): void {
this.data =[ . . . .
];
this.filterOptions = {
type: 'Menu'
};
}
constructor(){
this.filter = {
ui: {
create: (args: { target: Element, column: object }) => {
const flValInput: HTMLElement = createElement('input', { className: 'flm-input' });
args.target.appendChild(flValInput);
this.dropInstance = new NumericTextBox({
format: "###'%'"
});
this.dropInstance.appendTo(flValInput);
},
write: (args: {
column: object, target: Element, parent: any,
filteredValue: number
}) => {
this.dropInstance.value = args.filteredValue;
},
read: (args: { target: Element, column: any, operator: string, fltrObj: Filter }) => {
args.fltrObj.filterByColumn(args.column.field, args.operator, this.dropInstance.value);
}
}
};
}
} |