Skip to content

Commit 0b3ae2c

Browse files
kdinevkdinev
authored
Merge pull request #5480 from IgniteUI/ddincheva/fix-edgeBlur
Hide all elements in grid's body when all columns are hidden
2 parents d8bc0e2 + 1b6e364 commit 0b3ae2c

File tree

11 files changed

+198
-16
lines changed

11 files changed

+198
-16
lines changed

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

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -566,7 +566,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
566566

567567
@Input()
568568
get rowDraggable(): boolean {
569-
return this._rowDrag;
569+
return this._rowDrag && this.hasVisibleColumns;
570570
}
571571

572572
/**
@@ -2500,6 +2500,10 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
25002500
* @hidden
25012501
*/
25022502
protected _wheelListener = null;
2503+
/**
2504+
* @hidden
2505+
*/
2506+
protected _hasVisibleColumns;
25032507
protected _allowFiltering = false;
25042508
protected _filterMode = FilterMode.quickFilter;
25052509
private resizeHandler;
@@ -2777,6 +2781,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
27772781
this.resetColumnsCaches();
27782782
this.resetColumnCollections();
27792783
this.resetCachedWidths();
2784+
this.hasVisibleColumns = undefined;
27802785
this._columnGroups = this.columnList.some(col => col.columnGroup);
27812786
}
27822787

@@ -3313,7 +3318,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
33133318
}
33143319

33153320
get showRowCheckboxes(): boolean {
3316-
return this.rowSelectable && this.columns.length > this.hiddenColumnsCount;
3321+
return this.rowSelectable && this.hasVisibleColumns;
33173322
}
33183323

