How can I retain all previously applied filters back to p table after performing delete operation on prime ng data table.

See more:

Angular12

Hi All,
I've a requirement to re-apply all previously selected filters on prime ng Data table after we delete any records.

For example, initially i've 12 records loaded into p datatable. Now i'm trying to do column filter and i've p-multiselect control to select the required values. suppose i've selected 5 values, and it's corresponding filtered results are getting in p datatable with out any issues. Now i'm deleting first filtered row from the table. when ever i'm trying to do like this, the multiselect dropdown control displaying empty message and p datatable body is showing blank data. It is not displaying already applied filters data in the table.

I've tried multiple ways to retain the multiselect control selected values by going through the options as per prime ng documentation. but no luck.

So finally i've decided to handle this through code side dynamically.

What I have tried:

here is my cshtml code p table declaration. i'm using onfilter event of p table.

ptable code
===============

<p-table id="grid_persons" #personimport="" [value]="personImportedData" [(selection)]="selectedpersonImportedData" 
="" [autolayout]="tableConfiguration.autoLayout" styleclass="p-datatable-importdata p-datatable-sm p-datatable-gridlines p-datatable-striped capture-import-holder" [rowhover]="true" [rows]="tableConfiguration.rows" [showcurrentpagereport]="true" [rowsperpageoptions]="tableConfiguration.rowsPerPageOptions" [loading]="loading" [paginator]="tableConfiguration.paginator" currentpagereporttemplate="Showing {first} to {last} of {totalRecords} records" [filterdelay]="0" [globalfilterfields]="tableConfiguration.globalFilterFields" [responsive]="tableConfiguration.isResponsive" [alwaysshowpaginator]="tableConfiguration.alwaysShowPaginator" datakey="FileId" *ngif="visible" [paginatordropdownappendto]="body" (onfilter)="applytablefilters($event, personImport)">

ptable column filter html code.
==================================

              <p-columnfilter field="PersonName" matchmode="in" [showmenu]="false">
                <ng-template ptemplate="filter" let-value="" let-filter="filterCallback">
                  <p-multiselect id="personsByFilter" [options]="persons" placeholder="Please Select" 
="" (onchange)="filter($event.value);" optionlabel="name" appendto="body" formcontrolname="selectedCaptureInfo" [filter]="true" editable="true">
                    <ng-template let-option="" ptemplate="item">
                      <div>
                        {{option.name}}
                      </div>

my component.ts file code
===============================

applytablefilters(event, personImport){
    //debugger;
    //console.log("selected person filteres  :-",event.filters);
    this.selectedPersons= event.filters;
	}

in load method,
=======================

if(this.selectedPersons["PersonName"] !== undefined){
      if(this.selectedPersons["PersonName"].value.length>0){
	  let filteredPersons= this.selectedPersons["PersonName"].value;
	  let filterValue = filteredPersons ? filteredPersons.map(item => item.name) : [];
	  var originalPersonsData=this.originalPersonInfo;
	  var filteredPersonsData = originalPersonsData.map(item => item.name).filter(f1=> filterValue.some(f2=> f1===f2)).map((name, i) => { return { "id": i, "name": name } }); 
	  this.form.get('selectedCaptureInfo').setValue(filteredPersonsData);
	  this.personImport=filteredPersonsData;
	  }
	  }

finally I'm able to retain the previous selected values of multiselect control, but p table body is showing always empty.

How can I rebind my fresh filtered result back to p table.
or please let me know, is there any other way to reapply all filters back to p table after performing delete operation.

Note:- one more observation is, if we delete the rows of p table with out applying any filters then no issues. I'm able to see proper data but issue is coming only when we apply filter and then delete rows of p table.

I'm using Angular 12, prime ng 12.2.1 version

Thanks in advance.