I am currently working with an ng-multiselect dropdown to fetch data from a database. These dropdowns are being used to filter a data table on a webpage. However, I am facing an issue where when a dropdown item is selected, it correctly filters the table, but upon un-selecting the item, the data table does not return to its initial state. As a solution, I need to implement a condition so that when an item is un-selected, the table data goes back to its original state.
.ts
tableData: ITransactionDetail[];
data: ITransactionDetail[];
selectedItems = [];
selectedIds = [];
dropdownSettings: IDropdownSettings;
this.dropdownSettings = {
singleSelection: false,
idField: 'id',
textField: 'transactionType',
selectAllText: 'Select All',
unSelectAllText: 'UnSelect All',
itemsShowLimit: 3,
allowSearchFilter: true
};
onItemSelect(item: any) {
this.selectedIds.push(item.id);
this.resetTable();
}
onSelectAll() {
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
<th mat-header-cell *matHeaderCellDef>
transactionType
<div>
<ng-multiselect-dropdown
[placeholder]="'Select'"
[settings]="dropdownSettings4"
[data]="data"
(onSelect)="onItemSelect($event)"
(onSelectAll)="onSelectAll($event)"
(onDeSelect)="onItemDeSelect($event)"
>
</ng-multiselect-dropdown>
</div>
</th>
<td mat-cell *matCellDef="let element">{{ element.transactionType }}</td>