Grids - drop condition for hiding paginator (#12253)

* fix(tree-grid,h-grid): drop condition for hiding paginator

* refactor(grid): also remove condition for the grid paginator

* test(grids): update tests for paginator w/o data/hidden columns

* docs(grids): add a note about paginator behavior change

Co-authored-by: Konstantin Dinev <[email protected]>
Co-authored-by: Stamen Stoychev <[email protected]>

Author: 3 people

CHANGELOG.md

@@ -31,6 +31,7 @@ All notable changes for each version of this project will be documented in this
     - **Behavioral Change** - When adding new row in grid with enabled batch editing, `rowChangesCount` displays the number of the defined columns.
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - **Behavioral Change** - When editing a row, `rowChangesCount` and `hiddenColumnsCount`would be displayed.
+    - **Behavioral Change** - The Grid Paginator component is no longer hidden when there's no data and/or all columns are hidden.
 
 - `IgxExcelExporterService`
     - Added support for exporting grid summaries.

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

@@ -551,14 +551,12 @@ describe('Column Hiding UI #grid', () => {
 
             tHeadItems = fixEl.querySelector('igx-grid-header-group');
             gridRows = fixEl.querySelector('igx-grid-row');
-            paging = fixEl.querySelector('.igx-paginator');
             rowSelectors = gridEl.querySelector('.igx-grid__cbx-padding > 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();

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

@@ -181,9 +181,7 @@
 
 <div class="igx-grid__footer" #footer>
     <ng-content select="igx-grid-footer"></ng-content>
-    <ng-container *ngIf="totalRecords || pagingMode === 1">
-        <ng-content select="igx-paginator"></ng-content>
-    </ng-container>
+    <ng-content select="igx-paginator"></ng-content>
 </div>
 
 <ng-template #emptyFilteredGrid>

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

@@ -440,30 +440,6 @@ describe('IgxGrid - Grid Paging #grid', () => {
             fix.detectChanges();
             expect(grid.page).toBe(desiredPageIndex);
         });
-
-        it('should hide paginator when there is no data or all records are filtered out.', () => {
-            fix.detectChanges();
-
-            verifyGridPager(fix, 3, '1', '1\xA0of\xA04', [true, true, false, false]);
-
-            // Filter out all records
-            grid.filter('ID', 1000, IgxNumberFilteringOperand.instance().condition('greaterThan'));
-            fix.detectChanges();
-
-            expect(GridFunctions.getGridPaginator(grid)).toBeNull();
-
-            grid.filter('ID', 1, IgxNumberFilteringOperand.instance().condition('greaterThan'));
-            fix.detectChanges();
-            expect(GridFunctions.getGridPaginator(grid)).not.toBeNull();
-
-            grid.data = null;
-            fix.detectChanges();
-            expect(GridFunctions.getGridPaginator(grid)).toBeNull();
-
-            grid.data = fix.componentInstance.data;
-            fix.detectChanges();
-            expect(GridFunctions.getGridPaginator(grid)).not.toBeNull();
-        });
     });
 
     it('should not throw error when data is undefined', fakeAsync(() => {
@@ -476,14 +452,10 @@ describe('IgxGrid - Grid Paging #grid', () => {
         }
         expect(errorMessage).toBe('');
         grid = fix.componentInstance.grid;
-        let paginator = GridFunctions.getGridPaginator(grid);
-        expect(paginator).toBeNull();
         expect(grid.rowList.length).toBe(0);
         tick(305);
         fix.detectChanges();
 
-        paginator = GridFunctions.getGridPaginator(grid);
-        expect(paginator).toBeDefined();
         expect(grid.rowList.length).toBe(5);
     }));
 

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

@@ -142,7 +142,7 @@
 
 <div class="igx-grid__footer" #footer>
     <ng-content select="igx-grid-footer"></ng-content>
-    <ng-content *ngIf="totalRecords || pagingMode === 1"  select="igx-paginator"></ng-content>
+    <ng-content select="igx-paginator"></ng-content>
     <ng-container #paginatorOutlet></ng-container>
 </div>
 

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

@@ -674,14 +674,12 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
 
             headers = GridFunctions.getColumnHeaders(fixture);
             gridRows = HierarchicalGridFunctions.getHierarchicalRows(fixture);
-            paging = GridFunctions.getGridPaginator(fixture);
             rowSelectors = GridSelectionFunctions.getCheckboxes(fixture);
             dragIndicators = GridFunctions.getDragIndicators(fixture);
             expander = HierarchicalGridFunctions.getExpander(fixture, '[hidden]');
 
             expect(headers.length).toBe(0);
             expect(gridRows.length).toBe(0);
-            expect(paging).toBeNull();
             expect(rowSelectors.length).toBe(0);
             expect(dragIndicators.length).toBe(0);
             // this check executes correctly on Ivy only

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

@@ -136,9 +136,7 @@
 
 <div class="igx-grid__footer" #footer>
     <ng-content select="igx-grid-footer"></ng-content>
-    <ng-container *ngIf="totalRecords || pagingMode === 1">
-        <ng-content select="igx-paginator"></ng-content>
-    </ng-container>
+    <ng-content select="igx-paginator"></ng-content>
 </div>
 
 <ng-template #emptyFilteredGrid>

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

@@ -220,7 +220,7 @@ describe('IgxTreeGrid Component Tests #tGrid', () => {
             fix.detectChanges();
         }));
 
-        it('should not render rows, paging and headers group when all cols are hidden', fakeAsync(() => {
+        it('should not render rows and headers group when all cols are hidden', fakeAsync(() => {
             grid.rowSelection = GridSelectionMode.multiple;
             grid.rowDraggable = true;
             tick();
@@ -256,7 +256,7 @@ describe('IgxTreeGrid Component Tests #tGrid', () => {
 
             expect(tHeadItems).toBeNull();
             expect(gridRows).toBeNull();
-            expect(paging).toBeNull();
+            expect(paging).not.toBeNull();
             expect(rowSelectors).toBeNull();
             expect(dragIndicators).toBeNull();
             expect(verticalScrollBar).not.toBeNull();