Merge pull request #4394 from IgniteUI/7.2.x

Merging 7.2.x into master

Author: kdinev

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+# 7.2.3
+- `IPinColumnEventArgs` new property - added a new property `isPinned` to the `IPinColumnEventArgs` interface. Now the `onColumnPinning` event emits information whether the column is pinned or unpinned.
+- `igxGrid`
+    - `igxFilterCellTemplate` directive added that allows retemplating of the filter cell.
+    - `IgxColumnComponent` now has `filterCellTemplate` property that can be used to retemplate the filter cell.
+
 # 7.2.2
 - **Components' Display Type** - All components now have their CSS display property explicitly set on the host element to ensure width, padding, and margins are applied when set directly on the host selectors.
 - **Themes** 

projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts

@@ -438,6 +438,8 @@ describe('IgxDatePicker', () => {
 
     it('#3595 - Should be able to change month', fakeAsync(() => {
         const fixture = TestBed.createComponent(IgxDatePickerTestComponent);
+        fixture.componentInstance.datePicker.value = new Date(2019, 2, 10);
+        tick(300);
         fixture.detectChanges();
 
         const dom = fixture.debugElement;
@@ -448,14 +450,14 @@ describe('IgxDatePicker', () => {
 
         let month = fixture.debugElement.nativeElement.getElementsByClassName('igx-calendar-picker__date')[0];
         month.dispatchEvent(new Event('click'));
-        tick();
+        tick(200);
         fixture.detectChanges();
 
-        const firstMonth = document.getElementsByClassName('igx-calendar__month')[1];
+        const firstMonth = document.getElementsByClassName('igx-calendar__month')[0];
         const expectedResult = (firstMonth as HTMLElement).innerText;
 
         firstMonth.dispatchEvent(new Event('click'));
-        tick();
+        tick(200);
         fixture.detectChanges();
 
         month = fixture.debugElement.nativeElement.getElementsByClassName('igx-calendar-picker__date')[0];

projects/igniteui-angular/src/lib/directives/for-of/virtual.helper.component.ts

@@ -10,12 +10,24 @@ export class VirtualHelperComponent implements OnDestroy {
 
     @ViewChild('container', { read: ViewContainerRef }) public _vcr;
     @Input() public itemsLength: number;
-    public height: number;
+
+    public set height(value) {
+        if (this.destroyed) {
+            return;
+        }
+        this._height = value;
+        this.cdr.detectChanges();
+    }
+
+    public get height() {
+        return this._height;
+    }
 
     @HostBinding('class')
     public cssClasses = 'igx-vhelper--vertical';
 
     public destroyed;
+    private _height: number;
 
     constructor(public elementRef: ElementRef, public cdr: ChangeDetectorRef) { }
 

projects/igniteui-angular/src/lib/grids/README.md

@@ -235,7 +235,7 @@ A list of the events emitted by the **igx-grid**:
 |`onRowAdded`|Emitted when a row is being added to the grid through the API. Returns the data for the new row object.|
 |`onRowDeleted`|Emitted when a row is deleted through the grid API. Returns the row object being removed.|
 |`onDataPreLoad`| Emitted when a new chunk of data is loaded from virtualization. |
-|`onColumnPinning`|Emitted when a column is pinned through the grid API. The index that the column is inserted at may be changed through the `insertAtIndex` property.|
+|`onColumnPinning`|Emitted when a column is pinned or unpinned through the grid API. The index that the column is inserted at may be changed through the `insertAtIndex` property. Use `isPinned` to check whether the column is pinned or unpinned.|
 |`onColumnResized`|Emitted when a column is resized. Returns the column object, previous and new column width.|
 |`onContextMenu`|Emitted when a cell is right clicked. Returns the cell object.|
 |`onDoubleClick`|Emitted when a cell is double clicked. Returns the cell object.|
@@ -351,6 +351,7 @@ Here is a list of all public methods exposed by **IgxGridColumnComponent**:
 |`headerTemplate`|TemplateRef|Yes|Yes|Get/Set a reference to a template which will be applied to the column header.|
 |`footerTemplate`|TemplateRef|Yes|Yes|Get/Set a reference to a template which will be applied to the column footer.|
 |`inlineEditorTemplate`|TemplateRef|Yes|Yes|Get/Set a reference to a template which will be applied as a cell enters edit mode.|
+|`filterCellTemplate`|TemplateRef|Yes|Yes|Get/Set a reference to a template which will be applied to the filter cell of the column.|
 
 
 ## Filtering Conditions

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

@@ -337,6 +337,9 @@ export class GridBaseAPIService <T extends IgxGridBaseComponent & IGridDataBinda
             if (emittedArgs.oldValue !== undefined
                 && isEqual(emittedArgs.oldValue, emittedArgs.newValue)) { return; }
             const rowValue = this.get_all_data(id, grid.transactions.enabled)[rowIndex];
+            if (grid.hasSummarizedColumns) {
+                grid.summaryService.clearSummaryCache(emittedArgs);
+            }
             this.updateData(grid, rowID, rowValue, currentGridEditState.rowData, { [column.field]: emittedArgs.newValue });
             if (grid.primaryKey === column.field) {
                 if (currentGridEditState.isRowSelected) {
@@ -585,6 +588,12 @@ export class GridBaseAPIService <T extends IgxGridBaseComponent & IGridDataBinda
         return column.dataType === DataType.Number;
     }
 
+    public get_data(id: string): any[] {
+        const grid = this.get(id);
+        const data = grid.data ? grid.data : [];
+        return data;
+    }
+
     public get_all_data(id: string, includeTransactions = false): any[] {
         const grid = this.get(id);
         let data = grid.data ? grid.data : [];

projects/igniteui-angular/src/lib/grids/cell.component.html

@@ -25,7 +25,7 @@
             [igxFocus]="focused" [disableRipple]="true"></igx-checkbox>
     </ng-container>
     <ng-container *ngIf="column.dataType === 'date'">
-        <igx-date-picker [outlet]="grid.outletDirective" mode="dropdown" (onSelection)="editValue = $event"
+        <igx-date-picker [style.width.%]="100" [outlet]="grid.outletDirective" mode="dropdown" (onSelection)="editValue = $event"
             [locale]="grid.locale" [(ngModel)]="editValue" [igxFocus]="focused" [labelVisibility]="false">
         </igx-date-picker>
     </ng-container>

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

@@ -524,7 +524,8 @@ export class IgxGridCellComponent implements OnInit, OnChanges {
         }
         this._clearCellSelection();
         this._saveCellSelection();
-        const hasFilteredResults = this.grid.filteredData ? this.grid.filteredData.length > 0 : true;
+        const hasFilteredResults = this.grid.filteredData ? this.grid.filteredData.indexOf(this.row.rowData) !== -1 :
+                                        this.grid.dataRowList.map(r => r.rowID).indexOf(this.cellID.rowID) !== -1;
         if (hasFilteredResults) {
             if (this.column.editable && this.previousCellEditMode && hasFilteredResults) {
                 this.inEditMode = true;
@@ -842,7 +843,6 @@ export class IgxGridCellComponent implements OnInit, OnChanges {
         if (this.column.editable) {
             if (this.inEditMode) {
                 this.grid.endEdit(true);
-                this.inEditMode = false;
                 this.nativeElement.focus();
             } else {
                 this.inEditMode = true;

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

@@ -11,15 +11,15 @@ import {
     forwardRef
 } from '@angular/core';
 import { DataType } from '../data-operations/data-util';
-import { IgxTextHighlightDirective } from '../directives/text-highlight/text-highlight.directive';
 import { GridBaseAPIService } from './api.service';
 import { IgxGridCellComponent } from './cell.component';
 import { IgxDateSummaryOperand, IgxNumberSummaryOperand, IgxSummaryOperand } from './summaries/grid-summary';
 import { IgxRowComponent } from './row.component';
 import {
     IgxCellEditorTemplateDirective,
     IgxCellHeaderTemplateDirective,
-    IgxCellTemplateDirective
+    IgxCellTemplateDirective,
+    IgxFilterCellTemplateDirective
 } from './grid.common';
 import { IgxGridHeaderComponent } from './grid-header.component';
 import { DefaultSortingStrategy, ISortingStrategy } from '../data-operations/sorting-strategy';
@@ -718,6 +718,34 @@ export class IgxColumnComponent implements AfterContentInit {
             this.grid.cdr.markForCheck();
         }
     }
+    /**
+     * Returns a reference to the `filterCellTemplate`.
+     * ```typescript
+     * let filterCellTemplate = this.column.filterCellTemplate;
+     * ```
+     * @memberof IgxColumnComponent
+     */
+    @Input('filterCellTemplate')
+    get filterCellTemplate(): TemplateRef<any> {
+        return this._filterCellTemplate;
+    }
+    /**
+     * Sets the quick filter template.
+     * ```html
+     * <ng-template #filterCellTemplate IgxFilterCellTemplate let-column="column">
+     *    <input (input)="onInput()">
+     * </ng-template>
+     * ```
+     * ```typescript
+     * @ViewChild("'filterCellTemplate'", {read: TemplateRef })
+     * public filterCellTemplate: TemplateRef<any>;
+     * this.column.filterCellTemplate = this.filterCellTemplate;
+     * ```
+     * @memberof IgxColumnComponent
+     */
+    set filterCellTemplate(template: TemplateRef<any>) {
+        this._filterCellTemplate = template;
+    }
     /**
      * Gets the cells of the column.
      * ```typescript
@@ -871,6 +899,10 @@ export class IgxColumnComponent implements AfterContentInit {
      *@hidden
      */
     protected _inlineEditorTemplate: TemplateRef<any>;
+    /**
+     *@hidden
+     */
+    protected _filterCellTemplate: TemplateRef<any>;
     /**
      *@hidden
      */
@@ -935,6 +967,12 @@ export class IgxColumnComponent implements AfterContentInit {
     @ContentChild(IgxCellEditorTemplateDirective, { read: IgxCellEditorTemplateDirective })
     protected editorTemplate: IgxCellEditorTemplateDirective;
 
+    /**
+     *@hidden
+     */
+    @ContentChild(IgxFilterCellTemplateDirective, { read: IgxFilterCellTemplateDirective })
+    public filterCellTemplateDirective: IgxFilterCellTemplateDirective;
+
     constructor(public gridAPI: GridBaseAPIService<IgxGridBaseComponent & IGridDataBindable>, public cdr: ChangeDetectorRef) { }
     /**
      *@hidden
@@ -949,6 +987,9 @@ export class IgxColumnComponent implements AfterContentInit {
         if (this.editorTemplate) {
             this._inlineEditorTemplate = this.editorTemplate.template;
         }
+        if (this.filterCellTemplateDirective) {
+            this._filterCellTemplate = this.filterCellTemplateDirective.template;
+        }
         if (!this.summaries) {
             switch (this.dataType) {
                 case DataType.String:
@@ -1027,7 +1068,7 @@ export class IgxColumnComponent implements AfterContentInit {
         this._unpinnedIndex = grid._unpinnedColumns.indexOf(this);
         index = index !== undefined ? index : grid._pinnedColumns.length;
         const targetColumn = grid._pinnedColumns[index];
-        const args = { column: this, insertAtIndex: index };
+        const args = { column: this, insertAtIndex: index, isPinned: true };
         grid.onColumnPinning.emit(args);
 
         if (grid._pinnedColumns.indexOf(this) === -1) {
@@ -1087,6 +1128,7 @@ export class IgxColumnComponent implements AfterContentInit {
         this._pinned = false;
 
         const targetColumn = grid._unpinnedColumns[index];
+
         grid._unpinnedColumns.splice(index, 0, this);
         if (grid._pinnedColumns.indexOf(this) !== -1) {
             grid._pinnedColumns.splice(grid._pinnedColumns.indexOf(this), 1);
@@ -1102,9 +1144,14 @@ export class IgxColumnComponent implements AfterContentInit {
 
         grid.reinitPinStates();
 
+        const insertAtIndex = grid._unpinnedColumns.indexOf(this);
+        const args = { column: this, insertAtIndex, isPinned: false };
+        grid.onColumnPinning.emit(args);
+
         grid.cdr.detectChanges();
         this.grid.filteringService.refreshExpressions();
         this.grid.refreshSearch(true);
+
         return true;
     }
     /**

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

@@ -41,4 +41,4 @@
     </igx-chip>
 </ng-template>
 
-<ng-container *ngTemplateOutlet="template; context: { $implicit: this }"></ng-container>
+<ng-container *ngTemplateOutlet="template; context: context"></ng-container>

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

@@ -82,46 +82,17 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit, DoC
 
     @HostListener('keydown.tab', ['$event'])
     public onTabKeyDown(eventArgs) {
-        const nextIndex = this.filteringService.unpinnedFilterableColumns.indexOf(this.column) + 1;
 
         if (this.isLastElementFocused()) {
-            if (this.column === this.getLastPinnedFilterableColumn() &&
-                (!this.isColumnLeftVisible(nextIndex) || !this.isColumnRightVisible(nextIndex))) {
-                this.filteringService.scrollToFilterCell(this.filteringService.unpinnedFilterableColumns[nextIndex], false);
-                eventArgs.stopPropagation();
-                return;
-            }
-
-            if (nextIndex >= this.filteringService.unpinnedFilterableColumns.length) {
-                if (!this.filteringService.grid.filteredData || this.filteringService.grid.filteredData.length > 0) {
-                    if (this.filteringService.grid.rowList.filter(row => row instanceof IgxGridGroupByRowComponent).length > 0) {
-                        eventArgs.stopPropagation();
-                        return;
-                    }
-                    this.navService.goToFirstCell();
-                }
-                eventArgs.preventDefault();
-            } else if (!this.column.pinned && !this.isColumnRightVisible(nextIndex)) {
-                eventArgs.preventDefault();
-                this.filteringService.scrollToFilterCell(this.filteringService.unpinnedFilterableColumns[nextIndex], true);
-            }
+            this.filteringService.grid.navigation.navigateNextFilterCell(this.column, eventArgs);
         }
         eventArgs.stopPropagation();
     }
 
     @HostListener('keydown.shift.tab', ['$event'])
     public onShiftTabKeyDown(eventArgs) {
         if (this.isFirstElementFocused()) {
-            const prevIndex = this.filteringService.unpinnedFilterableColumns.indexOf(this.column) - 1;
-
-            if (prevIndex >= 0 && this.column.visibleIndex > 0 && !this.isColumnLeftVisible(prevIndex) && !this.column.pinned) {
-                eventArgs.preventDefault();
-                this.filteringService.scrollToFilterCell(this.filteringService.unpinnedFilterableColumns[prevIndex], false);
-            } else if (this.column.visibleIndex === 0 ||
-                        (prevIndex < 0 && !this.getFirstPinnedFilterableColumn()) ||
-                        this.column === this.getFirstPinnedFilterableColumn()) {
-                eventArgs.preventDefault();
-            }
+            this.filteringService.grid.navigation.navigatePrevFilterCell(this.column, eventArgs);
         }
         eventArgs.stopPropagation();
     }
@@ -148,6 +119,11 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit, DoC
             return null;
         }
 
+        if (this.column.filterCellTemplate) {
+            this.currentTemplate = this.column.filterCellTemplate;
+            return this.column.filterCellTemplate;
+        }
+
         const expressionTree = this.column.filteringExpressionsTree;
         if (!expressionTree || expressionTree.filteringOperands.length === 0) {
             this.currentTemplate = this.emptyFilter;
@@ -163,6 +139,16 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit, DoC
         return this.defaultFilter;
     }
 
+    /**
+     * Gets the context passed to the filter template.
+     * @memberof IgxGridFilteringCellComponent
+     */
+    get context() {
+        return {
+            column: this.column
+        };
+    }
+
     /**
      * Chip clicked event handler.
      */
@@ -345,16 +331,6 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit, DoC
         }
     }
 
-    private getLastPinnedFilterableColumn(): IgxColumnComponent {
-        const pinnedFilterableColums =
-            this.filteringService.grid.pinnedColumns.filter(col => !(col instanceof IgxColumnGroupComponent) && col.filterable);
-        return pinnedFilterableColums[pinnedFilterableColums.length - 1];
-    }
-
-    private getFirstPinnedFilterableColumn(): IgxColumnComponent {
-        return this.filteringService.grid.pinnedColumns.filter(col => !(col instanceof IgxColumnGroupComponent) && col.filterable)[0];
-    }
-
     private isColumnRightVisible(columnIndex: number): boolean {
         if (this.filteringService.areAllColumnsInView) {
             return true;