feat(search): fixing tree grid search highlight #3519

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

@@ -4186,23 +4186,33 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         if (this.lastSearchInfo.matchInfoCache.length) {
             const matchInfo = this.lastSearchInfo.matchInfoCache[this.lastSearchInfo.activeMatchIndex];
 
-            IgxTextHighlightDirective.setActiveHighlight(this.id, {
-                columnIndex: matchInfo.column,
-                rowIndex: matchInfo.row,
-                index: matchInfo.index,
-                page: matchInfo.page
-            });
-
             if (scroll !== false) {
                 this.scrollTo(matchInfo.row, matchInfo.column, matchInfo.page, matchInfo.groupByRecord);
             }
+
+            const fixedMatchInfo = this.fixMatchInfoIndexes(matchInfo);
+
+            IgxTextHighlightDirective.setActiveHighlight(this.id, {
+                columnIndex: fixedMatchInfo.column,
+                rowIndex: fixedMatchInfo.row,
+                index: fixedMatchInfo.index,
+                page: fixedMatchInfo.page
+            });
+
         } else {
             IgxTextHighlightDirective.clearActiveHighlight(this.id);
         }
 
         return this.lastSearchInfo.matchInfoCache.length;
     }
 
+    /**
+     * @hidden
+     */
+    protected fixMatchInfoIndexes(matchInfo: any): any {
+        return matchInfo;
+    }
+
     /**
      * Returns an array containing the filtered data.
      * ```typescript
@@ -4338,13 +4348,11 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
             const groupByRecord = groupByRecords ? groupByRecords[i] : null;
             const groupByIncrement = groupIndexData ? groupIndexData[i] : 0;
             const pagingIncrement = this.getPagingIncrement(groupByIncrement, groupIndexData, Math.floor(i / this.perPage));
-            let rowIndex = this.paging ? (i % this.perPage) + pagingIncrement : i + groupByIncrement;
 
             if (this.paging && i % this.perPage === 0) {
                 collapsedRowsCount = 0;
             }
-
-            rowIndex -= collapsedRowsCount;
+            const rowIndex = this.resolveSearchRowIndex(i, pagingIncrement, groupByIncrement, collapsedRowsCount);
 
             if (groupByRecord && !this.isExpandedGroup(groupByRecord)) {
                 collapsedRowsCount++;
@@ -4389,6 +4397,15 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         });
     }
 
+    /**
+     * @hidden
+     */
+    protected resolveSearchRowIndex(index: number, pagingIncrement: number, groupByIncrement: number, collapsedRowsCount: number) {
+        let rowIndex = this.paging ? (index % this.perPage) + pagingIncrement : index + groupByIncrement;
+        rowIndex -= collapsedRowsCount;
+        return rowIndex;
+    }
+
     /**
      * @hidden
      */

projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-api.service.ts

@@ -58,7 +58,7 @@ export class IgxTreeGridAPIService extends GridBaseAPIService<IgxTreeGridCompone
         const treeRecord = grid.records.get(rowID);
 
         if (treeRecord) {
-            const isExpanded = this.get_row_expansion_state(id, rowID, treeRecord.level);
+            const isExpanded = this.get_row_expansion_state(id, treeRecord);
             expandedStates.set(rowID, !isExpanded);
             grid.expansionStates = expandedStates;
         }
@@ -105,15 +105,34 @@ export class IgxTreeGridAPIService extends GridBaseAPIService<IgxTreeGridCompone
         });
     }
 
