Merge branch '7.3.x' into dkamburov/fix-5598-7.3.x

Author: ChronosSF

azure-pipelines.yml

@@ -40,7 +40,7 @@ steps:
     testResultsFiles: '**/TESTS-*.xml' 
 
 - task: PublishCodeCoverageResults@1
-  inputs: 
+  inputs:
     codeCoverageTool: Cobertura
     summaryFileLocation: '$(System.DefaultWorkingDirectory)/coverage/cobertura-coverage.xml'
     reportDirectory: '$(System.DefaultWorkingDirectory)/coverage'

projects/igniteui-angular/src/lib/directives/dragdrop/dragdrop.directive.ts

@@ -856,7 +856,8 @@ export class IgxDragDirective implements OnInit, OnDestroy {
         const viewPortY = pageY - window.pageYOffset;
         if (document['msElementsFromPoint']) {
             // Edge and IE special snowflakes
-            return document['msElementsFromPoint'](viewPortX, viewPortY);
+            const elements = document['msElementsFromPoint'](viewPortX, viewPortY);
+            return elements === null ? [] : elements;
         } else {
             // Other browsers like Chrome, Firefox, Opera
             return document.elementsFromPoint(viewPortX, viewPortY);

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

@@ -214,7 +214,6 @@ export class GridBaseAPIService <T extends IgxGridBaseComponent & IGridDataBinda
 
     update_row(row: IgxRow, value: any) {
         const grid = this.grid;
-        const selected = grid.selection.is_item_selected(grid.id, row.id);
         const rowInEditMode = grid.crudService.row;
         const data = this.get_all_data(grid.transactions.enabled);
         const index = this.get_row_index_in_data(row.id);
@@ -249,6 +248,7 @@ export class GridBaseAPIService <T extends IgxGridBaseComponent & IGridDataBinda
 
         this.updateData(grid, row.id, data[index], args.oldValue, args.newValue);
         const newId = grid.primaryKey ? args.newValue[grid.primaryKey] : args.newValue;
+        const selected = grid.selection.is_item_selected(grid.id, row.id);
         if (selected) {
             grid.selection.deselect_item(grid.id, row.id);
             grid.selection.select_item(grid.id, newId);

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

@@ -1653,8 +1653,8 @@ export class IgxColumnComponent implements AfterContentInit {
     */
     public get pinnable() {
         const gridUnpinnedWidth = (this.grid as any).getUnpinnedWidth(true);
-        const columnWidth = parseInt(this.width, 10);
-        return !((gridUnpinnedWidth - columnWidth) < this.grid.unpinnedAreaMinWidth);
+        const elementWidth = this.parent ? parseInt(this.topLevelParent.width, 10) : parseInt(this.width, 10);
+        return !((gridUnpinnedWidth - elementWidth) < this.grid.unpinnedAreaMinWidth);
     }
 
     /**

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-column-moving.component.ts

@@ -55,6 +55,9 @@ export class IgxExcelStyleColumnMovingComponent {
             }
         } else if (this.grid.unpinnedColumns.indexOf(this.column) === 0 && moveDirection === 0) {
             targetColumn = this.grid.pinnedColumns[this.grid.pinnedColumns.length - 1];
+            if (targetColumn.parent) {
+                targetColumn = targetColumn.topLevelParent;
+            }
             moveDirection = 1;
         } else {
             targetColumn = this.findColumn(moveDirection, this.grid.unpinnedColumns);

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

@@ -3497,7 +3497,8 @@ describe('IgxGrid - Filtering actions - Excel style filtering', () => {
             declarations: [
                 IgxGridFilteringComponent,
                 IgxTestExcelFilteringDatePickerComponent,
-                IgxGridFilteringESFTemplatesComponent
+                IgxGridFilteringESFTemplatesComponent,
+                IgxGridFilteringMCHComponent
             ],
             imports: [
                 NoopAnimationsModule,
@@ -5628,6 +5629,75 @@ describe('IgxGrid - Filtering actions - Excel style filtering', () => {
             // expect(datePicker.componentInstance.templateDropDownTarget).toBeTruthy();
         }));
     });
+
+    describe(null, () => {
+        let fix, grid;
+        beforeEach(fakeAsync(() => {
+            fix = TestBed.createComponent(IgxGridFilteringMCHComponent);
+            grid = fix.componentInstance.grid;
+            grid.filterMode = FilterMode.excelStyleFilter;
+            fix.detectChanges();
+        }));
+
+        it('Should not pin column when its parent group cannot be pinned.', fakeAsync(() => {
+            // Test prerequisites
+            grid.width = '1000px';
+            fix.detectChanges();
+            tick(100);
+
+            // Pin the 'AnotherField' column.
+            GridFunctions.clickExcelFilterIcon(fix, 'AnotherField');
+            fix.detectChanges();
+            GridFunctions.clickPinIconInExcelStyleFiltering(fix, false);
+            tick(200);
+            fix.detectChanges();
+
+            // Verify that the 'ProductName' pin button is disabled, because its parent column cannot be pinned.
+            GridFunctions.clickExcelFilterIcon(fix, 'ProductName');
+            fix.detectChanges();
+            const pinButton = GridFunctions.getExcelFilteringPinContainer(fix);
+            expect(pinButton.classList.contains('igx-excel-filter__actions-pin--disabled')).toBe(true,
+                'pinButton should be disabled');
+        }));
+
+        it('Should pin column next to already pinned group by moving it to the left.', fakeAsync(() => {
+            // Test prerequisites
+            grid.width = '1000px';
+            fix.detectChanges();
+            tick(100);
+            // Adjust column widths, so their group can be pinned.
+            const columnFields = ['ID', 'ProductName', 'Downloads', 'Released', 'ReleaseDate', 'AnotherField'];
+            columnFields.forEach((columnField) => {
+                const col = grid.columns.find((c) => c.field === columnField);
+                col.width = '100px';
+            });
+            fix.detectChanges();
+            // Make 'AnotherField' column movable.
+            const column = grid.columns.find((c) => c.field === 'AnotherField');
+            column.movable = true;
+            fix.detectChanges();
+
+            // Pin the 'General Information' group by pinning its child 'ProductName' column.
+            GridFunctions.clickExcelFilterIcon(fix, 'ProductName');
+            fix.detectChanges();
+            GridFunctions.clickPinIconInExcelStyleFiltering(fix, false);
+            tick(200);
+            fix.detectChanges();
+
+            // Verify 'AnotherField' column is not pinned.
+            GridFunctions.verifyColumnIsPinned(column, false, 7);
+
+            // Try to pin the 'AnotherField' column by moving it to the left.
+            GridFunctions.clickExcelFilterIcon(fix, 'AnotherField');
+            fix.detectChanges();
+            GridFunctions.clickMoveLeftInExcelStyleFiltering(fix);
+            tick(200);
+            fix.detectChanges();
+
+            // Verify 'AnotherField' column is successfully pinned next to the column group.
+            GridFunctions.verifyColumnIsPinned(column, true, 8);
+        }));
+    });
 });
 
 const expectedResults = [];

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

@@ -25,10 +25,11 @@
         <div class="igx-grid__tr" role="row" [style.width.px]='calcWidth + 1'>
             <span *ngIf="hasMovableColumns && draggedColumn && pinnedColumns.length <= 0" [igxColumnMovingDrop]="parentVirtDir" [attr.droppable]="true" id="left" class="igx-grid__scroll-on-drag-left"></span>
             <span *ngIf="hasMovableColumns && draggedColumn && pinnedColumns.length > 0" [igxColumnMovingDrop]="parentVirtDir" [attr.droppable]="true" id="left" class="igx-grid__scroll-on-drag-pinned" [style.left.px]="pinnedWidth"></span>
-                <div class="igx-grid__hierarchical-expander igx-grid__hierarchical-expander--header" #headerHierarchyExpander [hidden]='!hasExpandableChildren || !hasVisibleColumns'[ngClass]="{
+                <div #headerHierarchyExpander [hidden]='!hasExpandableChildren || !hasVisibleColumns' [ngClass]="{
+                    'igx-grid__hierarchical-expander igx-grid__hierarchical-expander--header': hasExpandableChildren,
                     'igx-grid__hierarchical-expander--push': filteringService.isFilterRowVisible,
                     'igx-grid__hierarchical-expander--no-border': rowSelectable || rowDraggable
-                }">
+                    }">
                     <igx-icon role="button" fontSet="material" [isActive]='hierarchicalState.length > 0 && hasExpandableChildren' (click)="collapseAllRows()">unfold_less</igx-icon>
                 </div>
                 <ng-container *ngIf="rowDraggable">