Selecting "Select All" also emits onDeSelectAll event in angular2-multiselect-dropdown

2
votes

I am using angular2-multiselect-dropdown. Whenever I click "SelectAll" in the dropdown, it doesnt select all because it is also emiting deSelectAll event and so it also calls onDeSelectAll() function. And so its not implementing the default functionality of selecting all the items in the dropdown. Select All checkbox is also not checked. Please tell me how can I make this work, as I have a deadline soon.
enter image description here ts:

  ngOnInit() {
    this.dropdownList = [
      { id: 1, itemName: "Pacemaker1", value: "Pacemaker1" },
      { id: 2, itemName: "Pacemaker2", value: "Pacemaker2" },
      { id: 4, itemName: "Pacemaker2", value: "Pacemaker2" },
    ];

    this.selectedItems = [];

    this.dropdownSettings = {
      singleSelection: false,
      text: "Select devices",
      selectAllText: "Select All",
      unSelectAllText: "UnSelect All",
      enableSearchFilter: true,
      badgeShowLimit: 3,
    };
    this.getStudies();
  }

  onItemSelect(item: any) {
    this.selectedItems.push(item);
  }

  OnItemDeSelect(item: any) {
    this.selectedItems = this.selectedItems.filter((el) => el.id !== item.id);
  }

  onSelectAll(items: any) {
    console.log("select", items);
    this.selectedItems = [];
    this.selectedItems.push(items);
  }

  onDeSelectAll(items: any) {
    console.log("deselect", items);
    this.selectedItems = [];
  }

html:

 <div class="form-group">
    <label class="form-col-form-label">
       Associated Devices
    </label>
    <angular2-multiselect
        class="form-control"
        [data]="dropdownList"
        [settings]="dropdownSettings"
        (onSelect)="onItemSelect($event)"
        (onDeSelect)="OnItemDeSelect($event)"
        (onSelectAll)="onSelectAll($event)"
        (onDeSelectAll)="onDeSelectAll($event)"
        formControlName="associatedDevices">
    </angular2-multiselect>
 </div>

Please check the replicated functionality here https://stackblitz.com/edit/angular-ivy-esame2?file=src%2Fapp%2Fapp.component.html

2
javascriptangulartypescript
Try to use [(ngModel)]="selectedItems" instead of this.selectedItems.push(items). - Chiru Adi
@ChiruAdi even doing this, it isnt working. I am unable to perform SelectAll operation. Unable to check the selectAll box - Maliha Khizer
Sounds like the control itself is deselecting to get started, you will have to wait until after that event to select them. Or it should be a configurable behavior. In reality it shouldn't be doing anything. This is why I don't use 3rd part controls, too many surprises. You can use just plain select with [(ngModel)] binding or the mat-select. Here's a 3 part series dev.to/jwp/angular-validation-using-ngmodel-55gf - JWP
Thats true, I have just found out this is an issue with the package itself. The version 4.6.3 is stable and is working. - Maliha Khizer
facing the same issue someone please help me, even after @4.6.3 version is not working in my case - Ram

2 Answers

0
votes

I solved this issue by installing @4.6.3 version and its working fine. Apparently its an open issue in the package itself.

0
votes

I faced the same issue you can solve it by CSS like this

label[for=selectAll] {
  pointer-events:none;
}