Merge branch '8.2.x' into mkirova/fix-4970-8.2.x

Author: MayaKirova

projects/igniteui-angular/src/lib/data-operations/data-util.ts

@@ -210,6 +210,14 @@ export class DataUtil {
         return data;
     }
 
+    public static parseValue(dataType: DataType, value: any): any {
+        if (dataType === DataType.Number) {
+            value = parseFloat(value);
+        }
+
+        return value;
+    }
+
     private static findParentFromPath(data: any[], primaryKey: any, childDataKey: any, path: any[]): any {
         let collection: any[] = data;
         let result: any;

projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.ts

@@ -18,6 +18,7 @@ import { takeUntil, first } from 'rxjs/operators';
 import { Subject } from 'rxjs';
 import { KEYS } from '../../../core/utils';
 import { AbsoluteScrollStrategy, AutoPositionStrategy } from '../../../services/index';
+import { DataUtil } from './../../../data-operations/data-util';
 
 /**
  *@hidden
@@ -301,7 +302,7 @@ export class IgxAdvancedFilteringDialogComponent implements AfterViewInit, OnDes
         if (this.editedExpression) {
             this.editedExpression.expression.fieldName = this.selectedColumn.field;
             this.editedExpression.expression.condition = this.selectedColumn.filters.condition(this.selectedCondition);
-            this.editedExpression.expression.searchVal = this.searchValue;
+            this.editedExpression.expression.searchVal = DataUtil.parseValue(this.selectedColumn.dataType, this.searchValue);
 
             this.editedExpression.inEditMode = false;
             this.editedExpression = null;

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.ts

@@ -13,7 +13,7 @@ import { ExpressionUI } from '../grid-filtering.service';
 import { IgxButtonGroupComponent } from '../../../buttonGroup/buttonGroup.component';
 import { IgxDropDownItemComponent, IgxDropDownComponent } from '../../../drop-down/index';
 import { IgxInputGroupComponent, IgxInputDirective } from '../../../input-group/index';
-import { DataType } from '../../../data-operations/data-util';
+import { DataType, DataUtil } from '../../../data-operations/data-util';
 import { IFilteringOperation } from '../../../data-operations/filtering-condition';
 import { OverlaySettings, ConnectedPositioningStrategy, CloseScrollStrategy } from '../../../services/index';
 import { KEYS, IBaseEventArgs } from '../../../core/utils';
@@ -167,7 +167,7 @@ export class IgxExcelStyleDefaultExpressionComponent implements AfterViewInit {
     }
 
     public onValuesInput(eventArgs) {
-        this.expressionUI.expression.searchVal = this.transformValue(eventArgs.target.value);
+        this.expressionUI.expression.searchVal = DataUtil.parseValue(this.column.dataType, eventArgs.target.value);
     }
 
     public onLogicOperatorButtonClicked(eventArgs, buttonIndex: number) {
@@ -207,14 +207,4 @@ export class IgxExcelStyleDefaultExpressionComponent implements AfterViewInit {
 
         event.stopPropagation();
     }
-
-    private transformValue(value): any {
-        if (this.column.dataType === DataType.Number) {
-            value = parseFloat(value);
-        } else if (this.column.dataType === DataType.Boolean) {
-            value = Boolean(value);
-        }
-
-        return value;
-    }
 }

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

@@ -13,7 +13,7 @@ import {
     ChangeDetectionStrategy,
     ViewRef
 } from '@angular/core';
-import { DataType } from '../../data-operations/data-util';
+import { DataType, DataUtil } from '../../data-operations/data-util';
 import { IgxColumnComponent } from '../column.component';
 import { IgxDropDownComponent, ISelectionEventArgs } from '../../drop-down/index';
 import { IFilteringOperation } from '../../data-operations/filtering-condition';
@@ -100,7 +100,7 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
             this.expression.searchVal = null;
             this.showHideArrowButtons();
         } else {
-            this.expression.searchVal = this.transformValue(val);
+            this.expression.searchVal = DataUtil.parseValue(this.column.dataType, val);
             if (this.expressionsList.find(item => item.expression === this.expression) === undefined) {
                 this.addExpression(true);
             }
@@ -659,16 +659,6 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
         });
     }
 
-    private transformValue(value): any {
-        if (this.column.dataType === DataType.Number) {
-            value = parseFloat(value);
-        } else if (this.column.dataType === DataType.Boolean) {
-            value = Boolean(value);
-        }
-
-        return value;
-    }
-
     private addExpression(isSelected: boolean) {
         const exprUI = new ExpressionUI();
         exprUI.expression = this.expression;

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

@@ -103,7 +103,7 @@ import { DeprecateProperty } from '../core/deprecateDecorators';
 import { IFilteringStrategy } from '../data-operations/filtering-strategy';
 import { IgxRowExpandedIndicatorDirective, IgxRowCollapsedIndicatorDirective,
      IgxHeaderExpandIndicatorDirective, IgxHeaderCollapseIndicatorDirective } from './grid/grid.directives';
-import { IgxRowDragGhostDirective  } from './row-drag.directive';
+import { IgxRowDragGhostDirective, IgxDragIndicatorIconDirective  } from './row-drag.directive';
 import { GridKeydownTargetType, GridSelectionMode, GridSummaryPosition, GridSummaryCalculationMode, FilterMode } from './common/enums';
 
 const MINIMUM_COLUMN_WIDTH = 136;
@@ -229,6 +229,7 @@ export interface IRowDragStartEventArgs extends CancelableEventArgs, IBaseEventA
 export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
     OnInit, DoCheck, OnDestroy, AfterContentInit, AfterViewInit {
     private _scrollWidth: number;
+    private _customDragIndicatorIconTemplate: TemplateRef<any>;
     protected _init = true;
     private _tick;
     private _cdrRequests = false;
@@ -1945,6 +1946,22 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
     @ContentChildren(IgxRowDragGhostDirective, { read: TemplateRef, descendants: false })
     public dragGhostCustomTemplates: QueryList<TemplateRef<any>>;
 
+    /**
+     * @hidden
+     * @internal
+     */
+    @ContentChildren(IgxDragIndicatorIconDirective, { read: TemplateRef, descendants: false })
+    public dragIndicatorIconTemplates: QueryList<TemplateRef<any>>;
+    /**
+    * The custom template, if any, that should be used when rendering the row drag indicator icon
+    */
+    public get dragIndicatorIconTemplate(): TemplateRef<any> {
+        return this._customDragIndicatorIconTemplate || this.dragIndicatorIconTemplates.first;
+    }
+
+    public set dragIndicatorIconTemplate(val: TemplateRef<any>) {
+        this._customDragIndicatorIconTemplate = val;
+    }
     /**
      * @hidden
      */
@@ -2055,7 +2072,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
      * @hidden
      */
     public get parentRowOutletDirective() {
-        return this.outletDirective;
+        return null;
     }
 
     /**

projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts

@@ -419,7 +419,7 @@ describe('IgxGrid - Advanced Filtering', () => {
             expect(GridFunctions.getCurrentCellFromGrid(grid, 1, 1).value).toBe('Ignite UI for Angular');
         }));
 
-        it('Should correctly filter by a \'number\' column through UI.', fakeAsync(() => {
+        it('Should correctly filter by a \'Greater Than\' with \'number\' column through UI.', fakeAsync(() => {
             // Test prerequisites
             grid.height = '800px';
             fix.detectChanges();
@@ -461,6 +461,47 @@ describe('IgxGrid - Advanced Filtering', () => {
             expect(GridFunctions.getCurrentCellFromGrid(grid, 1, 1).value).toBe('NetAdvantage');
         }));
 
+        it('Should correctly filter by a \'Equals\' with \'number\' column through UI.', fakeAsync(() => {
+            // Test prerequisites
+            grid.height = '800px';
+            fix.detectChanges();
+            tick(50);
+
+            // Verify no filters are present.
+            expect(grid.filteredData).toBeNull();
+            expect(grid.rowList.length).toBe(8);
+            expect(GridFunctions.getCurrentCellFromGrid(grid, 0, 1).value).toBe('Ignite UI for JavaScript');
+            expect(GridFunctions.getCurrentCellFromGrid(grid, 1, 1).value).toBe('NetAdvantage');
+
+            // Open Advanced Filtering dialog.
+            GridFunctions.clickAdvancedFilteringButton(fix);
+            fix.detectChanges();
+
+            // Click the initial 'Add And Group' button.
+            const addAndGroupButton = GridFunctions.getAdvancedFilteringInitialAddGroupButtons(fix)[0];
+            addAndGroupButton.click();
+            tick(100);
+            fix.detectChanges();
+
+            selectColumnInEditModeExpression(fix, 2); // Select 'Downloads' column.
+            selectOperatorInEditModeExpression(fix, 0); // Select 'Equals' operator.
+            const input = GridFunctions.getAdvancedFilteringValueInput(fix).querySelector('input');
+            sendInputNativeElement(fix, input, '127'); // Type filter value.
+
+            // Commit the populated expression.
+            GridFunctions.clickAdvancedFilteringExpressionCommitButton(fix);
+            fix.detectChanges();
+
+            // Apply the filters.
+            GridFunctions.clickAdvancedFilteringApplyButton(fix);
+            fix.detectChanges();
+
+            // Verify the filter results.
+            expect(grid.filteredData.length).toEqual(1);
+            expect(grid.rowList.length).toBe(1);
+            expect(GridFunctions.getCurrentCellFromGrid(grid, 0, 1).value).toBe('NetAdvantage');
+        }));
+
         it('Should correctly filter by a \'boolean\' column through UI.', fakeAsync(() => {
             // Test prerequisites
             grid.height = '800px';

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

@@ -471,27 +471,6 @@ export class IgxGridComponent extends IgxGridBaseComponent implements IGridDataB
     @ContentChild(IgxGroupByRowTemplateDirective, { read: IgxGroupByRowTemplateDirective, static: false })
     protected groupTemplate: IgxGroupByRowTemplateDirective;
 
-    /**
-     * The custom template, if any, that should be used when rendering the row drag indicator icon
-     *
-     * ```typescript
-     * // Set in typescript
-     * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
-     * myComponent.dragIndicatorIconTemplate = myCustomTemplate;
-     * ```
-     * ```html
-     * <!-- Set in markup -->
-     *  <igx-grid #grid>
-     *      ...
-     *      <ng-template igxDragIndicatorIcon>
-     *          <igx-icon fontSet="material">info</igx-icon>
-     *      </ng-template>
-     *  </igx-grid>
-     * ```
-     */
-    @ContentChild(IgxDragIndicatorIconDirective, { read: TemplateRef, static: false })
-    public dragIndicatorIconTemplate: TemplateRef<any> = null;
-
     @ViewChildren(IgxGridGroupByRowComponent, { read: IgxGridGroupByRowComponent })
     private _groupsRowList: QueryList<IgxGridGroupByRowComponent>;
 

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

@@ -94,27 +94,6 @@ export abstract class IgxHierarchicalGridBaseComponent extends IgxGridBaseCompon
     @ViewChild('dragIndicatorIconBase', { read: TemplateRef, static: true })
     public dragIndicatorIconBase: TemplateRef<any>;
 
-
-    /**
-     * The custom template, if any, that should be used when rendering the row drag indicator icon
-     *
-     * ```typescript
-     * // Set in typescript
-     * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
-     * myComponent.dragIndicatorIconTemplate = myCustomTemplate;
-     * ```
-     * ```html
-     * <!-- Set in markup -->
-     *  <igx-grid #grid>
-     *      ...
-     *      <ng-template igxDragIndicatorIcon>
-     *          <igx-icon fontSet="material">info</igx-icon>
-     *      </ng-template>
-     *  </igx-grid>
-     * ```
-     */
-    public dragIndicatorIconTemplate: TemplateRef<any> = null;
-
     constructor(
         public selectionService: IgxGridSelectionService,
         crudService: IgxGridCRUDService,

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

@@ -411,6 +411,9 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseCompone
         this.rowSelectorsTemplates = this.parentIsland ?
             this.parentIsland.rowSelectorsTemplates :
             this.rowSelectorsTemplates;
+        this.dragIndicatorIconTemplate = this.parentIsland ?
+            this.parentIsland.dragIndicatorIconTemplate :
+            this.dragIndicatorIconTemplate;
         this.rowExpandedIndicatorTemplate  = this.rootGrid.rowExpandedIndicatorTemplate;
         this.rowCollapsedIndicatorTemplate   = this.rootGrid.rowCollapsedIndicatorTemplate;
         this.headerCollapseIndicatorTemplate = this.rootGrid.headerCollapseIndicatorTemplate;
@@ -443,6 +446,13 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseCompone
         return this.rootGrid._outletDirective;
     }
 
+    /**
+     * @hidden
+     */
+    public get parentRowOutletDirective() {
+        return this === this.rootGrid ? null : this.rootGrid.rowEditingOutletDirective;
+    }
+
     /**
      * @hidden
      */

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

@@ -313,27 +313,6 @@ export class IgxTreeGridComponent extends IgxGridBaseComponent implements IGridD
     @ContentChild(IgxRowLoadingIndicatorTemplateDirective, { read: IgxRowLoadingIndicatorTemplateDirective, static: false })
     protected rowLoadingTemplate: IgxRowLoadingIndicatorTemplateDirective;
 
-    /**
-     * The custom template, if any, that should be used when rendering the row drag indicator icon
-     *
-     * ```typescript
-     * // Set in typescript
-     * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
-     * myComponent.dragIndicatorIconTemplate = myCustomTemplate;
-     * ```
-     * ```html
-     * <!-- Set in markup -->
-     *  <igx-grid #grid>
-     *      ...
-     *      <ng-template igxDragIndicatorIcon>
-     *          <igx-icon fontSet="material">info</igx-icon>
-     *      </ng-template>
-     *  </igx-grid>
-     * ```
-     */
-    @ContentChild(IgxDragIndicatorIconDirective, { read: TemplateRef, static: false })
-    public dragIndicatorIconTemplate: TemplateRef<any> = null;
-
     /**
      * An @Input property that provides a template for the row loading indicator when load on demand is enabled.
      * ```html