How to pass multiple items for onselect event for ng-multiselect-dropdown

Question

I have a multi-select drop-down with many items to select. As of now When I select single item, the item is passed to Onselect event and based on condition the respective data from another array newArrayAfterProjectFilter is pushed tomyDataList as shown below in OnselectErp. As per my requirement When I try to select 2nd item in dropdown, only the 2nd item is pushed to OnselectErpfunction, not both items(1st and 2nd).

How to correctly do this?

<ng-multiselect-dropdown *ngIf="showDropDown"
 [placeholder]="'Erp Rfq Number'" [data]="dropdown_Erp"
 [settings]="dropdownSettings" (onSelect)="OnselectErp($event)">
</ng-multiselect-dropdown>

OnselectErp(item: any) {
    this.myDataList = [];
    this.newArrayAfterProjectFilter.forEach(element => {
      if (element.properties.map.aclrq_rfqNum == item.item_text) {
        this.myDataList.push(element);
      }
    });
    console.log(this.myDataList)
  }

i am still unable to understand your requirement. can you please explain with little bit more detail. — Farhat Zaman
– Farhat Zaman, Commented Oct 1, 2020 at 5:47
Just a wild guess, but wouldn't the type of the item parameter be an array in that case? Single select would give you an item:YourItemType whereas multiselect should yield item:Array<MyItemType>. — pascalpuetz
– pascalpuetz, Commented Oct 1, 2020 at 6:02
What you want is to filter your table after you have finished selecting multiple items.(onSelect) will fire each time you select an item so it will not serve your purpose. One solution is to have a button. On click of button you first read all selected items and then filter the table. — gkulshrestha
– gkulshrestha, Commented Oct 1, 2020 at 6:26
@gkulshrestha. You are clearly understood what i need. can you answer this by taking a example or taking my code. — BLNT
– BLNT, Commented Oct 1, 2020 at 6:37

gkulshrestha · Accepted Answer · 2020-10-01 07:39:29Z

2

I would need more details to reproduce your issue and provide you complete solution. But you can try below:

Add [(ngModel)]="selectedItems" in HTML and add selectedItems property in corresponding component.ts

<ng-multiselect-dropdown *ngIf="showDropDown"
 [placeholder]="'Erp Rfq Number'" [data]="dropdown_Erp"
 [settings]="dropdownSettings" (onSelect)="OnselectErp($event)" 
 [(ngModel)]="selectedItems">
</ng-multiselect-dropdown>

Create a button on UI and on click call below function:

filter() {
     this.myDataList = this.newArrayAfterProjectFilter.filter(element => 
      this.selectedItems.some(item=> element.properties.map.aclrq_rfqNum == item.item_text));
    console.log(this.myDataList)
  }

As I said, I have not tried this but should work with no or minimal change.

answered Oct 1, 2020 at 7:39

gkulshrestha

8851 gold badge6 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

BLNT Over a year ago

Thank you for this, I implemented multi select without a button needed following your code.

gkulshrestha Over a year ago

Great! What approach you took?

BLNT Over a year ago

Used NgModel that's it. Didn't use it before. We don't need button for ng-multiselect-dropdown.

gkulshrestha Over a year ago

That means,OnselectErp is being called on each select and list is being filtered each time too. I would rather let user first finish the selection and then trigger a filter (via a button) . Your design is also OK as long as there are not too many records to filter otherwise its not efficient.

BLNT Over a year ago

yes you absolutely right here. I'll try to make it more efficient in future. As of now it is sufficient and fast enough for me.

|

Collectives™ on Stack Overflow

How to pass multiple items for onselect event for ng-multiselect-dropdown

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related