Merge branch '8.1.x' into ddimitrov/fix-5479-8.1.x

Author: kdinev

CHANGELOG.md

@@ -26,6 +26,14 @@ All notable changes for each version of this project will be documented in this
         ```
 - `igx-paginator`
     - Replaces the current paginator in all grids. Can be used as a standalone component.
+      <br/>Have in mind that if you have set the `paginationTemplate`, you may have to modify your css to display the pagination correctly. The style should be something similar to:
+      ```
+      .pagination-container {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+       }
+       ```
 - `IgxCombo`
     - Input `[overlaySettings]` - allows an object of type `OverlaySettings` to be passed. These custom overlay settings control how the drop-down list displays.
 - `IgxForOf` now offers usage of local variables `even`, `odd`, `first` and `last` to help with the distinction of the currently iterated element.

ROADMAP.md

@@ -2,41 +2,82 @@
 
 # Current Milestone
 
-## Milestone 8 (Due by July, 2019) 
+## Milestone 9 (Due by September, 2019) 
+
+1. IgxGrid Advanced Filtering [#5496](https://github.com/IgniteUI/igniteui-angular/issues/5496)
+2. IgxGrid row and cell selection modes [#4989](https://github.com/IgniteUI/igniteui-angular/issues/4989)
+3. Fluent Theme [#5335](https://github.com/IgniteUI/igniteui-angular/issues/5335)
+4. Drag and Drop enhancements [#5319](https://github.com/IgniteUI/igniteui-angular/issues/5319)
+
+## Going down the road
+
+1. Row-pinning
+2. Column Groups expand/collapse, with column grouping templates
+3. Visual Cell merging 
+
+# Previous Milestones
+
+## Milestone 8 (Released July 22nd, 2019) 
 
 1. **[DONE]** Grid Multi-Row Layout keyboard nav [#4708](https://github.com/IgniteUI/igniteui-angular/issues/4708) Released in [8.0.0](https://github.com/IgniteUI/igniteui-angular/releases/tag/8.0.0), [7.3.4](https://github.com/IgniteUI/igniteui-angular/releases/tag/7.3.4)
 2. **[DONE]** Angular 8 compatibility [#4908](https://github.com/IgniteUI/igniteui-angular/issues/4908) Released in [8.0.0](https://github.com/IgniteUI/igniteui-angular/releases/tag/8.0.0)
 3. **[DONE]** Display density for Drop Downs [#2960](https://github.com/IgniteUI/igniteui-angular/issues/2960) Released in [8.0.1](https://github.com/IgniteUI/igniteui-angular/releases/tag/8.0.1), [7.3.4](https://github.com/IgniteUI/igniteui-angular/releases/tag/7.3.4), [7.2.12](https://github.com/IgniteUI/igniteui-angular/releases/tag/7.2.12)
-4. Slider custom labels #4594
-5. Copy data from the igxGrid #4907
-6. BottomNav and Tabs integration with router outlet container [#4297](https://github.com/IgniteUI/igniteui-angular/issues/4297)
+4. **[DONE]** Slider custom labels [#4594](https://github.com/IgniteUI/igniteui-angular/issues/4594)
+5. **[DONE]** Copy data from the igxGrid [#4907](https://github.com/IgniteUI/igniteui-angular/issues/4907)
+6. **[DONE]** BottomNav and Tabs integration with router outlet container [#4297](https://github.com/IgniteUI/igniteui-angular/issues/4297)
 7. **[DONE]** Date/Time pickers action buttons customization [#4647](https://github.com/IgniteUI/igniteui-angular/issues/4647) Released in [8.0.0](https://github.com/IgniteUI/igniteui-angular/releases/tag/8.0.0)
 8. **[DONE]** Square and oval presets in theming [#4964](https://github.com/IgniteUI/igniteui-angular/issues/4964) Released in [8.0.0](https://github.com/IgniteUI/igniteui-angular/releases/tag/8.0.0)
-9. Grid column group header templates [#3344](https://github.com/IgniteUI/igniteui-angular/issues/3344)
+9. **[DONE]** Grid column group header templates [#3344](https://github.com/IgniteUI/igniteui-angular/issues/3344)
 
+## Milestone 7 (13.05.2019) 
 
-## Going down the road
+1. **[DONE]** Multi-cell Selection #3915
+2. **[DONE]** Grid Multi-Row Layout #4384
+3. **[DONE]** Grid Row Dragging #3993
+3. **[DONE]** List, button, button group display density support #4393 #4502 #4532
 
-1. Advanced Filtering
-2. Row-pinning
-3. Column Groups expand/collapse, with column grouping templates
-4. Visual Cell merging 
+## Milestone 6 (Due March 8th, 2019)
 
+1. **[DONE]** Hierarchical Grid #827 
+2. **[DROPPED]** igxGrid rendering strategies (like record-based rendering) #2384
+3. **[DONE]** Auto-complete (inline editable) #3585
+4. **[DONE]** Excel Style Filtering #3592
+5. **[DONE]** Inline date and time pickers (with drop down/toggle) #3034 #2337
+6. **[DONE]** igxSelect Component #3148
 
-# Previous Milestones
+## Milestone 5 (14.12.2018)
 
-## Milestone 1 (by January 15th, 2018)
+1. **[DONE]** TreeGrid summaries
+2. **[DONE]** Grid GroupBy summaries
+3. **[DONE]** Banner Component [issue](https://github.com/IgniteUI/igniteui-angular/issues/2672)
+4. **[DONE]** Toolbar Templatable and NavBar Templatable
+
+## Milestone 4 (November 30th, 2018)
+
+1. **[Done]** Tree Grid [issue](https://github.com/IgniteUI/igniteui-angular/issues/2530)
+2. **[Done]** Quick Per-column Search in the igxGrid [issue](https://github.com/IgniteUI/igniteui-angular/issues/542)
+3. **[Done]** Expandable Panel [issue](https://github.com/IgniteUI/igniteui-angular/issues/307)
+4. **[Done]** Conditional Cell Styling capability [issue](https://github.com/IgniteUI/igniteui-angular/issues/1079)
+5. **[Done]** igxTypography for theming
+6. **[Done]** Tooltip [issue](https://github.com/IgniteUI/igniteui-angular/issues/1710)
+7. **[Removed]** Vertical Tabs - material doesn't define vertical tabs 
+8. **[Done]** Row Editing with transactions (Batch editing) [issue](https://github.com/IgniteUI/igniteui-angular/issues/566)
+9. **[Done]** Adding Disabled Dates and Special Dates options in igxCalander [issue](https://github.com/IgniteUI/igniteui-angular/issues/1980)
+10. **[Done]** Drag and Drop Directive
+
+## Milestone 3 (by July 6th, 2018)
+
+1. **[DONE]** Grouping
+2. **[DONE]** Grid Multi-column Headers [issue](https://github.com/IgniteUI/igniteui-angular/issues/488)
+3. **[DONE]** Combo
+4. **[DONE]** Column Hiding UI
+5. **[DONE]** Operations UI - column chooser
+6. **[DONE]** Advanced Filtering
+7. **[DONE]** Column Moving
+8. **[DONE]** Update to Angular 6
+9. **[DONE]** Design: Release Updated Design System (Sketch UI kits, UI patterns, screens, documentation)
+10. **[DONE]** Design: Data dense theme for data grid 
 
-1. **[DONE]** Row objects - 1st sprint (by November 20th, 2017) [issue](https://github.com/IgniteUI/igniteui-angular/issues/479)  
-	In order to implement virtualization in the Grid, we would need a row object to be abstracted. 
-2. **[DONE]** Cell objects - 2nd sprint (by December 11th, 2017) [issue](https://github.com/IgniteUI/igniteui-angular/issues/480)  
-3. **[DONE]** Grid Row virtualization - after row objects and virtualization are implemented
-4. **[DONE]** Grid Column virtualization - after row objects and column component refactoring are done  
-	This feature enables Grid columns to be virtualized. The feature splits records into parts, and only a certain part of the record is rendered.
-5. **[DONE]** Alternating row style  [issue](https://github.com/IgniteUI/igniteui-angular/issues/489)
-6. **[DONE]** Ignite UI CLI integration [issue](https://github.com/IgniteUI/ignite-ui-cli/issues/53)  
-    Ignite UI CLI will also provide Ignite UI for Angular templates, views, and components integration. All features of the CLI will be accessible in the context of Ignite UI for Angular, as well as the full Ignite UI product suite.
-    
 ## Milestone 2 (due April 25th, 2018)
 
 1. **[DONE]** Expanding Ignite UI CLI views and templates with Ignite UI for Angular 
@@ -57,52 +98,14 @@
 13. **[DONE]** Charting: Category Chart types Line (Area, Column, Point, StepLine, StepArea, Spline, SplineArea, Waterfall
 14. **[DONE]** Charting: Financial Chart types
 
+## Milestone 1 (by January 15th, 2018)
 
-## Milestone 3 (by July 6th, 2018)
-
-1. **[DONE]** Grouping
-2. **[DONE]** Grid Multi-column Headers [issue](https://github.com/IgniteUI/igniteui-angular/issues/488)
-3. **[DONE]** Combo
-4. **[DONE]** Column Hiding UI
-5. **[DONE]** Operations UI - column chooser
-6. **[DONE]** Advanced Filtering
-7. **[DONE]** Column Moving
-8. **[DONE]** Update to Angular 6
-9. **[DONE]** Design: Release Updated Design System (Sketch UI kits, UI patterns, screens, documentation)
-10. **[DONE]** Design: Data dense theme for data grid 
-
-## Milestone 4 (November 30th, 2018)
-
-1. **[Done]** Tree Grid [issue](https://github.com/IgniteUI/igniteui-angular/issues/2530)
-2. **[Done]** Quick Per-column Search in the igxGrid [issue](https://github.com/IgniteUI/igniteui-angular/issues/542)
-3. **[Done]** Expandable Panel [issue](https://github.com/IgniteUI/igniteui-angular/issues/307)
-4. **[Done]** Conditional Cell Styling capability [issue](https://github.com/IgniteUI/igniteui-angular/issues/1079)
-5. **[Done]** igxTypography for theming
-6. **[Done]** Tooltip [issue](https://github.com/IgniteUI/igniteui-angular/issues/1710)
-7. **[Removed]** Vertical Tabs - material doesn't define vertical tabs 
-8. **[Done]** Row Editing with transactions (Batch editing) [issue](https://github.com/IgniteUI/igniteui-angular/issues/566)
-9. **[Done]** Adding Disabled Dates and Special Dates options in igxCalander [issue](https://github.com/IgniteUI/igniteui-angular/issues/1980)
-10. **[Done]** Drag and Drop Directive
-
-## Milestone 5 (14.12.2018)
-
-1. **[DONE]** TreeGrid summaries
-2. **[DONE]** Grid GroupBy summaries
-3. **[DONE]** Banner Component [issue](https://github.com/IgniteUI/igniteui-angular/issues/2672)
-4. **[DONE]** Toolbar Templatable and NavBar Templatable
-
-## Milestone 6 (Due March 8th, 2019)
-
-1. **[DONE]** Hierarchical Grid #827 
-2. **[DROPPED]** igxGrid rendering strategies (like record-based rendering) #2384
-3. **[DONE]** Auto-complete (inline editable) #3585
-4. **[DONE]** Excel Style Filtering #3592
-5. **[DONE]** Inline date and time pickers (with drop down/toggle) #3034 #2337
-6. **[DONE]** igxSelect Component #3148
-
-## Milestone 7 (13.05.2019) 
-
-1. **[DONE]** Multi-cell Selection #3915
-2. **[DONE]** Grid Multi-Row Layout #4384
-3. **[DONE]** Grid Row Dragging #3993
-3. **[DONE]** List, button, button group display density support #4393 #4502 #4532
+1. **[DONE]** Row objects - 1st sprint (by November 20th, 2017) [issue](https://github.com/IgniteUI/igniteui-angular/issues/479)  
+	In order to implement virtualization in the Grid, we would need a row object to be abstracted. 
+2. **[DONE]** Cell objects - 2nd sprint (by December 11th, 2017) [issue](https://github.com/IgniteUI/igniteui-angular/issues/480)  
+3. **[DONE]** Grid Row virtualization - after row objects and virtualization are implemented
+4. **[DONE]** Grid Column virtualization - after row objects and column component refactoring are done  
+	This feature enables Grid columns to be virtualized. The feature splits records into parts, and only a certain part of the record is rendered.
+5. **[DONE]** Alternating row style  [issue](https://github.com/IgniteUI/igniteui-angular/issues/489)
+6. **[DONE]** Ignite UI CLI integration [issue](https://github.com/IgniteUI/ignite-ui-cli/issues/53)  
+    Ignite UI CLI will also provide Ignite UI for Angular templates, views, and components integration. All features of the CLI will be accessible in the context of Ignite UI for Angular, as well as the full Ignite UI product suite.

projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts

@@ -679,7 +679,7 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
 
         const containerSize = parseInt(this.igxForContainerSize, 10);
         const maxRealScrollTop = event.target.children[0].scrollHeight - containerSize;
-        const realPercentScrolled = event.target.scrollTop / maxRealScrollTop;
+        const realPercentScrolled = maxRealScrollTop !== 0 ?  event.target.scrollTop / maxRealScrollTop : 0;
         if (!this._bScrollInternal) {
             const maxVirtScrollTop = this._virtHeight - containerSize;
             this._virtScrollTop = realPercentScrolled * maxVirtScrollTop;
@@ -1512,7 +1512,7 @@ export class IgxGridForOfDirective<T> extends IgxForOfDirective<T> implements On
 
         const containerSize = parseInt(this.igxForContainerSize, 10);
         const maxRealScrollTop = event.target.children[0].scrollHeight - containerSize;
-        const realPercentScrolled = event.target.scrollTop / maxRealScrollTop;
+        const realPercentScrolled = maxRealScrollTop !== 0 ?  event.target.scrollTop / maxRealScrollTop : 0;
         if (!this._bScrollInternal) {
             const maxVirtScrollTop = this._virtHeight - containerSize;
             this._virtScrollTop = realPercentScrolled * maxVirtScrollTop;

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

@@ -566,7 +566,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
 
     @Input()
     get rowDraggable(): boolean {
-        return this._rowDrag;
+        return this._rowDrag && this.hasVisibleColumns;
     }
 
     /**
@@ -2500,6 +2500,10 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
      * @hidden
      */
     protected _wheelListener = null;
+    /**
+     * @hidden
+     */
+    protected _hasVisibleColumns;
     protected _allowFiltering = false;
     protected _filterMode = FilterMode.quickFilter;
     private resizeHandler;
@@ -2777,6 +2781,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         this.resetColumnsCaches();
         this.resetColumnCollections();
         this.resetCachedWidths();
+        this.hasVisibleColumns = undefined;
         this._columnGroups = this.columnList.some(col => col.columnGroup);
     }
 
@@ -3313,7 +3318,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
     }
 
     get showRowCheckboxes(): boolean {
-        return this.rowSelectable && this.columns.length > this.hiddenColumnsCount;
+        return this.rowSelectable && this.hasVisibleColumns;
     }
 
     /**
@@ -3939,6 +3944,20 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
     get rootSummariesEnabled(): boolean {
         return this.summaryCalculationMode !== GridSummaryCalculationMode.childLevelsOnly;
     }
+
+    /**
+     * @hidden
+     */
+    get hasVisibleColumns(): boolean {
+        if (this._hasVisibleColumns === undefined) {
+            return this.columnList ? this.columnList.some(c => !c.hidden) : false;
+        }
+        return this._hasVisibleColumns;
+    }
+
+    set hasVisibleColumns(value) {
+        this._hasVisibleColumns = value;
+    }
     /**
      * Returns if the `IgxGridComponent` has moveable columns.
      * ```typescript
