|
<ejs-multiselect id='multiSelect' #multiSelect [dataSource]='items' [mode]='default' [fields]='fields'></ejs-multiselect> |
|
export class AppComponent implements OnDestroy {
public tooltip: Tooltip;
//MultiSelect items definition
public items: Object[] = [{ fruit: { Name: 'Apple', Color: 'red' } }, { fruit: { Name: 'Mango', Color: 'yellow' } }];
public fields: Object = { text: 'fruit.Name', value: 'fruit.Color' };
ngAfterViewInit() {
//Initialize Tooltip component
this.tooltip = new Tooltip({
// default content of tooltip
content: 'Loading...',
// set target element to tooltip
target: '.e-list-item',
// bind beforeRender event
beforeRender: this.onBeforeRender
});
this.tooltip.appendTo('body');
}
//beforeRender event of tooltip
onBeforeRender(args: TooltipEventArgs): void {
// get the target element
let listElement = document.getElementById('multiSelect');
let result: Object[] = listElement.ej2_instances[0].dataSource;
let i: number;
for (i = 0; i < result.length; i++) {
if (result[i].fruit.Name === args.target.textContent) {
this.content = result[i].fruit.Color;
this.dataBind();
break;
}
}
}
ngOnDestroy() {
this.tooltip.destroy();
}
} |
