Merge branch '10.2.x' into gedinakova/fix-9465-10.2

Author: 3phase

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

@@ -4110,13 +4110,33 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     }
 
     /**
-     * Manually marks the `IgxGridComponent` for change detection.
+     * Triggers change detection for the `IgxGridComponent`.
+     * Calling markForCheck also triggers the grid pipes explicitly, resulting in all updates being processed.
+     * May degrade performance if used when not needed, or if misused:
+     * ```typescript
+     * // DON'Ts:
+     * // don't call markForCheck from inside a loop
+     * // don't call markForCheck when a primitive has changed
+     * grid.data.forEach(rec => {
+     *  rec = newValue;
+     *  grid.markForCheck();
+     * });
+     *
+     * // DOs
+     * // call markForCheck after updating a nested property
+     * grid.data.forEach(rec => {
+     *  rec.nestedProp1.nestedProp2 = newValue;
+     * });
+     * grid.markForCheck();
+     * ```
+     *
      * @example
      * ```typescript
-     * this.grid1.markForCheck();
+     * grid.markForCheck();
      * ```
      */
     public markForCheck() {
+        this._pipeTrigger++;
         this.cdr.detectChanges();
     }
 

projects/igniteui-angular/src/lib/grids/hierarchical-grid/row-island.component.ts

@@ -92,7 +92,7 @@ export class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective
             if (document.body.contains(grid.nativeElement)) {
                 // Detect changes right away if the grid is visible
                 grid.expandChildren = value;
-                grid.markForCheck();
+                grid.cdr.detectChanges();
             } else {
                 // Else defer the detection on changes when the grid gets into view for performance.
                 grid.updateOnRender = true;

projects/igniteui-angular/src/lib/grids/row-drag.directive.ts

@@ -58,7 +58,7 @@ export class IgxRowDragDirective extends IgxDragDirective implements OnDestroy {
             }
             this.row.grid.dragRowID = this.row.rowID;
             this.row.grid.rowDragging = true;
-            this.row.grid.markForCheck();
+            this.row.grid.cdr.detectChanges();
 
             this.subscription$ = fromEvent(this.row.grid.document.defaultView, 'keydown').subscribe((ev: KeyboardEvent) => {
                 if (ev.key === KEYS.ESCAPE || ev.key === KEYS.ESCAPE_IE) {
@@ -96,7 +96,7 @@ export class IgxRowDragDirective extends IgxDragDirective implements OnDestroy {
 
     protected createGhost(pageX, pageY) {
         this.row.grid.endEdit(true);
-        this.row.grid.markForCheck();
+        this.row.grid.cdr.detectChanges();
         this.ghostContext = {
             $implicit: this.row.rowData,
             data: this.row.rowData,
@@ -141,7 +141,7 @@ export class IgxRowDragDirective extends IgxDragDirective implements OnDestroy {
         this.onTransitionEnd(null);
         this.row.grid.dragRowID = null;
         this.row.grid.rowDragging = false;
-        this.row.grid.markForCheck();
+        this.row.grid.cdr.detectChanges();
         this._unsubscribe();
     }
 

src/app/grid-filter-template/grid-filter-template.sample.html

@@ -38,8 +38,9 @@
                         tabindex="0"
                         placeholder="Filter..."
                         autocomplete="off"
-                        (input)="onInput(input, column)"/>
-                    <igx-suffix *ngIf="input.value || input.value === 0" (click)="clearInput(input, column)" tabindex="0">
+                        (input)="onInput(input, column)"
+                        (keydown)="onKeyDown($event)"/>
+                    <igx-suffix *ngIf="input.value" (click)="clearInput(input, column)" tabindex="0">
                         <igx-icon>clear</igx-icon>
                     </igx-suffix>
                 </igx-input-group>

src/app/grid-filter-template/grid-filter-template.sample.ts

@@ -490,22 +490,37 @@ export class GridFilterTemplateSampleComponent implements OnInit {
 
     public onInput(input: any, column: IgxColumnComponent) {
         let operand = null;
+        let value = input.value;
+
+        if (value === '') {
+            this.grid1.clearFilter(column.field);
+            return;
+        }
+
         switch (column.dataType) {
             case DataType.Number:
+                value = Number.parseInt(value, 10);
                 operand = IgxNumberFilteringOperand.instance().condition('equals');
                 break;
             case DataType.Date:
+                value = new Date(value);
                 operand = IgxDateFilteringOperand.instance().condition('equals');
                 break;
             default:
                 operand = IgxStringFilteringOperand.instance().condition('contains');
                 break;
         }
-        this.grid1.filter(column.field, input.value, operand, column.filteringIgnoreCase);
+
+        this.grid1.filter(column.field, value, operand, column.filteringIgnoreCase);
     }
 
     public clearInput(input: any, column: any) {
         input.value = null;
         this.grid1.clearFilter(column.field);
     }
+
+    public onKeyDown(event: KeyboardEvent) {
+        event.stopImmediatePropagation();
+    }
+
 }