|
<ejs-multiselect id='multiselectelement' #sample [dataSource]='countries' [fields]='localFields' [placeholder]='localWaterMark' [hideSelectedItem] = 'false'>
<ng-template #headerTemplate="" let-data="">
<span class='head' id="select" (click)="onselect(event)" > Select All </span>
</ng-template>
</ejs-multiselect>
|
|
export class AppComponent {
@ViewChild('sample')
public mulObj: MultiSelectComponent;
constructor() {
}
public select:boolean=true;
//bind the DataManager instance to dataSource property
public countries: { [key: string]: Object; }[] = [
{ Name: 'Australia', Code: 'AU' },
{ Name: 'Bermuda', Code: 'BM' },
{ Name: 'Canada', Code: 'CA' },
{ Name: 'Denmark', Code: 'DK' },
];
// maps the local data column to fields property
public localFields: Object = { text: 'Name', value: 'Code' };
// set the placeholder to MultiSelect input element
public localWaterMark: string = 'Select countries';
ngOnInit(): void {
this.mode = 'Box';
}
onselect(event)
{
if(this.select)
{
this.mulObj.selectAll(true); //select all option by passing true.
this.select= false;
document.getElementById("select").innerText="UnSelect All" //change the text of header element.
}
else
{
this.mulObj.selectAll(false);
this.select= true;
document.getElementById("select").innerText="Select All"
//change the text of header element.
}
}
}
|
