CODEWITHSUNDEEP
angular
Joca
Joca

Reputation: 125

Ng-multiselect-dropdown and data filtering

Can 'ng-multiselect-dropdown' be used to filter a table with the data coming from a database.

I am trying to filter data onSelect of any of the dropdown items

These are the codes on the html file

<div class="container">
  <ng-multiselect-dropdown
    [placeholder]="'custom placeholder'"
    [settings]="dropdownSettings"
    [data]="data"
    (onSelect)="onItemSelect($event)"
    (onSelectAll)="onSelectAll($event)"
  >
  </ng-multiselect-dropdown>
</div>

These are from the ts file

dropdownList = []; selectedItems = [];

dropdownSettings: IDropdownSettings;

ngOnInit(): void { this.dropdownList = this.data;

this.dropdownSettings = {
  singleSelection: false,
  idField: 'id',
  textField: 'transactionType',
  selectAllText: 'Select All',
  unSelectAllText: 'UnSelect All',
  itemsShowLimit: 3,
  allowSearchFilter: true
};}
onItemSelect(item: any) { item; } onSelectAll(items: any) { items; }

Can there be a function I would call so that onSelect of any dropdown item, the data on the table would be filtered..

Upvotes: 2

Views: 5275

Answers (1)

Adrita Sharma
Adrita Sharma

Reputation: 22213

Maintain a seperate array for the data that needs to be displayed in table

Try like this:

.ts

data = [];
tableData = [];
selectedIds = [];

 ngOnInit(): void {
    this.data = [
      { id: 1, transactionType: "Hanoi" },
      { id: 2, transactionType: "Lang Son" },
      ...
    ];

    this.dropdownList = this.data;
  
}

 onItemSelect(item: any) {
    this.selectedIds.push(item.id);
    this.resetTable();
  }
  onSelectAll(items: any) {
    this.selectedIds = this.data.map(x => x.id);
    this.resetTable();
  }
 onDeSelectAll() {
    this.selectedIds = [];
    this.resetTable();
 }
 onItemDeSelect(item: any) {
   this.selectedIds.splice(this.selectedIds.indexOf(item.id), 1);
   this.resetTable();
 }

  resetTable() {
    this.tableData = [
      ...this.data.filter(x => this.selectedIds.includes(x.id))
    ];
  }

.html

  <ng-multiselect-dropdown [placeholder]="'custom placeholder'" [settings]="dropdownSettings" [data]="data"
    (onSelect)="onItemSelect($event)" (onSelectAll)="onSelectAll($event)" (onDeSelect)="onItemDeSelect($event)">
  </ng-multiselect-dropdown>

<table>
  <tr>
    <th>id</th>
    <th>transactionType</th>
  </tr>
  <tr *ngFor="let item of tableData">
    <td>{{item.id}}</td>
    <td>{{item.transactionType}}</td>
  </tr>
</table>

Demo

Upvotes: 1

Related Questions