feat(search): fix setting the contentChildElement #3519

IgniteUI · Jan 16, 2019 · c6d4a12 · c6d4a12
1 parent 0c03b04
commit c6d4a12
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 7 deletions.
diff --git a/projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.ts b/projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.ts
@@ -152,7 +152,9 @@ export class IgxTextHighlightDirective implements AfterViewInit, OnDestroy, OnCh
     @Input('page')
     public page: number;
 
-    @Input()
+    /**
+     * The content child element that should be hidden when there is a highlight
+     */
     public contentChildElement: ElementRef;
 
     /**

diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.ts b/projects/igniteui-angular/src/lib/grids/cell.component.ts
@@ -464,7 +464,7 @@ export class IgxGridCellComponent implements OnInit, AfterViewInit {
     protected inlineEditorTemplate: TemplateRef<any>;
 
     @ViewChild(IgxTextHighlightDirective, { read: IgxTextHighlightDirective })
-    private highlight: IgxTextHighlightDirective;
+    protected highlight: IgxTextHighlightDirective;
 
     /**
      * Sets the current edit value while a cell is in edit mode.
@@ -619,7 +619,6 @@ export class IgxGridCellComponent implements OnInit, AfterViewInit {
             this.gridAPI.escape_editMode(this.gridID, editableCell.cellID);
         }
         this.cdr.markForCheck();
-        this.grid.refreshSearch();
     }
 
 

diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html
@@ -1,6 +1,5 @@
 <ng-template #defaultCell igxTextHighlight [cssClass]="highlightClass" [activeCssClass]="activeHighlightClass" [groupName]="gridID"
-        [value]="formatter ? formatter(value) : value" [row]="row.rowData" [column]="this.column.field" [containerClass]="'igx-grid__td-text'"
-        [contentChildElement]="defaultContentElement">
+        [value]="formatter ? formatter(value) : value" [row]="row.rowData" [column]="this.column.field" [containerClass]="'igx-grid__td-text'">
     <ng-container *ngIf="column.dataType === 'boolean' || column.dataType === 'string' || formatter; else default" >
         <div #defaultContentElement class="igx-grid__td-text">{{ formatter ? formatter(value) : value }}</div>
     </ng-container>

diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.ts
@@ -1,4 +1,4 @@
-import { Component, ChangeDetectorRef, ElementRef, ViewChild, Inject } from '@angular/core';
+import { AfterViewInit, Component, ChangeDetectorRef, ElementRef, ViewChild, Inject, ViewChildren, QueryList } from '@angular/core';
 import { IgxGridCellComponent } from '../cell.component';
 import { IgxTreeGridAPIService } from './tree-grid-api.service';
 import { GridBaseAPIService } from '../api.service';
@@ -11,7 +11,7 @@ import { IgxGridBaseComponent } from '../grid';
     selector: 'igx-tree-grid-cell',
     templateUrl: 'tree-cell.component.html'
 })
-export class IgxTreeGridCellComponent extends IgxGridCellComponent {
+export class IgxTreeGridCellComponent extends IgxGridCellComponent implements AfterViewInit {
     private treeGridAPI: IgxTreeGridAPIService;
 
     constructor(gridAPI: GridBaseAPIService<IgxGridBaseComponent>,
@@ -32,6 +32,36 @@ export class IgxTreeGridCellComponent extends IgxGridCellComponent {
     @ViewChild('defaultContentElement', { read: ElementRef })
     public defaultContentElement: ElementRef;
 
+    /**
+     *@hidden
+     */
+    public ngAfterViewInit() {
+        if (this.highlight) {
+            this.highlight.contentChildElement = this.defaultContentElement;
+
+            if (this.grid.lastSearchInfo.searchText) {
+                this.highlight.highlight(this.grid.lastSearchInfo.searchText,
+                    this.grid.lastSearchInfo.caseSensitive,
+                    this.grid.lastSearchInfo.exactMatch);
+                this.highlight.activateIfNecessary();
+            }
+        }
+    }
+
+    /**
+     * If the provided string matches the text in the cell, the text gets highlighted.
+     * ```typescript
+     * this.cell.highlightText('Cell Value', true);
+     * ```
+     * @memberof IgxGridCellComponent
+     */
+    public highlightText(text: string, caseSensitive?: boolean, exactMatch?: boolean): number {
+        if (this.highlight) {
+            this.highlight.contentChildElement = this.defaultContentElement;
+        }
+        return super.highlightText(text, caseSensitive, exactMatch);
+    }
+
     /**
      * @hidden
      */