33193324
/**
@@ -3939,6 +3944,20 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
39393944
get rootSummariesEnabled(): boolean {
39403945
return this.summaryCalculationMode !== GridSummaryCalculationMode.childLevelsOnly;
39413946
}
3947+
3948+
/**
3949+
* @hidden
3950+
*/
3951+
get hasVisibleColumns(): boolean {
3952+
if (this._hasVisibleColumns === undefined) {
3953+
return this.columnList ? this.columnList.some(c => !c.hidden) : false;
3954+
}
3955+
return this._hasVisibleColumns;
3956+
}
3957+
3958+
set hasVisibleColumns(value) {
3959+
this._hasVisibleColumns = value;
3960+
}
39423961
/**
39433962
* Returns if the `IgxGridComponent` has moveable columns.
39443963
* ```typescript
@@ -4630,7 +4649,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
46304649
* @hidden
46314650
*/
46324651
public updateHeaderCheckboxStatusOnFilter(data) {
4633-
if (!data) {
4652+
if (!data || !this.hasVisibleColumns || !this.headerCheckbox) {
46344653
this.checkHeaderCheckboxStatus();
46354654
return;
46364655
}

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,3 +98,17 @@ export class IgxGridPaginatorOptionsPipe implements PipeTransform {
9898
return Array.from(new Set([...values])).sort((a, b) => a - b);
9999
}
100100
}
101+
102+
@Pipe({
103+
name: 'visibleColumns',
104+
pure: true
105+
})
106+
export class IgxHasVisibleColumnsPipe implements PipeTransform {
107+
transform(values: any[], hasVisibleColumns) {
108+
if (!(values && values.length)) {
109+
return values;
110+
}
111+
return hasVisibleColumns ? values : [];
112+
}
113+
114+
}

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

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ import {
77
IgxGridNotGroupedPipe,
88
IgxGridTopLevelColumns,
99
IgxGridCellStylesPipe,
10-
IgxGridPaginatorOptionsPipe
10+
IgxGridPaginatorOptionsPipe,
11+
IgxHasVisibleColumnsPipe
1112
} from './grid-common.pipes';
1213

1314
@NgModule({
@@ -19,7 +20,8 @@ import {
1920
IgxGridNotGroupedPipe,
2021
IgxGridTopLevelColumns,
2122
IgxGridCellStylesPipe,
22-
IgxGridPaginatorOptionsPipe
23+
IgxGridPaginatorOptionsPipe,
24+
IgxHasVisibleColumnsPipe
2325
],
2426
exports: [
2527
IgxDatePipeComponent,
@@ -29,7 +31,8 @@ import {
2931
IgxGridNotGroupedPipe,
3032
IgxGridTopLevelColumns,
3133
IgxGridCellStylesPipe,
32-
IgxGridPaginatorOptionsPipe
34+
IgxGridPaginatorOptionsPipe,
35+
IgxHasVisibleColumnsPipe
3336
],
3437
imports: [
3538
CommonModule

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

Lines changed: 48 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { ColumnHidingTestComponent, ColumnGroupsHidingTestComponent } from '../.
1313
import { UIInteractions, wait } from '../../test-utils/ui-interactions.spec';
1414
import { GridFunctions } from '../../test-utils/grid-functions.spec';
1515
import { HelperUtils } from '../../test-utils/helper-utils.spec';
16-
16+
import { SortingDirection } from '../../data-operations/sorting-expression.interface';
1717
import { configureTestSuite } from '../../test-utils/configure-suite';
1818
import { take } from 'rxjs/internal/operators/take';
1919

@@ -588,6 +588,53 @@ describe('Column Hiding UI', () => {
588588
expect(getButtonDisabledState('Hide All')).toBe(false, 'Hide All is not enabled!');
589589
}));
590590

591+
it('- When Hide All columns no rows should be rendered', fakeAsync(() => {
592+
grid.rowSelectable = true;
593+
grid.paging = true;
594+
grid.rowDraggable = true;
595+
tick(30);
596+
fix.detectChanges();
597+
598+
grid.groupBy({
599+
fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false
600+
});
601+
fix.detectChanges();
602+
603+
let fixEl = fix.nativeElement, gridEl = grid.nativeElement;
604+
let tHeadItems = fixEl.querySelector('igx-grid-header-group');
605+
let gridRows = fixEl.querySelector('igx-grid-row');
606+
let paging = fixEl.querySelector('.igx-grid-paginator');
607+
let rowSelectors = gridEl.querySelector('.igx-checkbox');
608+
let dragIndicators = gridEl.querySelector('.igx-grid__drag-indicator');
609+
let verticalScrollBar = gridEl.querySelector('.igx-grid__tbody-scrollbar[hidden]');
610+
611+
expect(tHeadItems).not.toBeNull();
612+
expect(gridRows).not.toBeNull();
613+
expect(paging).not.toBeNull();
614+
expect(rowSelectors).not.toBeNull();
615+
expect(dragIndicators).not.toBeNull();
616+
expect(verticalScrollBar).toBeNull();
617+
618+
grid.columnList.forEach((col) => col.hidden = true);
619+
tick(30);
620+
fix.detectChanges();
621+
fixEl = fix.nativeElement, gridEl = grid.nativeElement;
622+
623+
tHeadItems = fixEl.querySelector('igx-grid-header-group');
624+
gridRows = fixEl.querySelector('igx-grid-row');
625+
paging = fixEl.querySelector('.igx-grid-paginator');
626+
rowSelectors = gridEl.querySelector('.igx-checkbox');
627+
dragIndicators = gridEl.querySelector('.igx-grid__drag-indicator');
628+
verticalScrollBar = gridEl.querySelector('.igx-grid__tbody-scrollbar[hidden]');
629+
630+
expect(tHeadItems).toBeNull();
631+
expect(gridRows).toBeNull();
632+
expect(paging).toBeNull();
633+
expect(rowSelectors).toBeNull();
634+
expect(dragIndicators).toBeNull();
635+
expect(verticalScrollBar).not.toBeNull();
636+
}));
637+
591638
it('- Show All button operates over the filtered in columns only', (async () => {
592639
grid.columns[1].disableHiding = false;
593640
columnChooser.hideAllColumns();

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -953,10 +953,8 @@ describe('IgxGrid - Row Selection', () => {
953953

954954
grid.columns.forEach(c => c.hidden = true);
955955
fix.detectChanges();
956-
headerCheck = fix.nativeElement.querySelector('.igx-grid__thead').querySelector('.igx-checkbox__input');
957-
rowCheck = grid.getRowByIndex(0).nativeElement.querySelector('.igx-checkbox__input');
956+
headerCheck = fix.nativeElement.querySelector('.igx-checkbox__input');
958957
expect(headerCheck).toBeNull();
959-
expect(rowCheck).toBeNull();
960958

961959
grid.columns.forEach(c => c.hidden = false);
962960
fix.detectChanges();

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,7 @@
106106
class="igx-grid__scroll-on-drag-pinned" [style.left.px]="pinnedWidth"></span>
107107
<ng-template igxGridFor let-rowData [igxGridForOf]="data
108108
| gridTransaction:id:pipeTrigger
109+
| visibleColumns:hasVisibleColumns
109110
| gridFiltering:filteringExpressionsTree:id:pipeTrigger
110111
| gridSort:sortingExpressions:id:pipeTrigger
111112
| gridGroupBy:groupingExpressions:groupingExpansionState:groupsExpanded:id:groupsRecords:pipeTrigger
@@ -116,7 +117,7 @@
116117
[igxForItemSize]="hasColumnLayouts ? rowHeight * multiRowLayoutRowSize + 1 : renderedRowHeight"
117118
#verticalScrollContainer (onChunkPreload)="dataLoading($event)">
118119
<ng-template #record_template>
119-
<igx-grid-row [gridID]="id" [index]="rowIndex" [rowData]="rowData" #row>
120+
<igx-grid-row [gridID]="id" [index]="rowIndex" [rowData]="rowData" #row>
120121
</igx-grid-row>
121122
</ng-template>
122123
<ng-template #group_template>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5123,7 +5123,7 @@ export class IgxGridInsideIgxTabsComponent {
51235123
@Component({
51245124
template: `
51255125
<igx-grid #grid [data]="data"
5126-
[paging]="true" [paginationTemplate]="pager">
5126+
[paging]="true" [paginationTemplate]="pager" [autoGenerate]="true">
51275127
</igx-grid>
51285128
<ng-template #pager let-grid>
51295129
<h2>{{grid.totalRecords}}</h2>

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
[igxColumnMovingDrop]="parentVirtDir" [attr.droppable]="true" id="left"
1313
class="igx-grid__scroll-on-drag-pinned" [style.left.px]="pinnedWidth"></span>
1414
<div class="igx-grid__hierarchical-expander igx-grid__hierarchical-expander--header"
15-
#headerHierarchyExpander [hidden]='!hasExpandableChildren' [ngClass]="{
15+
#headerHierarchyExpander [hidden]='!hasExpandableChildren || !hasVisibleColumns' [ngClass]="{
1616
'igx-grid__hierarchical-expander--push': filteringService.isFilterRowVisible,
1717
'igx-grid__hierarchical-expander--no-border': rowSelectable || rowDraggable
1818
}">
@@ -72,6 +72,7 @@
7272
class="igx-grid__scroll-on-drag-pinned" [style.left.px]="pinnedWidth"></span>
7373
<ng-template igxGridFor let-rowData [igxGridForOf]="data
7474
| gridTransaction:id:pipeTrigger
75+
| visibleColumns:hasVisibleColumns
7576
| gridFiltering:filteringExpressionsTree:id:pipeTrigger
7677
| gridSort:sortingExpressions:id:pipeTrigger
7778
| gridHierarchicalPaging:page:perPage:id:pipeTrigger

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

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -762,6 +762,51 @@ describe('IgxHierarchicalGrid Integration', () => {
762762
expect(childHeaders.length).toEqual(2);
763763
}));
764764

765+
it('no rows, headers, paging or rowSelectors should be displayed when hideAll columns', fakeAsync(() => {
766+
hierarchicalGrid.rowSelectable = true;
767+
hierarchicalGrid.rowDraggable = true;
768+
hierarchicalGrid.paging = true;
769+
tick(30);
770+
fixture.detectChanges();
771+
772+
let fixEl = fixture.nativeElement;
773+
let tHeadItems = fixEl.querySelector('igx-grid-header-group');
774+
let gridRows = fixEl.querySelector('igx-hierarchical-grid-row');
775+
let paging = fixEl.querySelector('.igx-grid-paginator');
776+
let rowSelectors = fixEl.querySelector('.igx-checkbox');
777+
let dragIndicators = fixEl.querySelector('.igx-grid__drag-indicator');
778+
let verticalScrollBar = fixEl.querySelector('.igx-grid__tbody-scrollbar[hidden]');
779+
let expander = fixEl.querySelector('.igx-grid__hierarchical-expander[hidden]');
780+
781+
expect(tHeadItems).not.toBeNull();
782+
expect(gridRows).not.toBeNull();
783+
expect(paging).not.toBeNull();
784+
expect(rowSelectors).not.toBeNull();
785+
expect(dragIndicators).not.toBeNull();
786+
expect(expander).toBeNull();
787+
expect(verticalScrollBar).toBeNull();
788+
789+
hierarchicalGrid.columnList.forEach((col) => col.hidden = true);
790+
tick(30);
791+
fixture.detectChanges();
792+
fixEl = fixture.nativeElement;
793+
tHeadItems = fixEl.querySelector('igx-grid-header-group');
794+
gridRows = fixEl.querySelector('igx-hierarchical-grid-row');
795+
paging = fixEl.querySelector('.igx-grid-paginator');
796+
rowSelectors = fixEl.querySelector('.igx-checkbox');
797+
dragIndicators = fixEl.querySelector('.igx-grid__drag-indicator');
798+
expander = fixEl.querySelector('.igx-grid__hierarchical-expander[hidden]');
799+
verticalScrollBar = fixEl.querySelector('.igx-grid__tbody-scrollbar[hidden]');
800+
801+
expect(tHeadItems).toBeNull();
802+
expect(gridRows).toBeNull();
803+
expect(paging).toBeNull();
804+
expect(rowSelectors).toBeNull();
805+
expect(dragIndicators).toBeNull();
806+
expect(expander).not.toBeNull();
807+
expect(verticalScrollBar).not.toBeNull();
808+
}));
809+
765810
it('should be displayed correctly for child layout and pinning should apply to the correct child.',
766811
fakeAsync(/** row toggle rAF */() => {
767812
hierarchicalGrid.dataRowList.toArray()[0].nativeElement.children[0].click();

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
</div>
2121
</div>
2222
</ng-container>
23-
<ng-container *ngIf="rowSelectable">
23+
<ng-container *ngIf="showRowCheckboxes">
2424
<div class="igx-grid__cbx-selection" #headerCheckboxContainer [ngClass]="{
2525
'igx-grid__cbx-selection--push': filteringService.isFilterRowVisible
2626
}">
@@ -64,6 +64,7 @@
6464
<ng-template igxGridFor let-rowData
6565
[igxGridForOf]="data
6666
| treeGridTransaction:id:pipeTrigger
67+
| visibleColumns:hasVisibleColumns
6768
| treeGridHierarchizing:primaryKey:foreignKey:childDataKey:id:pipeTrigger
6869
| treeGridFiltering:filteringExpressionsTree:id:pipeTrigger
6970
| treeGridSorting:sortingExpressions:id:pipeTrigger

0 commit comments

Comments
 (0)