-    public get_row_expansion_state(id: string, rowID: any, indentationLevel: number): boolean {
+    public expand_path_to_recrod(id: string, record: ITreeGridRecord) {
+        const grid = this.get(id);
+        const expandedStates = grid.expansionStates;
+
+        while (record.parent) {
+            record = record.parent;
+            const expanded = this.get_row_expansion_state(id, record);
+
+            if (!expanded) {
+                expandedStates.set(record.rowID, true);
+            }
+        }
+        grid.expansionStates = expandedStates;
+
+        if (grid.rowEditable) {
+            grid.endEdit(true);
+        }
+    }
+
+    public get_row_expansion_state(id: string, record: ITreeGridRecord): boolean {
         const grid = this.get(id);
         const states = grid.expansionStates;
-        const expanded = states.get(rowID);
+        const expanded = states.get(record.rowID);
 
         if (expanded !== undefined) {
             return expanded;
         } else {
-            return indentationLevel < grid.expansionDepth;
+            return record.level < grid.expansionDepth;
         }
     }
 

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

@@ -93,6 +93,16 @@ export class IgxTreeGridComponent extends IgxGridBaseComponent {
     */
     public flatData: any[];
 
+    /**
+    * @hidden
+    */
+    public processedFlatData: any[];
+
+    /**
+    * @hidden
+    */
+    public processedExpandedFlatData: any[];
+
     /**
      * Returns an array of the root level `ITreeGridRecord`s.
      * ```typescript
@@ -469,6 +479,53 @@ export class IgxTreeGridComponent extends IgxGridBaseComponent {
         return path.reverse();
     }
 
+    /**
+     * @hidden
+     */
+    protected resolveFilteredSortedData(): any[] {
+        return this.processedFlatData;
+    }
+
+    /**
+     * @hidden
+     */
+    protected scrollTo(row: number, column: number, page: number): void {
+        const rowData = this.processedFlatData[row];
+        const rowID = this._gridAPI.get_row_id(this.id, rowData);
+        const record = this.processedRecords.get(rowID);
+        this._gridAPI.expand_path_to_recrod(this.id, record);
+
+        const matchInfo = this.fixMatchInfoIndexes({
+            row: row,
+            column: column,
+            page: page
+        });
+
+        super.scrollTo(matchInfo.row, matchInfo.column, matchInfo.page);
+    }
+
+    /**
+     * @hidden
+     */
+    protected resolveSearchRowIndex(index: number, pagingIncrement: number, groupByIncrement: number, collapsedRowsCount: number) {
+        return index;
+    }
+
+    /**
+     * @hidden
+     */
+    protected fixMatchInfoIndexes(matchInfo: any): any {
+        const fixedMatchInfo: any = {};
+        const rowData = this.processedFlatData[matchInfo.row];
+        fixedMatchInfo.row = this.processedExpandedFlatData.indexOf(rowData);
+        fixedMatchInfo.page = this.paging ? Math.floor(fixedMatchInfo.row / this.perPage) : 0;
+        fixedMatchInfo.row = this.paging ? fixedMatchInfo.row % this.perPage : fixedMatchInfo.row;
+        fixedMatchInfo.column = matchInfo.column;
+        fixedMatchInfo.index = matchInfo.index;
+
+        return fixedMatchInfo;
+    }
+
     /**
     * @hidden
     */

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

@@ -87,7 +87,7 @@ export class IgxTreeGridHierarchizingPipe implements PipeTransform {
         for (let i = 0; i < collection.length; i++) {
             const record = collection[i];
             record.level = indentationLevel;
-            record.expanded = this.gridAPI.get_row_expansion_state(id, record.rowID, record.level);
+            record.expanded = this.gridAPI.get_row_expansion_state(id, record);
 
             if (record.children && record.children.length > 0) {
                 this.setIndentationLevels(id, record.children, indentationLevel + 1);
@@ -107,7 +107,7 @@ export class IgxTreeGridHierarchizingPipe implements PipeTransform {
                 parent: parent,
                 level: indentationLevel
             };
-            record.expanded = this.gridAPI.get_row_expansion_state(id, record.rowID, record.level);
+            record.expanded = this.gridAPI.get_row_expansion_state(id, record);
             flatData.push(item);
             map.set(record.rowID, record);
             record.children = item[childDataKey] ?
@@ -138,17 +138,20 @@ export class IgxTreeGridFlatteningPipe implements PipeTransform {
         expandedLevels: number, expandedStates: Map<any, boolean>, pipeTrigger: number): any[] {
 
         const grid: IgxTreeGridComponent = this.gridAPI.get(id);
-        const data: any[] = [];
+        const data: ITreeGridRecord[] = [];
 
         grid.processedRootRecords = collection;
         grid.processedRecords = new Map<any, ITreeGridRecord>();
+        grid.processedFlatData = [];
 
         this.getFlatDataRecursive(collection, data, expandedLevels, expandedStates, id, true);
 
+        grid.processedExpandedFlatData = data.map(r => r.data);
+
         return data;
     }
 
-    private getFlatDataRecursive(collection: ITreeGridRecord[], data: any[],
+    private getFlatDataRecursive(collection: ITreeGridRecord[], data: ITreeGridRecord[],
         expandedLevels: number, expandedStates: Map<any, boolean>, gridID: string,
         parentExpanded: boolean) {
         if (!collection || !collection.length) {
@@ -164,11 +167,12 @@ export class IgxTreeGridFlatteningPipe implements PipeTransform {
             }
 
             hierarchicalRecord.expanded = this.gridAPI.get_row_expansion_state(gridID,
-                hierarchicalRecord.rowID, hierarchicalRecord.level);
+                hierarchicalRecord);
 
             this.updateNonProcessedRecordExpansion(grid, hierarchicalRecord);
 
             grid.processedRecords.set(hierarchicalRecord.rowID, hierarchicalRecord);
+            grid.processedFlatData.push(hierarchicalRecord.data);
 
             this.getFlatDataRecursive(hierarchicalRecord.children, data, expandedLevels,
                 expandedStates, gridID, parentExpanded && hierarchicalRecord.expanded);

src/app/grid-search-box/grid-search-box.component.css

@@ -1,7 +1,3 @@
-.offset {
-    margin-bottom: 15px;
-}
-
 .resultsText {
     font-size: 0.875rem;
 }

src/app/grid-search-box/grid-search-box.component.html

@@ -1,4 +1,4 @@
-<igx-input-group type="search" class="offset">
+<igx-input-group type="search">
     <igx-prefix>
         <igx-icon *ngIf="searchText.length == 0">search</igx-icon>
         <igx-icon *ngIf="searchText.length > 0" (click)="clearSearch()">clear</igx-icon>
@@ -21,10 +21,10 @@
         <div class="chips">
             <igx-chips-area>
                 <igx-chip (click)="updateSearch()" [color]="caseSensitive? 'lightgrey' : 'rgba(0, 0, 0, .04)'">
-                    <span>Case Sensitive</span>
+                    <span title="Match Case">Aa</span>
                 </igx-chip>
                 <igx-chip (click)="updateExactSearch()" [color]="exactMatch? 'lightgrey' : 'rgba(0, 0, 0, .04)'">
-                    <span>Exact Match</span>
+                    <u title="Match Whole Word">Ab</u>
                 </igx-chip>
             </igx-chips-area>
         </div>

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

@@ -11,6 +11,7 @@
             <div class="density-chooser" style="margin-bottom: 16px">
                 <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"
                 [paging]="false" [displayDensity]="density" [width]="'900px'" [height]="'800px'" [showToolbar]="true"
                 [columnHiding]="true" [columnPinning]="true" [exportExcel]="true" [exportCsv]="true" exportText="Export"
@@ -20,6 +21,10 @@
                     [sortable]="true" [filterable]="true" [editable]="true" [hidden]="c.hidden" [hasSummary]="c.hasSummary"
                     [minWidth]="c.minWidth" [maxWidth]="c.maxWidth">
                 </igx-column>
+
+                <ng-template igxToolbarCustomContent>
+                    <app-grid-search-box [grid]="grid1" [style.width]="'530px'"></app-grid-search-box>
+                </ng-template>
             </igx-tree-grid>
 
             <div class="topMargin">

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

@@ -11,8 +11,6 @@
                 <igx-buttongroup [values]="displayDensities" (onSelect)="selectDensity($event)" style="display: block; width: 500px"></igx-buttongroup>
             </div>
 
-            <app-grid-search-box [grid]="grid1" [style.width]="'900px'"></app-grid-search-box>
-
             <app-tree-grid-with-transactions>
                 <igx-tree-grid #grid1 [data]="data" childDataKey="ChildCompanies" primaryKey="ID" expansionDepth="1"
                     rowSelectable="true" [paging]="false" [displayDensity]="density" [width]="'900px'" [height]="'500px'"
@@ -23,6 +21,10 @@
                         [sortable]="true" [filterable]="true" [editable]="true" [hidden]="c.hidden" [hasSummary]="c.summary"
                         [minWidth]="c.minWidth" [maxWidth]="c.maxWidth">
                     </igx-column>
+
+                    <ng-template igxToolbarCustomContent>
+                        <app-grid-search-box [grid]="grid1" [style.width]="'530px'"></app-grid-search-box>
+                    </ng-template>
                 </igx-tree-grid>
             </app-tree-grid-with-transactions>