Skip to content

Commit 04cbe4c

Browse files
authored
Merge pull request #5031 from IgniteUI/SKrastev/fix-4896-master
Update summaries to be indented based on the featureColumnsWidth in all cases and update Hierarchical Grid.
2 parents fbddf69 + a1cbf8b commit 04cbe4c

File tree

8 files changed

+53
-20
lines changed

8 files changed

+53
-20
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3037,7 +3037,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
30373037
* @hidden
30383038
*/
30393039
get summariesMargin() {
3040-
return this.rowSelectable || this.rowDraggable ? this.featureColumnsWidth : 0;
3040+
return this.featureColumnsWidth;
30413041
}
30423042

30433043
/**

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1691,6 +1691,8 @@ describe('IgxGrid - Summaries', () => {
16911691
fix.detectChanges();
16921692
verifyBaseSummaries(fix);
16931693
verifySummariesForParentID19(fix, 3);
1694+
verifySummaryRowIndentationByDataRowIndex(fix, 0);
1695+
verifySummaryRowIndentationByDataRowIndex(fix, 3);
16941696
});
16951697

16961698
it('should render correct summaries when change grouping', () => {
@@ -1703,6 +1705,9 @@ describe('IgxGrid - Summaries', () => {
17031705
verifyBaseSummaries(fix);
17041706
verifySummariesForParentID17(fix, 4);
17051707
verifySummariesForParentID17(fix, 5);
1708+
verifySummaryRowIndentationByDataRowIndex(fix, 0);
1709+
verifySummaryRowIndentationByDataRowIndex(fix, 4);
1710+
verifySummaryRowIndentationByDataRowIndex(fix, 5);
17061711

17071712
// change order
17081713
grid.groupingExpressions = [
@@ -1713,6 +1718,9 @@ describe('IgxGrid - Summaries', () => {
17131718

17141719
verifyBaseSummaries(fix);
17151720
verifySummariesForParentID17(fix, 4);
1721+
verifySummaryRowIndentationByDataRowIndex(fix, 0);
1722+
verifySummaryRowIndentationByDataRowIndex(fix, 4);
1723+
17161724
const summaryRow = HelperUtils.getSummaryRowByDataRowIndex(fix, 8);
17171725
HelperUtils.verifyColumnSummaries(summaryRow, 2, ['Count'], ['2']);
17181726
HelperUtils.verifyColumnSummaries(summaryRow, 3, ['Count', 'Earliest', 'Latest'], ['2', 'Jul 3, 2011', 'Sep 18, 2014']);
@@ -1722,6 +1730,9 @@ describe('IgxGrid - Summaries', () => {
17221730
verifyBaseSummaries(fix);
17231731
verifySummariesForParentID17(fix, 3);
17241732
verifySummariesForParentID19(fix, 6);
1733+
verifySummaryRowIndentationByDataRowIndex(fix, 0);
1734+
verifySummaryRowIndentationByDataRowIndex(fix, 3);
1735+
verifySummaryRowIndentationByDataRowIndex(fix, 6);
17251736
});
17261737

17271738
it('should be able to enable/disable summaries at runtime', () => {
@@ -2166,6 +2177,13 @@ describe('IgxGrid - Summaries', () => {
21662177
});
21672178
});
21682179

2180+
function verifySummaryRowIndentationByDataRowIndex(fixture, visibleIndex) {
2181+
const summaryRow = HelperUtils.getSummaryRowByDataRowIndex(fixture, visibleIndex);
2182+
const summaryRowIndentation = summaryRow.query(By.css('.igx-grid__summaries-patch'));
2183+
const expander = fixture.componentInstance.grid.headerGroupContainer;
2184+
expect(summaryRowIndentation.nativeElement.offsetWidth).toEqual(expander.nativeElement.offsetWidth);
2185+
}
2186+
21692187
function verifyBaseSummaries(fixture) {
21702188
const summaryRow = HelperUtils.getSummaryRowByDataRowIndex(fixture, 0);
21712189
HelperUtils.verifyColumnSummaries(summaryRow, 0, [], []);

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@
110110
</igx-grid-groupby-row>
111111
</ng-template>
112112
<ng-template #summary_template>
113-
<igx-grid-summary-row [gridID]="id" [summaries]="rowData.summaries" [indentation]="groupingExpressions.length" [index]="rowIndex" class="igx-grid__summaries--body" #summaryRow>
113+
<igx-grid-summary-row [gridID]="id" [summaries]="rowData.summaries" [index]="rowIndex" class="igx-grid__summaries--body" #summaryRow>
114114
</igx-grid-summary-row>
115115
</ng-template>
116116
<ng-template [igxTemplateOutlet]='isGroupByRecord(rowData) ? group_template : isSummaryRow(rowData) ? summary_template : record_template'
@@ -129,7 +129,7 @@
129129

130130

131131
<div class="igx-grid__tfoot" role="rowgroup" [style.height.px]='summariesHeight' #tfoot>
132-
<igx-grid-summary-row [style.width.px]='calcWidth' [style.height.px]='summariesHeight' *ngIf="hasSummarizedColumns && rootSummariesEnabled" [gridID]="id" [summaries]="id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe" [indentation]="groupingExpressions.length" [index]="0" class="igx-grid__summaries" #summaryRow>
132+
<igx-grid-summary-row [style.width.px]='calcWidth' [style.height.px]='summariesHeight' *ngIf="hasSummarizedColumns && rootSummariesEnabled" [gridID]="id" [summaries]="id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe" [index]="0" class="igx-grid__summaries" #summaryRow>
133133
</igx-grid-summary-row>
134134
<div class="igx-grid__tfoot-thumb" [hidden]='!hasVerticalSroll()' [style.height.px]='summariesHeight' [style.width.px]="scrollWidth"></div>
135135
</div>

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,6 @@
117117
*ngIf="hasSummarizedColumns && rootSummariesEnabled"
118118
[gridID]="id"
119119
[summaries]="id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe"
120-
[indentation]="hasExpandableChildren ? 1 : 0"
121120
[index]="0"
122121
class="igx-grid__summaries"
123122
#summaryRow>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -468,7 +468,7 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseCompone
468468
let width = super.getFeatureColumnsWidth();
469469

470470
if (this.hasExpandableChildren) {
471-
width += this.headerHierarchyExpander.nativeElement.clientWidth || this.getDefaultExpanderWidth();
471+
width += this.headerHierarchyExpander.nativeElement.offsetWidth || this.getDefaultExpanderWidth();
472472
}
473473

474474
return width;

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

Lines changed: 31 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -410,7 +410,7 @@ describe('IgxHierarchicalGrid Integration', () => {
410410
});
411411

412412
describe('Summaries', () => {
413-
const INDENT_LEVEL_CLASS = 'igx-grid__row-indentation--level-1';
413+
const SUMMARIES_MARGIN_CLASS = '.igx-grid__summaries-patch';
414414
it('should allow defining summaries for child grid and child should be sized correctly.', fakeAsync(/** row toggle rAF */() => {
415415
hierarchicalGrid.dataRowList.toArray()[0].nativeElement.children[0].click();
416416
fixture.detectChanges();
@@ -421,13 +421,9 @@ describe('IgxHierarchicalGrid Integration', () => {
421421

422422
// Expect expansion cell to be rendered and sized the same as the expansion cell inside the grid
423423
const summaryRow = childGrid.summariesRowList.first.nativeElement;
424+
const summaryRowIndentation = summaryRow.querySelector(SUMMARIES_MARGIN_CLASS);
424425
expect(summaryRow.children.length).toEqual(2);
425-
expect(summaryRow.children[0].tagName.toLowerCase()).toEqual('div');
426-
expect(summaryRow.children[0].offsetWidth).toEqual(expander.nativeElement.offsetWidth);
427-
expect(summaryRow.children[1].tagName.toLowerCase()).toEqual('igx-display-container');
428-
429-
// there should be indentation of the summaries
430-
expect(summaryRow.children[0].className.indexOf(INDENT_LEVEL_CLASS) !== -1).toBe(true);
426+
expect(summaryRowIndentation.offsetWidth).toEqual(expander.nativeElement.offsetWidth);
431427

432428
const gridHeight = childGrid.nativeElement.offsetHeight;
433429
const childElems: HTMLElement[] = Array.from(childGrid.nativeElement.children);
@@ -444,10 +440,36 @@ describe('IgxHierarchicalGrid Integration', () => {
444440
const childGridDebugElement = childGrids[0].query(By.css('igx-hierarchical-grid'));
445441
const grandChild = childGridDebugElement.query(By.css('igx-hierarchical-grid')).componentInstance;
446442
const grandChildSummaryRow = grandChild.summariesRowList.first.nativeElement;
443+
const childSummaryRowIndentation = grandChildSummaryRow.querySelector(SUMMARIES_MARGIN_CLASS);
447444

448445
expect(grandChildSummaryRow.children.length).toEqual(1);
449-
// there should be no indentation of the summaries of the leaf grid
450-
expect(grandChildSummaryRow.children[0].className.indexOf(INDENT_LEVEL_CLASS) === -1).toBe(true);
446+
expect(childSummaryRowIndentation).toBeNull();
447+
}));
448+
449+
it('should size summaries with row selectors for parent and children grids correctly.', fakeAsync(/** row toggle rAF */() => {
450+
hierarchicalGrid.rowSelectable = true;
451+
hierarchicalGrid.dataRowList.toArray()[0].nativeElement.children[0].click();
452+
fixture.detectChanges();
453+
454+
const rootExpander = hierarchicalGrid.dataRowList.toArray()[0].expander;
455+
const rootCheckbox = hierarchicalGrid.headerCheckboxContainer;
456+
const rootSummaryRow = hierarchicalGrid.summariesRowList.first.nativeElement;
457+
const rootSummaryIndentation = rootSummaryRow.querySelector(SUMMARIES_MARGIN_CLASS);
458+
459+
expect(rootSummaryRow.children.length).toEqual(2);
460+
expect(rootSummaryIndentation.offsetWidth)
461+
.toEqual(rootExpander.nativeElement.offsetWidth + rootCheckbox.nativeElement.offsetWidth);
462+
463+
const childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row'));
464+
const childGrid = childGrids[0].query(By.css('igx-hierarchical-grid')).componentInstance;
465+
const expander = childGrid.dataRowList.toArray()[0].expander;
466+
467+
// Expect expansion cell to be rendered and sized the same as the expansion cell inside the grid
468+
const summaryRow = childGrid.summariesRowList.first.nativeElement;
469+
const childSummaryIndentation = summaryRow.querySelector(SUMMARIES_MARGIN_CLASS);
470+
471+
expect(summaryRow.children.length).toEqual(2);
472+
expect(childSummaryIndentation.offsetWidth).toEqual(expander.nativeElement.offsetWidth);
451473
}));
452474

453475
it('should render summaries for column inside a column group.', fakeAsync(/** row toggle rAF */() => {

projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.html

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
11
<ng-container *ngIf="summaries.size">
2-
<ng-container *ngIf="indentation">
3-
<div class="igx-grid__row-indentation igx-grid__row-indentation--level-{{indentation}}"></div>
4-
</ng-container>
52
<ng-container *ngIf="grid.summariesMargin">
63
<div
74
class="igx-grid__summaries-patch"

projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.ts

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,6 @@ export class IgxSummaryRowComponent implements DoCheck {
3737
@Input()
3838
public index: number;
3939

40-
@Input()
41-
public indentation = 0;
42-
4340
@Input()
4441
public firstCellIndentation = -1;
4542

0 commit comments

Comments
 (0)