|
export class AppComponent {
@ViewChild('checkbox')
public mulObj: MultiSelectComponent;
public mode: string;
public filterPlaceholder: string;
//define the data with category
public countries: { [key: string]: Object }[] = [
{ Name: 'Australia', Code: 'AU' },
{ Name: 'Bermuda', Code: 'BM' },
{ Name: 'Canada', Code: 'CA' },
{ Name: 'Cameroon', Code: 'CM' },
{ Name: 'Denmark', Code: 'DK' },
{ Name: 'France', Code: 'FR' },
{ Name: 'Finland', Code: 'FI' },
{ Name: 'Germany', Code: 'DE' },
{ Name: 'Greenland', Code: 'GL' },
{ Name: 'Hong Kong', Code: 'HK' },
{ Name: 'India', Code: 'IN' },
{ Name: 'Italy', Code: 'IT' },
{ Name: 'Japan', Code: 'JP' },
{ Name: 'Mexico', Code: 'MX' },
{ Name: 'Norway', Code: 'NO' },
{ Name: 'Poland', Code: 'PL' },
{ Name: 'Switzerland', Code: 'CH' },
{ Name: 'United Kingdom', Code: 'GB' },
{ Name: 'United States', Code: 'US' }
];
// map the groupBy field with category column
public checkFields: Object = { text: 'Name', value: 'Code' };
// set the placeholder to the MultiSelect input
public checkWaterMark: string = 'Select countries';
// set the MultiSelect popup height
public popHeight: string = '350px';
ngOnInit(): void {
this.mode = 'CheckBox';
this.filterPlaceholder = 'Search countries';
}
onChange(args) {
if ((this.mulObj as any).viewWrapper) {
(this.mulObj as any).viewWrapper.style.display = 'none';
}
(this.mulObj as any).chipCollectionWrapper.style.display = 'block';
let inputPos = (this.mulObj as any).overAllWrapper.getBoundingClientRect()
let popupPos = (this.mulObj as any).popupWrapper && (this.mulObj as any).popupWrapper.getBoundingClientRect();
if (inputPos && popupPos && (inputPos.top + inputPos.height > popupPos.top)) {
(this.mulObj as any).popupWrapper.style.top = (inputPos.top + inputPos.height) + 'px';
}
}
onSelect(args) {
(this.mulObj as any).addChip(args.itemData.Name, args.itemData.Code, args.e);
var proxy = this;
setTimeout(function () { proxy.onChange(args) }, 50)
}
onCreate(args) {
(this.mulObj as any).chipCollectionWrapper = this.mulObj.createElement('span', {
className: 'e-chips-collection',
styles: 'display:none'
});
(this.mulObj as any).componentWrapper.appendChild((this.mulObj as any).chipCollectionWrapper);
}
onFocus(args) {
(this.mulObj as any).viewWrapper.style.display = 'none';
}
onSelectedAll(args) {
(this.mulObj as any).hidePopup();
}
onRemoved(args) {
var proxy = this;
setTimeout(function () { proxy.onChange(args) }, 10)
}
}
|
