chore(*): Apply filtering to pinned data. Update filterData collection correctly.

Author: MKirova

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -2896,8 +2896,9 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
 
     public setFilterData(data, pinned: boolean) {
         if (this.hasPinnedRecords && pinned) {
-            this._filteredPinnedData = data;
-            this.filteredData = [... this._filteredPinnedData, ... this._filteredUnpinnedData];
+            this._filteredPinnedData = data || [];
+            const filteredUnpinned =  this._filteredUnpinnedData || [];
+            this.filteredData = [... this._filteredPinnedData, ... filteredUnpinned];
         } else if (this.hasPinnedRecords && !pinned) {
             this._filteredUnpinnedData = data;
         } else {

projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html

@@ -79,6 +79,7 @@
             <ng-container *ngIf='data
             | visibleColumns:hasVisibleColumns
             | treeGridRowPinning:id:pipeTrigger
+            | treeGridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true
             | treeGridSorting:sortingExpressions:sortStrategy:id:pipeTrigger as pinnedData'>
             <div #pinContainer *ngIf='pinnedData.length > 0' 
                 [ngClass]="{

projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.filtering.pipe.ts

@@ -65,7 +65,7 @@ export class IgxTreeGridFilteringPipe implements PipeTransform {
     public transform(hierarchyData: ITreeGridRecord[], expressionsTree: IFilteringExpressionsTree,
         filterStrategy: IFilteringStrategy,
         advancedFilteringExpressionsTree: IFilteringExpressionsTree, id: string,
-        pipeTrigger: number, filteringPipeTrigger: number): ITreeGridRecord[] {
+        pipeTrigger: number, filteringPipeTrigger: number, pinned?): ITreeGridRecord[] {
         const grid: IgxTreeGridComponent = this.gridAPI.grid;
         const state: IFilteringState = {
             expressionsTree: expressionsTree,
@@ -80,14 +80,14 @@ export class IgxTreeGridFilteringPipe implements PipeTransform {
         this.resetFilteredOutProperty(grid.records);
 
         if (FilteringExpressionsTree.empty(state.expressionsTree) && FilteringExpressionsTree.empty(state.advancedExpressionsTree)) {
-            grid.filteredData = null;
+            grid.setFilterData(null, pinned);
             return hierarchyData;
         }
 
         const result = this.filter(hierarchyData, state);
         const filteredData: any[] = [];
         this.expandAllRecursive(grid, result, grid.expansionStates, filteredData);
-        grid.filteredData = filteredData;
+        grid.setFilterData(filteredData, pinned);
 
         return result;
     }

src/app/tree-grid-flat-data/tree-grid-flat-data.sample.html

@@ -12,7 +12,7 @@
                 <igx-buttongroup [values]="displayDensities" (onSelect)="selectDensity($event)" style="display: block; width: 500px"></igx-buttongroup>
             </div>
 
-            <igx-tree-grid #grid1 [data]="data" primaryKey="employeeID" foreignKey="PID" [rowSelectable]="true"
+            <igx-tree-grid #grid1 [allowFiltering]='true' [data]="data" primaryKey="employeeID" foreignKey="PID" [rowSelectable]="true"
                 [paging]="false" [displayDensity]="density" [width]="'900px'" [height]="'800px'" [showToolbar]="true"
                 [columnHiding]="true" [columnPinning]="true" [exportExcel]="true" [exportCsv]="true" exportText="Export"
                 exportExcelText="Export to Excel" exportCsvText="Export to CSV" [summaryCalculationMode]="summaryMode">