Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
| 147821 | Sep 25,2019 06:24 AM UTC | Sep 26,2019 12:14 PM UTC | Angular - EJ 2 | 1 |
|
Tags: MultiSelectDropdown |
|
<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();
}
} |
This post will be permanently deleted. Are you sure you want to continue?
Sorry, An error occured while processing your request. Please try again later.
This page will automatically be redirected to the sign-in page in 10 seconds.
You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.