@@ -4630,7 +4649,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
      * @hidden
      */
     public updateHeaderCheckboxStatusOnFilter(data) {
-        if (!data) {
+        if (!data || !this.hasVisibleColumns || !this.headerCheckbox) {
             this.checkHeaderCheckboxStatus();
             return;
         }

projects/igniteui-angular/src/lib/grids/grid-common.pipes.ts

@@ -98,3 +98,17 @@ export class IgxGridPaginatorOptionsPipe implements PipeTransform {
         return Array.from(new Set([...values])).sort((a, b) => a - b);
     }
 }
+
+@Pipe({
+    name: 'visibleColumns',
+    pure: true
+})
+export class IgxHasVisibleColumnsPipe implements PipeTransform {
+    transform(values: any[], hasVisibleColumns) {
+        if (!(values && values.length)) {
+            return values;
+        }
+        return hasVisibleColumns ? values : [];
+    }
+
+}

projects/igniteui-angular/src/lib/grids/grid-pipes.module.ts

@@ -7,7 +7,8 @@ import {
     IgxGridNotGroupedPipe,
     IgxGridTopLevelColumns,
     IgxGridCellStylesPipe,
-    IgxGridPaginatorOptionsPipe
+    IgxGridPaginatorOptionsPipe,
+    IgxHasVisibleColumnsPipe
 } from './grid-common.pipes';
 
 @NgModule({
@@ -19,7 +20,8 @@ import {
         IgxGridNotGroupedPipe,
         IgxGridTopLevelColumns,
         IgxGridCellStylesPipe,
-        IgxGridPaginatorOptionsPipe
+        IgxGridPaginatorOptionsPipe,
+        IgxHasVisibleColumnsPipe
     ],
     exports: [
         IgxDatePipeComponent,
@@ -29,7 +31,8 @@ import {
         IgxGridNotGroupedPipe,
         IgxGridTopLevelColumns,
         IgxGridCellStylesPipe,
-        IgxGridPaginatorOptionsPipe
+        IgxGridPaginatorOptionsPipe,
+        IgxHasVisibleColumnsPipe
     ],
     imports: [
         CommonModule

projects/igniteui-angular/src/lib/grids/grid/column-hiding.spec.ts

@@ -13,7 +13,7 @@ import { ColumnHidingTestComponent, ColumnGroupsHidingTestComponent } from '../.
 import { UIInteractions, wait } from '../../test-utils/ui-interactions.spec';
 import { GridFunctions } from '../../test-utils/grid-functions.spec';
 import { HelperUtils } from '../../test-utils/helper-utils.spec';
-
+import { SortingDirection } from '../../data-operations/sorting-expression.interface';
 import { configureTestSuite } from '../../test-utils/configure-suite';
 import { take } from 'rxjs/internal/operators/take';
 
@@ -588,6 +588,53 @@ describe('Column Hiding UI', () => {
             expect(getButtonDisabledState('Hide All')).toBe(false, 'Hide All is not enabled!');
         }));
 
+        it('- When Hide All columns no rows should be rendered', fakeAsync(() => {
+            grid.rowSelectable = true;
+            grid.paging = true;
+            grid.rowDraggable = true;
+            tick(30);
+            fix.detectChanges();
+
+            grid.groupBy({
+                fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false
+            });
+            fix.detectChanges();
+
+            let fixEl = fix.nativeElement, gridEl = grid.nativeElement;
+            let tHeadItems = fixEl.querySelector('igx-grid-header-group');
+            let gridRows = fixEl.querySelector('igx-grid-row');
+            let paging = fixEl.querySelector('.igx-grid-paginator');
+            let rowSelectors = gridEl.querySelector('.igx-checkbox');
+            let dragIndicators = gridEl.querySelector('.igx-grid__drag-indicator');
+            let verticalScrollBar = gridEl.querySelector('.igx-grid__tbody-scrollbar[hidden]');
+
+            expect(tHeadItems).not.toBeNull();
+            expect(gridRows).not.toBeNull();
+            expect(paging).not.toBeNull();
+            expect(rowSelectors).not.toBeNull();
+            expect(dragIndicators).not.toBeNull();
+            expect(verticalScrollBar).toBeNull();
+
+            grid.columnList.forEach((col) => col.hidden = true);
+            tick(30);
+            fix.detectChanges();
+            fixEl = fix.nativeElement, gridEl = grid.nativeElement;
+
+            tHeadItems = fixEl.querySelector('igx-grid-header-group');
+            gridRows = fixEl.querySelector('igx-grid-row');
+            paging = fixEl.querySelector('.igx-grid-paginator');
+            rowSelectors = gridEl.querySelector('.igx-checkbox');
+            dragIndicators = gridEl.querySelector('.igx-grid__drag-indicator');
+            verticalScrollBar = gridEl.querySelector('.igx-grid__tbody-scrollbar[hidden]');
+
+            expect(tHeadItems).toBeNull();
+            expect(gridRows).toBeNull();
+            expect(paging).toBeNull();
+            expect(rowSelectors).toBeNull();
+            expect(dragIndicators).toBeNull();
+            expect(verticalScrollBar).not.toBeNull();
+        }));
+
         it('- Show All button operates over the filtered in columns only', (async () => {
             grid.columns[1].disableHiding = false;
             columnChooser.hideAllColumns();

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

@@ -953,10 +953,8 @@ describe('IgxGrid - Row Selection', () => {
 
         grid.columns.forEach(c => c.hidden = true);
         fix.detectChanges();
-        headerCheck = fix.nativeElement.querySelector('.igx-grid__thead').querySelector('.igx-checkbox__input');
-        rowCheck = grid.getRowByIndex(0).nativeElement.querySelector('.igx-checkbox__input');
+        headerCheck = fix.nativeElement.querySelector('.igx-checkbox__input');
         expect(headerCheck).toBeNull();
-        expect(rowCheck).toBeNull();
 
         grid.columns.forEach(c => c.hidden = false);
         fix.detectChanges();