From 2c5aa928c58bbfe1cd922fc028d19b67a39bbb35 Mon Sep 17 00:00:00 2001 From: MKirova Date: Tue, 20 Aug 2019 18:49:18 +0300 Subject: [PATCH 01/17] feat(igxGroupBy): Exposing expand/collapse indicator template for rows and implementing for GroupBy. --- .../src/lib/grids/grid-base.component.ts | 16 ++++++++++++++ .../src/lib/grids/grid/grid.directives.ts | 18 ++++++++++++++++ .../src/lib/grids/grid/grid.groupby.spec.ts | 17 +++++++++++++-- .../src/lib/grids/grid/grid.module.ts | 8 ++++++- .../lib/grids/grid/groupby-row.component.html | 13 ++++++++++-- .../lib/grids/grid/groupby-row.component.ts | 21 +++++++++++++++++++ 6 files changed, 88 insertions(+), 5 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts index 84418fbce3d..ac6f920fa76 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -93,6 +93,7 @@ import { IgxDragIndicatorIconDirective } from './row-drag.directive'; import { IgxDragDirective } from '../directives/drag-drop/drag-drop.directive'; import { DeprecateProperty } from '../core/deprecateDecorators'; import { CharSeparatedValueData } from '../services/csv/char-separated-value-data'; +import { IgxRowExpandIndicatorDirective, IgxRowCollapseIndicatorDirective } from './grid/grid.directives'; const MINIMUM_COLUMN_WIDTH = 136; const FILTER_ROW_HEIGHT = 50; @@ -260,6 +261,21 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements protected _destroyed = false; private overlayIDs = []; private _hostWidth; + + + /** + * The custom template, if any, that should be used when rendering a row expand indicator. + */ + @ContentChild(IgxRowExpandIndicatorDirective, { read: TemplateRef, static: false }) + public rowExpandIndicatorTemplate: TemplateRef = null; + + /** + * The custom template, if any, that should be used when rendering a row collapse indicator. + */ + @ContentChild(IgxRowCollapseIndicatorDirective, { read: TemplateRef, static: false }) + public rowCollapseIndicatorTemplate: TemplateRef = null; + + /** * An accessor that sets the resource strings. * By default it uses EN resources. diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.directives.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.directives.ts index b837d80e943..f61bd59327b 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.directives.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.directives.ts @@ -17,6 +17,24 @@ export class IgxGroupByRowTemplateDirective { } +/** + * @hidden + */ +@Directive({ + selector: '[igxRowExpandIndicator]' +}) +export class IgxRowExpandIndicatorDirective { +} + +/** + * @hidden + */ +@Directive({ + selector: '[igxRowCollapseIndicator]' +}) +export class IgxRowCollapseIndicatorDirective { +} + /** * @hidden */ diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts index f14cbc775c9..12fa3c5b2b9 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts @@ -19,7 +19,7 @@ import { configureTestSuite } from '../../test-utils/configure-suite'; import { DataParent } from '../../test-utils/sample-test-data.spec'; import { MultiColumnHeadersWithGroupingComponent } from '../../test-utils/grid-samples.spec'; -describe('IgxGrid - GroupBy', () => { +fdescribe('IgxGrid - GroupBy', () => { configureTestSuite(); const COLUMN_HEADER_CLASS = '.igx-grid__th'; const COLUMN_HEADER_GROUP_CLASS = '.igx-grid__thead-item'; @@ -515,7 +515,7 @@ describe('IgxGrid - GroupBy', () => { expect(currExpr.groupedColumns[0].field).toEqual('Downloads'); })); - it('should allow setting custom template for group row content.', fakeAsync(() => { + it('should allow setting custom template for group row content and expand/collapse icons.', fakeAsync(() => { const fix = TestBed.createComponent(CustomTemplateGridComponent); const grid = fix.componentInstance.instance; fix.detectChanges(); @@ -531,7 +531,14 @@ describe('IgxGrid - GroupBy', () => { const expectedText = 'Total items with value:' + grVal + ' are ' + grRow.groupRow.records.length; expect(elem.innerText.trim(['\n', '\r', ' '])).toEqual(expectedText); + const expander = grRow.nativeElement.querySelector('.igx-grid__grouping-indicator'); + expect(expander.innerText).toBe('EXPANDED'); } + + groupRows[0].toggle(); + const expndr = groupRows[0].nativeElement.querySelector('.igx-grid__grouping-indicator'); + expect(expndr.innerText).toBe('COLLAPSED'); + })); it('should have the correct ARIA attributes on the group rows.', fakeAsync(() => { @@ -2667,6 +2674,12 @@ export class GroupableGridComponent extends DataParent { Total items with value:{{ groupRow.value }} are {{ groupRow.records.length }} + + EXPANDED + + + COLLAPSED + ` }) diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.module.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.module.ts index da4ae31216c..3147d57afb0 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.module.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.module.ts @@ -3,7 +3,9 @@ import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { IgxGroupAreaDropDirective, - IgxGroupByRowTemplateDirective + IgxGroupByRowTemplateDirective, + IgxRowExpandIndicatorDirective, + IgxRowCollapseIndicatorDirective } from './grid.directives'; import { IgxGridComponent } from './grid.component'; import { @@ -29,6 +31,8 @@ import { IgxSelectModule } from '../../select/index'; IgxGridRowComponent, IgxGridGroupByRowComponent, IgxGroupByRowTemplateDirective, + IgxRowExpandIndicatorDirective, + IgxRowCollapseIndicatorDirective, IgxGroupAreaDropDirective, IgxGridGroupingPipe, IgxGridPagingPipe, @@ -41,6 +45,8 @@ import { IgxSelectModule } from '../../select/index'; IgxGridGroupByRowComponent, IgxGridRowComponent, IgxGroupByRowTemplateDirective, + IgxRowExpandIndicatorDirective, + IgxRowCollapseIndicatorDirective, IgxGroupAreaDropDirective, IgxGridCommonModule, IgxGridGroupingPipe, diff --git a/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.html b/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.html index a2d6d08b854..d73814763a0 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.html +++ b/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.html @@ -1,7 +1,7 @@
- expand_more - expand_less + +
@@ -9,6 +9,15 @@
+ + expand_more + + + + chevron_right + + +
group_work diff --git a/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts b/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts index 93cd73e9b51..473e5c4127b 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts @@ -7,6 +7,7 @@ import { HostListener, Input, ViewChild, + TemplateRef, } from '@angular/core'; import { IGroupByRecord } from '../../data-operations/groupby-record.interface'; import { DataType } from '../../data-operations/data-util'; @@ -38,6 +39,18 @@ export class IgxGridGroupByRowComponent { */ protected paddingIndentationCssClass = 'igx-grid__group-row--padding-level'; + /** + * @hidden + */ + @ViewChild('defaultGroupByExpandTemplate', { read: TemplateRef, static: true }) + protected defaultGroupByExpandTemplate: TemplateRef; + + /** + * @hidden + */ + @ViewChild('defaultGroupByCollapseTemplate', { read: TemplateRef, static: true }) + protected defaultGroupByCollapseTemplate: TemplateRef; + /** * @hidden */ @@ -177,6 +190,14 @@ export class IgxGridGroupByRowComponent { } } + public get iconTemplate() { + if (this.expanded) { + return this.grid.rowExpandIndicatorTemplate || this.defaultGroupByExpandTemplate; + } else { + return this.grid.rowCollapseIndicatorTemplate || this.defaultGroupByCollapseTemplate; + } + } + protected get selectionNode(): ISelectionNode { return { row: this.index, From 3a8720e56319caa180cceb83f5b10da7de914209 Mon Sep 17 00:00:00 2001 From: MKirova Date: Tue, 20 Aug 2019 19:50:09 +0300 Subject: [PATCH 02/17] feat(igxHierarchicalGrid): Exposing expand/collapse indicator template for rows and implementing for HierarchicalGrid. --- .../src/lib/grids/grid/grid.groupby.spec.ts | 2 +- .../hierarchical-grid.component.ts | 2 + .../hierarchical-grid.spec.ts | 75 +++++++++++++++++-- .../hierarchical-row.component.html | 11 ++- .../hierarchical-row.component.ts | 23 +++++- 5 files changed, 104 insertions(+), 9 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts index 12fa3c5b2b9..dfe4e47229b 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts @@ -19,7 +19,7 @@ import { configureTestSuite } from '../../test-utils/configure-suite'; import { DataParent } from '../../test-utils/sample-test-data.spec'; import { MultiColumnHeadersWithGroupingComponent } from '../../test-utils/grid-samples.spec'; -fdescribe('IgxGrid - GroupBy', () => { +describe('IgxGrid - GroupBy', () => { configureTestSuite(); const COLUMN_HEADER_CLASS = '.igx-grid__th'; const COLUMN_HEADER_GROUP_CLASS = '.igx-grid__thead-item'; diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts index 4d5db8f8f00..527bb893f16 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts @@ -383,6 +383,8 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseCompone this.toolbarCustomContentTemplates = this.parentIsland ? this.parentIsland.toolbarCustomContentTemplates : this.toolbarCustomContentTemplates; + this.rowExpandIndicatorTemplate = this.rootGrid.rowExpandIndicatorTemplate; + this.rowCollapseIndicatorTemplate = this.rootGrid.rowCollapseIndicatorTemplate ; } private updateSizes() { diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts index 9f7d74346d1..c01ef4fb391 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts @@ -42,14 +42,14 @@ describe('Basic IgxHierarchicalGrid', () => { const row1 = hierarchicalGrid.getRowByIndex(0) as IgxHierarchicalRowComponent; expect(row1.hasChildren).toBe(true); const rowElems = fixture.debugElement.queryAll(By.directive(IgxHierarchicalRowComponent)); - expect(rowElems[0].query(By.css('igx-icon')).nativeElement.innerText).toEqual('expand_more'); + expect(rowElems[0].query(By.css('igx-icon')).nativeElement.innerText).toEqual('chevron_right'); const row2 = hierarchicalGrid.getRowByIndex(1) as IgxHierarchicalRowComponent; expect(row2.hasChildren).toBe(true); - expect(rowElems[1].query(By.css('igx-icon')).nativeElement.innerText).toEqual('expand_more'); + expect(rowElems[1].query(By.css('igx-icon')).nativeElement.innerText).toEqual('chevron_right'); const row3 = hierarchicalGrid.getRowByIndex(1) as IgxHierarchicalRowComponent; expect(row3.hasChildren).toBe(true); - expect(rowElems[2].query(By.css('igx-icon')).nativeElement.innerText).toEqual('expand_more'); + expect(rowElems[2].query(By.css('igx-icon')).nativeElement.innerText).toEqual('chevron_right'); }); it('should allow expand/collapse rows through the UI', fakeAsync(/** row toggle rAF */() => { @@ -69,11 +69,11 @@ describe('Basic IgxHierarchicalGrid', () => { it('should change expand/collapse indicators when state of the row changes', fakeAsync(/** row toggle rAF */() => { const row = hierarchicalGrid.getRowByIndex(0) as IgxHierarchicalRowComponent; const rowElem = fixture.debugElement.queryAll(By.directive(IgxHierarchicalRowComponent))[0]; - expect(rowElem.query(By.css('igx-icon')).nativeElement.innerText).toEqual('expand_more'); + expect(rowElem.query(By.css('igx-icon')).nativeElement.innerText).toEqual('chevron_right'); UIInteractions.clickElement(row.expander); fixture.detectChanges(); - expect(rowElem.query(By.css('igx-icon')).nativeElement.innerText).toEqual('expand_less'); + expect(rowElem.query(By.css('igx-icon')).nativeElement.innerText).toEqual('expand_more'); })); it('should collapse all rows that belongs to a grid via header collapse icon', fakeAsync(/** row toggle rAF */() => { @@ -1099,6 +1099,49 @@ describe('IgxHierarchicalGrid Runtime Row Island change Scenarios', () => { }); +describe('IgxHierarchicalGrid custom template', () => { + configureTestSuite(); + let fixture: ComponentFixture; + let hierarchicalGrid: IgxHierarchicalGridComponent; + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ + IgxHierarchicalGridCustomTemplateComponent + ], + imports: [ + NoopAnimationsModule, IgxHierarchicalGridModule] + }).compileComponents(); + })); + + beforeEach(async(() => { + fixture = TestBed.createComponent(IgxHierarchicalGridCustomTemplateComponent); + fixture.detectChanges(); + hierarchicalGrid = fixture.componentInstance.hgrid; + })); + + it(' should allow setting custom template for expand/collapse icons', () => { + let rows = hierarchicalGrid.dataRowList.toArray(); + for (const row of rows) { + const expander = row.nativeElement.querySelector('.igx-grid__hierarchical-expander'); + expect(expander.innerText).toBe('COLLAPSED'); + } + hierarchicalGrid.expandChildren = true; + fixture.detectChanges(); + rows = hierarchicalGrid.dataRowList.toArray(); + for (const row of rows) { + const expander = row.nativeElement.querySelector('.igx-grid__hierarchical-expander'); + expect(expander.innerText).toBe('EXPANDED'); + } + + const childGrid = hierarchicalGrid.hgridAPI.getChildGrids(false)[0]; + const childRows = childGrid.dataRowList.toArray(); + for (const row of childRows) { + const expander = row.nativeElement.querySelector('.igx-grid__hierarchical-expander'); + expect(expander.innerText).toBe('COLLAPSED'); + } + }); +}); + @Component({ template: ` + + + + + + + + + + EXPANDED + + + COLLAPSED + + ` +}) +export class IgxHierarchicalGridCustomTemplateComponent extends IgxHierarchicalGridTestBaseComponent {} + diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html index 0b8de977d82..2594442fbf3 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html @@ -1,7 +1,14 @@
- expand_more - expand_less + +
+ + expand_more + + + + chevron_right +
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.ts index c4512aeaa6f..5871d15663f 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.ts @@ -7,7 +7,8 @@ import { ChangeDetectorRef, ViewChildren, QueryList, - ViewChild + ViewChild, + TemplateRef } from '@angular/core'; import { IgxHierarchicalGridComponent } from './hierarchical-grid.component'; import { IgxRowComponent } from '../row.component'; @@ -38,6 +39,18 @@ export class IgxHierarchicalRowComponent extends IgxRowComponent; + + /** + * @hidden + */ + @ViewChild('defaultCollapseTemplate', { read: TemplateRef, static: true }) + protected defaultCollapseTemplate: TemplateRef; + /** * @hidden */ @@ -94,6 +107,14 @@ export class IgxHierarchicalRowComponent extends IgxRowComponent Date: Wed, 21 Aug 2019 16:03:37 +0300 Subject: [PATCH 03/17] feat(igxTreeGrid): Exposing expand/collapse indicator template for rows and implementing for TreeGrid. --- .../lib/grids/grid/groupby-row.component.html | 2 +- .../hierarchical-row.component.html | 2 +- .../hierarchical-row.component.ts | 5 ++- .../grids/tree-grid/tree-cell.component.html | 10 ++++- .../grids/tree-grid/tree-cell.component.ts | 26 +++++++++++- .../tree-grid/tree-grid-expanding.spec.ts | 42 ++++++++++++++++++- .../test-utils/tree-grid-components.spec.ts | 21 ++++++++++ .../test-utils/tree-grid-functions.spec.ts | 4 +- 8 files changed, 103 insertions(+), 9 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.html b/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.html index d73814763a0..75262651873 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.html +++ b/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.html @@ -1,6 +1,6 @@
- +
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html index 2594442fbf3..728a0e25e1c 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html @@ -1,5 +1,5 @@
- +
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.ts index 5871d15663f..86b27f45c37 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.ts @@ -107,7 +107,10 @@ export class IgxHierarchicalRowComponent extends IgxRowComponent - expand_more - expand_less + +
+ + expand_more + + + chevron_right + diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.ts index 7cc36bb10d1..989c4ed4370 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.ts @@ -1,4 +1,5 @@ -import { Component, ChangeDetectorRef, ElementRef, ViewChild, Inject, ChangeDetectionStrategy, NgZone, OnInit, Input } from '@angular/core'; +import { Component, ChangeDetectorRef, ElementRef, ViewChild, Inject, + ChangeDetectionStrategy, NgZone, OnInit, Input, TemplateRef } from '@angular/core'; import { IgxGridCellComponent } from '../cell.component'; import { IgxTreeGridAPIService } from './tree-grid-api.service'; import { GridBaseAPIService } from '../api.service'; @@ -59,6 +60,18 @@ export class IgxTreeGridCellComponent extends IgxGridCellComponent implements On @ViewChild('defaultContentElement', { read: ElementRef, static: false }) public defaultContentElement: ElementRef; + /** + * @hidden + */ + @ViewChild('defaultExpandTemplate', { read: TemplateRef, static: true }) + protected defaultExpandTemplate: TemplateRef; + + /** + * @hidden + */ + @ViewChild('defaultCollapseTemplate', { read: TemplateRef, static: true }) + protected defaultCollapseTemplate: TemplateRef; + /** * @hidden */ @@ -111,4 +124,15 @@ export class IgxTreeGridCellComponent extends IgxGridCellComponent implements On .map((child) => getNodeSizeViaRange(range, child))); return largestWidth + indicatorWidth + indicatorMargin + leftPadding; } + + /** + * @hidden + */ + public get iconTemplate() { + if (this.expanded) { + return this.grid.rowExpandIndicatorTemplate || this.defaultExpandTemplate; + } else { + return this.grid.rowCollapseIndicatorTemplate || this.defaultCollapseTemplate; + } + } } diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-expanding.spec.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-expanding.spec.ts index 75ced80578f..3095d812987 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-expanding.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-expanding.spec.ts @@ -7,12 +7,14 @@ import { IgxTreeGridRowEditingComponent, IgxTreeGridLoadOnDemandComponent, IgxTreeGridLoadOnDemandHasChildrenComponent, - IgxTreeGridLoadOnDemandChildDataComponent + IgxTreeGridLoadOnDemandChildDataComponent, + IgxTreeGridCustomExpandersTemplateComponent } from '../../test-utils/tree-grid-components.spec'; import { TreeGridFunctions } from '../../test-utils/tree-grid-functions.spec'; import { configureTestSuite } from '../../test-utils/configure-suite'; import { first } from 'rxjs/operators'; import { wait } from '../../test-utils/ui-interactions.spec'; +import { IgxGridModule } from '../grid'; describe('IgxTreeGrid - Expanding / Collapsing ', () => { configureTestSuite(); @@ -1260,6 +1262,44 @@ describe('Row editing expanding/collapsing ', () => { }));*/ }); +describe('Custom expand/collapse template', () => { + configureTestSuite(); + let fix; + let treeGrid; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ + IgxTreeGridCustomExpandersTemplateComponent + ], + imports: [ + NoopAnimationsModule, + IgxGridModule, + IgxTreeGridModule] + }) + .compileComponents(); + })); + + beforeEach(fakeAsync(/** height/width setter rAF */() => { + fix = TestBed.createComponent(IgxTreeGridCustomExpandersTemplateComponent); + fix.detectChanges(); + tick(16); + treeGrid = fix.componentInstance.treeGrid; + })); + + it('should allow setting custom template for expand/collapse icons', async() => { + const row = treeGrid.dataRowList.toArray()[0]; + let expander = row.nativeElement.querySelector('.igx-grid__tree-grouping-indicator'); + expect(expander.innerText).toBe('EXPANDED'); + + row.expanded = false; + await wait(); + fix.detectChanges(); + expander = row.nativeElement.querySelector('.igx-grid__tree-grouping-indicator'); + expect(expander.innerText).toBe('COLLAPSED'); + }); +}); + function verifyGridPager(fix, rowsCount, firstCellValue, pagerText, buttonsVisibility) { const disabled = 'igx-button--disabled'; const grid = fix.componentInstance.treeGrid; diff --git a/projects/igniteui-angular/src/lib/test-utils/tree-grid-components.spec.ts b/projects/igniteui-angular/src/lib/test-utils/tree-grid-components.spec.ts index 5fb1ccb1d42..8a344ef1a76 100644 --- a/projects/igniteui-angular/src/lib/test-utils/tree-grid-components.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/tree-grid-components.spec.ts @@ -729,3 +729,24 @@ export class IgxTreeGridDefaultLoadingComponent implements OnInit { }, 1000); } } + +@Component({ + template: ` + + + + + + + EXPANDED + + + COLLAPSED + + + ` +}) +export class IgxTreeGridCustomExpandersTemplateComponent { + @ViewChild(IgxTreeGridComponent, { static: true }) public treeGrid: IgxTreeGridComponent; + public data = SampleTestData.employeeTreeData(); +} diff --git a/projects/igniteui-angular/src/lib/test-utils/tree-grid-functions.spec.ts b/projects/igniteui-angular/src/lib/test-utils/tree-grid-functions.spec.ts index f1494d87649..d466ca1d843 100644 --- a/projects/igniteui-angular/src/lib/test-utils/tree-grid-functions.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/tree-grid-functions.spec.ts @@ -236,13 +236,13 @@ export class TreeGridFunctions { public static verifyTreeRowHasCollapsedIcon(treeRowDOM) { const indicatorDiv = TreeGridFunctions.getExpansionIndicatorDiv(treeRowDOM); const igxIcon = indicatorDiv.query(By.css('igx-icon')); - expect(igxIcon.nativeElement.textContent).toEqual('expand_more'); + expect(igxIcon.nativeElement.textContent).toEqual('chevron_right'); } public static verifyTreeRowHasExpandedIcon(treeRowDOM) { const indicatorDiv = TreeGridFunctions.getExpansionIndicatorDiv(treeRowDOM); const igxIcon = indicatorDiv.query(By.css('igx-icon')); - expect(igxIcon.nativeElement.textContent).toEqual('expand_less'); + expect(igxIcon.nativeElement.textContent).toEqual('expand_more'); } public static verifyTreeRowExpandIndicatorVisibility(treeRowDOM, visibility = 'visible') { From 185a79a3578f72a751659dbbd819036b825a16c6 Mon Sep 17 00:00:00 2001 From: MKirova Date: Wed, 21 Aug 2019 17:36:28 +0300 Subject: [PATCH 04/17] feat(igxGroupBy): Exposing expand/collapse all indicator template for header and implementing for GroupBy. --- .../src/lib/grids/grid-base.component.ts | 28 ++++++++++++++++++- .../src/lib/grids/grid/grid.component.html | 27 ++++++++++++------ .../src/lib/grids/grid/grid.component.ts | 10 +++++++ .../src/lib/grids/grid/grid.directives.ts | 19 +++++++++++++ .../src/lib/grids/grid/grid.groupby.spec.ts | 11 ++++++++ .../src/lib/grids/grid/grid.module.ts | 8 +++++- 6 files changed, 92 insertions(+), 11 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts index ac6f920fa76..baef821ff04 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -93,7 +93,8 @@ import { IgxDragIndicatorIconDirective } from './row-drag.directive'; import { IgxDragDirective } from '../directives/drag-drop/drag-drop.directive'; import { DeprecateProperty } from '../core/deprecateDecorators'; import { CharSeparatedValueData } from '../services/csv/char-separated-value-data'; -import { IgxRowExpandIndicatorDirective, IgxRowCollapseIndicatorDirective } from './grid/grid.directives'; +import { IgxRowExpandIndicatorDirective, IgxRowCollapseIndicatorDirective, + IgxHeaderExpandIndicatorDirective, IgxHeaderCollapseIndicatorDirective } from './grid/grid.directives'; const MINIMUM_COLUMN_WIDTH = 136; const FILTER_ROW_HEIGHT = 50; @@ -276,6 +277,31 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements public rowCollapseIndicatorTemplate: TemplateRef = null; + /** + * The custom template, if any, that should be used when rendering a header expand indicator. + */ + @ContentChild(IgxHeaderExpandIndicatorDirective, { read: TemplateRef, static: false }) + public headerExpandIndicatorTemplate: TemplateRef = null; + + /** + * The custom template, if any, that should be used when rendering a header collapse indicator. + */ + @ContentChild(IgxHeaderCollapseIndicatorDirective, { read: TemplateRef, static: false }) + public headerCollapseIndicatorTemplate: TemplateRef = null; + + /** + * @hidden + */ + @ViewChild('defaultExpandTemplate', { read: TemplateRef, static: true }) + protected defaultExpandTemplate: TemplateRef; + +/** + * @hidden + */ + @ViewChild('defaultCollapseTemplate', { read: TemplateRef, static: true }) + protected defaultCollapseTemplate: TemplateRef; + + /** * An accessor that sets the resource strings. * By default it uses EN resources. diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html index 0af75f10342..02f44685a33 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html @@ -37,19 +37,14 @@ +
- unfold_less - unfold_more + }" #headerGroupContainer (click)="toggleAllGroupRows()"> + +
@@ -199,6 +194,20 @@ {{dropAreaMessage}} + + unfold_less + + + + unfold_more + +
{ const expndr = groupRows[0].nativeElement.querySelector('.igx-grid__grouping-indicator'); expect(expndr.innerText).toBe('COLLAPSED'); + expect(grid.headerGroupContainer.nativeElement.innerText).toBe('EXPANDED'); + UIInteractions.clickElement(grid.headerGroupContainer.nativeElement); + expect(grid.headerGroupContainer.nativeElement.innerText).toBe('COLLAPSED'); + })); it('should have the correct ARIA attributes on the group rows.', fakeAsync(() => { @@ -2680,6 +2684,13 @@ export class GroupableGridComponent extends DataParent { COLLAPSED + + + EXPANDED + + + COLLAPSED + ` }) diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.module.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.module.ts index 3147d57afb0..52e299c680a 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.module.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.module.ts @@ -5,7 +5,9 @@ import { IgxGroupAreaDropDirective, IgxGroupByRowTemplateDirective, IgxRowExpandIndicatorDirective, - IgxRowCollapseIndicatorDirective + IgxRowCollapseIndicatorDirective, + IgxHeaderExpandIndicatorDirective, + IgxHeaderCollapseIndicatorDirective } from './grid.directives'; import { IgxGridComponent } from './grid.component'; import { @@ -33,6 +35,8 @@ import { IgxSelectModule } from '../../select/index'; IgxGroupByRowTemplateDirective, IgxRowExpandIndicatorDirective, IgxRowCollapseIndicatorDirective, + IgxHeaderExpandIndicatorDirective, + IgxHeaderCollapseIndicatorDirective, IgxGroupAreaDropDirective, IgxGridGroupingPipe, IgxGridPagingPipe, @@ -47,6 +51,8 @@ import { IgxSelectModule } from '../../select/index'; IgxGroupByRowTemplateDirective, IgxRowExpandIndicatorDirective, IgxRowCollapseIndicatorDirective, + IgxHeaderExpandIndicatorDirective, + IgxHeaderCollapseIndicatorDirective, IgxGroupAreaDropDirective, IgxGridCommonModule, IgxGridGroupingPipe, From fecbbbdf6bfa2388178eaaf5d755ceacccc798c5 Mon Sep 17 00:00:00 2001 From: MKirova Date: Wed, 21 Aug 2019 18:00:45 +0300 Subject: [PATCH 05/17] feat(igxHierarchicalGrid): Exposing collapse indicator template for header for HierarchicalGrid. --- .../hierarchical-grid/hierarchical-grid.component.html | 8 ++++++-- .../hierarchical-grid/hierarchical-grid.component.ts | 3 ++- .../lib/grids/hierarchical-grid/hierarchical-grid.spec.ts | 6 ++++++ 3 files changed, 14 insertions(+), 3 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html index bc82c47920c..648f148a9a9 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html @@ -16,8 +16,7 @@ 'igx-grid__hierarchical-expander--push': filteringService.isFilterRowVisible, 'igx-grid__hierarchical-expander--no-border': rowSelectable || rowDraggable }"> - unfold_less +
unfold_less + +
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts index 527bb893f16..ec76cc56022 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts @@ -384,7 +384,8 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseCompone this.parentIsland.toolbarCustomContentTemplates : this.toolbarCustomContentTemplates; this.rowExpandIndicatorTemplate = this.rootGrid.rowExpandIndicatorTemplate; - this.rowCollapseIndicatorTemplate = this.rootGrid.rowCollapseIndicatorTemplate ; + this.rowCollapseIndicatorTemplate = this.rootGrid.rowCollapseIndicatorTemplate; + this.headerCollapseIndicatorTemplate = this.rootGrid.headerCollapseIndicatorTemplate; } private updateSizes() { diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts index c01ef4fb391..406aeeb2941 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts @@ -1139,6 +1139,9 @@ describe('IgxHierarchicalGrid custom template', () => { const expander = row.nativeElement.querySelector('.igx-grid__hierarchical-expander'); expect(expander.innerText).toBe('COLLAPSED'); } + + expect((hierarchicalGrid as any).headerHierarchyExpander.nativeElement.innerText).toBe('COLLAPSED'); + expect((childGrid as any).headerHierarchyExpander.nativeElement.innerText).toBe('COLLAPSED'); }); }); @@ -1363,6 +1366,9 @@ public toggleChildRI = true; COLLAPSED + + COLLAPSED + ` }) export class IgxHierarchicalGridCustomTemplateComponent extends IgxHierarchicalGridTestBaseComponent {} From 491a0745f518909d45e0a642a3d91171ec45781c Mon Sep 17 00:00:00 2001 From: MKirova Date: Thu, 22 Aug 2019 13:56:36 +0300 Subject: [PATCH 06/17] feat(igxHierarchicalGrid): Exposing expand/collapse indicator template for header for HierarchicalGrid. Adding expandAll/collapseAll api as defined in spec. --- .../src/lib/grids/grid/grid.groupby.spec.ts | 2 +- .../hierarchical-grid.component.html | 8 ++-- .../hierarchical-grid.component.ts | 39 +++++++++++++++++-- .../hierarchical-grid.integration.spec.ts | 1 + .../hierarchical-grid.spec.ts | 20 ++++++++-- .../hierarchical-grid.sample.html | 4 +- 6 files changed, 62 insertions(+), 12 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts index 6d9282df695..011902ae26c 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts @@ -540,7 +540,7 @@ describe('IgxGrid - GroupBy', () => { expect(expndr.innerText).toBe('COLLAPSED'); expect(grid.headerGroupContainer.nativeElement.innerText).toBe('EXPANDED'); - UIInteractions.clickElement(grid.headerGroupContainer.nativeElement); + grid.toggleAllGroupRows(); expect(grid.headerGroupContainer.nativeElement.innerText).toBe('COLLAPSED'); })); diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html index 648f148a9a9..57181418db0 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html @@ -16,7 +16,7 @@ 'igx-grid__hierarchical-expander--push': filteringService.isFilterRowVisible, 'igx-grid__hierarchical-expander--no-border': rowSelectable || rowDraggable }"> - +
unfold_less + unfold_less + + unfold_less +
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts index ec76cc56022..970feb639e3 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts @@ -386,6 +386,7 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseCompone this.rowExpandIndicatorTemplate = this.rootGrid.rowExpandIndicatorTemplate; this.rowCollapseIndicatorTemplate = this.rootGrid.rowCollapseIndicatorTemplate; this.headerCollapseIndicatorTemplate = this.rootGrid.headerCollapseIndicatorTemplate; + this.headerExpandIndicatorTemplate = this.rootGrid.headerExpandIndicatorTemplate; } private updateSizes() { @@ -609,6 +610,18 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseCompone return currGrid; } + /** + * @hidden + */ + public get iconTemplate() { + const expanded = this.hierarchicalState.length > 0 && this.hasExpandableChildren; + if (expanded) { + return this.headerExpandIndicatorTemplate || this.defaultExpandTemplate; + } else { + return this.headerCollapseIndicatorTemplate || this.defaultCollapseTemplate; + } + } + /** * @hidden */ @@ -637,13 +650,33 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseCompone return height; } + /** - * @hidden - */ - public collapseAllRows() { + * Collapses all rows of the current hierarchical grid. + * ```typescript + * this.grid.collapseAll(); + * ``` + * @memberof IgxHierarchicalGridComponent + */ + public collapseAll() { this.hierarchicalState = []; } + /** + * Expands all rows of the current hierarchical grid. + * ```typescript + * this.grid.expandAll(); + * ``` + * @memberof IgxHierarchicalGridComponent + */ + public expandAll() { + if (this.data) { + this.hierarchicalState = this.data.map((rec) => { + return { rowID: this.primaryKey ? rec[this.primaryKey] : rec }; + }); + } + } + /** * @hidden */ diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.integration.spec.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.integration.spec.ts index 2cb15975eaa..e446c2a6f99 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.integration.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.integration.spec.ts @@ -482,6 +482,7 @@ describe('IgxHierarchicalGrid Integration', () => { hierarchicalGrid.rowSelectable = true; hierarchicalGrid.dataRowList.toArray()[0].nativeElement.children[0].click(); fixture.detectChanges(); + tick(16); const rootExpander = (hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent).expander; const rootCheckbox = hierarchicalGrid.headerCheckboxContainer; diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts index 406aeeb2941..ac946a4dd4f 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts @@ -99,6 +99,7 @@ describe('Basic IgxHierarchicalGrid', () => { rows.forEach((r) => { expect(r.expanded).toBe(false); }); + icon = headerExpanderElem.query(By.css('igx-icon')).componentInstance; iconTxt = headerExpanderElem.query(By.css('igx-icon')).nativeElement.textContent.toLowerCase(); expect(iconTxt).toBe('unfold_less'); expect(icon.getActive).toBe(false); @@ -1119,7 +1120,7 @@ describe('IgxHierarchicalGrid custom template', () => { hierarchicalGrid = fixture.componentInstance.hgrid; })); - it(' should allow setting custom template for expand/collapse icons', () => { + it(' should allow setting custom template for expand/collapse icons', async() => { let rows = hierarchicalGrid.dataRowList.toArray(); for (const row of rows) { const expander = row.nativeElement.querySelector('.igx-grid__hierarchical-expander'); @@ -1140,8 +1141,16 @@ describe('IgxHierarchicalGrid custom template', () => { expect(expander.innerText).toBe('COLLAPSED'); } - expect((hierarchicalGrid as any).headerHierarchyExpander.nativeElement.innerText).toBe('COLLAPSED'); + expect((hierarchicalGrid as any).headerHierarchyExpander.nativeElement.innerText).toBe('EXPANDED'); expect((childGrid as any).headerHierarchyExpander.nativeElement.innerText).toBe('COLLAPSED'); + + childRows[0].toggle(); + fixture.detectChanges(); + expect((childGrid as any).headerHierarchyExpander.nativeElement.innerText).toBe('EXPANDED'); + hierarchicalGrid.expandChildren = false; + fixture.detectChanges(); + await wait(100); + expect((hierarchicalGrid as any).headerHierarchyExpander.nativeElement.innerText).toBe('COLLAPSED'); }); }); @@ -1367,8 +1376,11 @@ public toggleChildRI = true; COLLAPSED - COLLAPSED - + COLLAPSED + + + EXPANDED + ` }) export class IgxHierarchicalGridCustomTemplateComponent extends IgxHierarchicalGridTestBaseComponent {} diff --git a/src/app/hierarchical-grid/hierarchical-grid.sample.html b/src/app/hierarchical-grid/hierarchical-grid.sample.html index 69e72102c64..89fb7eaa813 100644 --- a/src/app/hierarchical-grid/hierarchical-grid.sample.html +++ b/src/app/hierarchical-grid/hierarchical-grid.sample.html @@ -10,7 +10,9 @@

Sample One

- + + unfold_more + From 759ac39ee67bba8725c3fc33a01622c48d73bea0 Mon Sep 17 00:00:00 2001 From: MKirova Date: Thu, 22 Aug 2019 17:03:54 +0300 Subject: [PATCH 07/17] chore(*): Fixing merge issue. --- .../src/lib/grids/tree-grid/tree-grid-expanding.spec.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-expanding.spec.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-expanding.spec.ts index ee0e5782c74..19a3f116665 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-expanding.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-expanding.spec.ts @@ -15,6 +15,7 @@ import { configureTestSuite } from '../../test-utils/configure-suite'; import { first } from 'rxjs/operators'; import { wait } from '../../test-utils/ui-interactions.spec'; import { IgxGridModule } from '../grid'; +import { resizeObserverIgnoreError } from '../../test-utils/helper-utils.spec'; describe('IgxTreeGrid - Expanding / Collapsing #tGrid', () => { configureTestSuite(); From 1e0b26e773a567150e293eb43447c061513b9bdf Mon Sep 17 00:00:00 2001 From: MKirova Date: Thu, 22 Aug 2019 17:54:47 +0300 Subject: [PATCH 08/17] chore(*): Fixing tests after merge with master. --- .../src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts index c2f61480306..394b5351105 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts @@ -1150,6 +1150,7 @@ describe('IgxHierarchicalGrid custom template', () => { hierarchicalGrid.expandChildren = false; fixture.detectChanges(); await wait(100); + fixture.detectChanges(); expect((hierarchicalGrid as any).headerHierarchyExpander.nativeElement.innerText).toBe('COLLAPSED'); }); }); From c297baa09c5badb586111165f8191754373091c7 Mon Sep 17 00:00:00 2001 From: MKirova Date: Thu, 22 Aug 2019 18:27:32 +0300 Subject: [PATCH 09/17] chore(*): Fixing tests after merge with master. --- .../igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts index 834f414df86..d180153ef27 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts @@ -543,6 +543,7 @@ describe('IgxGrid - GroupBy #grid', () => { expect(grid.headerGroupContainer.nativeElement.innerText).toBe('EXPANDED'); grid.toggleAllGroupRows(); + fix.detectChanges(); expect(grid.headerGroupContainer.nativeElement.innerText).toBe('COLLAPSED'); })); From 9eba52c7414c361f27904af7630c34d2df0d98d8 Mon Sep 17 00:00:00 2001 From: MKirova Date: Fri, 23 Aug 2019 17:47:03 +0300 Subject: [PATCH 10/17] chore(*): Renaming directive selectors so that they represent component state (igxRowExpandedIndicator/igxRowCollapsedIndicator and igxHeaderExpandedIndicator/igxHeaderCollapsedIndicator). Updating sample with custom icons. --- .../src/lib/grids/grid/grid.directives.ts | 8 ++++---- .../src/lib/grids/grid/grid.groupby.spec.ts | 8 ++++---- .../hierarchical-grid/hierarchical-grid.spec.ts | 8 ++++---- .../src/lib/test-utils/tree-grid-components.spec.ts | 4 ++-- .../hierarchical-grid/hierarchical-grid.sample.html | 13 +++++++++++-- 5 files changed, 25 insertions(+), 16 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.directives.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.directives.ts index 2d54b516b44..79ecbc19d42 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.directives.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.directives.ts @@ -21,7 +21,7 @@ export class IgxGroupByRowTemplateDirective { * @hidden */ @Directive({ - selector: '[igxRowExpandIndicator]' + selector: '[igxRowExpandedIndicator]' }) export class IgxRowExpandIndicatorDirective { } @@ -30,7 +30,7 @@ export class IgxRowExpandIndicatorDirective { * @hidden */ @Directive({ - selector: '[igxRowCollapseIndicator]' + selector: '[igxRowCollapsedIndicator]' }) export class IgxRowCollapseIndicatorDirective { } @@ -40,7 +40,7 @@ export class IgxRowCollapseIndicatorDirective { * @hidden */ @Directive({ - selector: '[igxHeaderExpandIndicator]' + selector: '[igxHeaderExpandedIndicator]' }) export class IgxHeaderExpandIndicatorDirective { } @@ -49,7 +49,7 @@ export class IgxHeaderExpandIndicatorDirective { * @hidden */ @Directive({ - selector: '[igxHeaderCollapseIndicator]' + selector: '[igxHeaderCollapsedIndicator]' }) export class IgxHeaderCollapseIndicatorDirective { } diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts index d180153ef27..be547e0811d 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts @@ -2699,17 +2699,17 @@ export class GroupableGridComponent extends DataParent { Total items with value:{{ groupRow.value }} are {{ groupRow.records.length }} - + EXPANDED - + COLLAPSED - + EXPANDED - + COLLAPSED diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts index 394b5351105..eaa08780f58 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts @@ -1370,16 +1370,16 @@ public toggleChildRI = true; - + EXPANDED - + COLLAPSED - + COLLAPSED - + EXPANDED ` diff --git a/projects/igniteui-angular/src/lib/test-utils/tree-grid-components.spec.ts b/projects/igniteui-angular/src/lib/test-utils/tree-grid-components.spec.ts index 8a344ef1a76..f157d0ea0ef 100644 --- a/projects/igniteui-angular/src/lib/test-utils/tree-grid-components.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/tree-grid-components.spec.ts @@ -737,10 +737,10 @@ export class IgxTreeGridDefaultLoadingComponent implements OnInit { - + EXPANDED - + COLLAPSED diff --git a/src/app/hierarchical-grid/hierarchical-grid.sample.html b/src/app/hierarchical-grid/hierarchical-grid.sample.html index 89fb7eaa813..8123a19317d 100644 --- a/src/app/hierarchical-grid/hierarchical-grid.sample.html +++ b/src/app/hierarchical-grid/hierarchical-grid.sample.html @@ -10,8 +10,17 @@

Sample One

- - unfold_more + + add + + + remove + + + remove + + + add From ba57d4f81d3183e0bbdabb3bb2060c1f47e7230e Mon Sep 17 00:00:00 2001 From: MKirova Date: Fri, 23 Aug 2019 18:10:25 +0300 Subject: [PATCH 11/17] chore(*): Renaming related templates/props. --- .../src/lib/grids/grid-base.component.ts | 18 +++++++++--------- .../src/lib/grids/grid/grid.component.html | 4 ++-- .../src/lib/grids/grid/grid.component.ts | 4 ++-- .../src/lib/grids/grid/grid.directives.ts | 4 ++-- .../src/lib/grids/grid/grid.module.ts | 12 ++++++------ .../lib/grids/grid/groupby-row.component.html | 4 ++-- .../lib/grids/grid/groupby-row.component.ts | 12 ++++++------ .../hierarchical-grid.component.html | 4 ++-- .../hierarchical-grid.component.ts | 8 ++++---- .../hierarchical-row.component.html | 4 ++-- .../hierarchical-row.component.ts | 12 ++++++------ .../grids/tree-grid/tree-cell.component.html | 4 ++-- .../lib/grids/tree-grid/tree-cell.component.ts | 12 ++++++------ 13 files changed, 51 insertions(+), 51 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts index 957713659e1..0a007a4a0f5 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -92,7 +92,7 @@ import { IgxGridFilteringRowComponent } from './filtering/grid-filtering-row.com import { IgxDragDirective } from '../directives/drag-drop/drag-drop.directive'; import { DeprecateProperty } from '../core/deprecateDecorators'; import { CharSeparatedValueData } from '../services/csv/char-separated-value-data'; -import { IgxRowExpandIndicatorDirective, IgxRowCollapseIndicatorDirective, +import { IgxRowExpandedIndicatorDirective, IgxRowCollapsedIndicatorDirective, IgxHeaderExpandIndicatorDirective, IgxHeaderCollapseIndicatorDirective } from './grid/grid.directives'; const MINIMUM_COLUMN_WIDTH = 136; @@ -268,14 +268,14 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements /** * The custom template, if any, that should be used when rendering a row expand indicator. */ - @ContentChild(IgxRowExpandIndicatorDirective, { read: TemplateRef, static: false }) - public rowExpandIndicatorTemplate: TemplateRef = null; + @ContentChild(IgxRowExpandedIndicatorDirective, { read: TemplateRef, static: false }) + public rowExpandedIndicatorTemplate: TemplateRef = null; /** * The custom template, if any, that should be used when rendering a row collapse indicator. */ - @ContentChild(IgxRowCollapseIndicatorDirective, { read: TemplateRef, static: false }) - public rowCollapseIndicatorTemplate: TemplateRef = null; + @ContentChild(IgxRowCollapsedIndicatorDirective, { read: TemplateRef, static: false }) + public rowCollapsedIndicatorTemplate: TemplateRef = null; /** @@ -293,14 +293,14 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements /** * @hidden */ - @ViewChild('defaultExpandTemplate', { read: TemplateRef, static: true }) - protected defaultExpandTemplate: TemplateRef; + @ViewChild('defaultExpandedTemplate', { read: TemplateRef, static: true }) + protected defaultExpandedTemplate: TemplateRef; /** * @hidden */ - @ViewChild('defaultCollapseTemplate', { read: TemplateRef, static: true }) - protected defaultCollapseTemplate: TemplateRef; + @ViewChild('defaultCollapsedTemplate', { read: TemplateRef, static: true }) + protected defaultCollapsedTemplate: TemplateRef; /** diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html index 9fd37e21fdb..d3eb63b83e1 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html @@ -194,14 +194,14 @@ {{dropAreaMessage}} - + unfold_less - + expand_more - + chevron_right diff --git a/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts b/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts index fe296c9ccaf..7194187179d 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts @@ -42,14 +42,14 @@ export class IgxGridGroupByRowComponent { /** * @hidden */ - @ViewChild('defaultGroupByExpandTemplate', { read: TemplateRef, static: true }) - protected defaultGroupByExpandTemplate: TemplateRef; + @ViewChild('defaultGroupByExpandedTemplate', { read: TemplateRef, static: true }) + protected defaultGroupByExpandedTemplate: TemplateRef; /** * @hidden */ - @ViewChild('defaultGroupByCollapseTemplate', { read: TemplateRef, static: true }) - protected defaultGroupByCollapseTemplate: TemplateRef; + @ViewChild('defaultGroupByCollapsedTemplate', { read: TemplateRef, static: true }) + protected defaultGroupByCollapsedTemplate: TemplateRef; /** * @hidden @@ -192,9 +192,9 @@ export class IgxGridGroupByRowComponent { public get iconTemplate() { if (this.expanded) { - return this.grid.rowExpandIndicatorTemplate || this.defaultGroupByExpandTemplate; + return this.grid.rowExpandedIndicatorTemplate || this.defaultGroupByExpandedTemplate; } else { - return this.grid.rowCollapseIndicatorTemplate || this.defaultGroupByCollapseTemplate; + return this.grid.rowCollapsedIndicatorTemplate || this.defaultGroupByCollapsedTemplate; } } diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html index 1e0afd60106..db188e638d7 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html @@ -166,11 +166,11 @@
- + unfold_less - + unfold_less diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts index 038600ceb28..a88360f7831 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts @@ -377,8 +377,8 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseCompone this.toolbarCustomContentTemplates = this.parentIsland ? this.parentIsland.toolbarCustomContentTemplates : this.toolbarCustomContentTemplates; - this.rowExpandIndicatorTemplate = this.rootGrid.rowExpandIndicatorTemplate; - this.rowCollapseIndicatorTemplate = this.rootGrid.rowCollapseIndicatorTemplate; + this.rowExpandedIndicatorTemplate = this.rootGrid.rowExpandedIndicatorTemplate; + this.rowCollapsedIndicatorTemplate = this.rootGrid.rowCollapsedIndicatorTemplate; this.headerCollapseIndicatorTemplate = this.rootGrid.headerCollapseIndicatorTemplate; this.headerExpandIndicatorTemplate = this.rootGrid.headerExpandIndicatorTemplate; } @@ -617,9 +617,9 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseCompone public get iconTemplate() { const expanded = this.hierarchicalState.length > 0 && this.hasExpandableChildren; if (expanded) { - return this.headerExpandIndicatorTemplate || this.defaultExpandTemplate; + return this.headerExpandIndicatorTemplate || this.defaultExpandedTemplate; } else { - return this.headerCollapseIndicatorTemplate || this.defaultCollapseTemplate; + return this.headerCollapseIndicatorTemplate || this.defaultCollapsedTemplate; } } diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html index 728a0e25e1c..80d075e01e1 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html @@ -2,11 +2,11 @@
- + expand_more - + chevron_right diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.ts index 61a74711d91..08acef89244 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.ts @@ -42,14 +42,14 @@ export class IgxHierarchicalRowComponent extends IgxRowComponent; + @ViewChild('defaultExpandedTemplate', { read: TemplateRef, static: true }) + protected defaultExpandedTemplate: TemplateRef; /** * @hidden */ - @ViewChild('defaultCollapseTemplate', { read: TemplateRef, static: true }) - protected defaultCollapseTemplate: TemplateRef; + @ViewChild('defaultCollapsedTemplate', { read: TemplateRef, static: true }) + protected defaultCollapsedTemplate: TemplateRef; /** * @hidden @@ -109,9 +109,9 @@ export class IgxHierarchicalRowComponent extends IgxRowComponent - + expand_more - + chevron_right diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.ts index 989c4ed4370..eb66ba5bd63 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.ts @@ -63,14 +63,14 @@ export class IgxTreeGridCellComponent extends IgxGridCellComponent implements On /** * @hidden */ - @ViewChild('defaultExpandTemplate', { read: TemplateRef, static: true }) - protected defaultExpandTemplate: TemplateRef; + @ViewChild('defaultExpandedTemplate', { read: TemplateRef, static: true }) + protected defaultExpandedTemplate: TemplateRef; /** * @hidden */ - @ViewChild('defaultCollapseTemplate', { read: TemplateRef, static: true }) - protected defaultCollapseTemplate: TemplateRef; + @ViewChild('defaultCollapsedTemplate', { read: TemplateRef, static: true }) + protected defaultCollapsedTemplate: TemplateRef; /** * @hidden @@ -130,9 +130,9 @@ export class IgxTreeGridCellComponent extends IgxGridCellComponent implements On */ public get iconTemplate() { if (this.expanded) { - return this.grid.rowExpandIndicatorTemplate || this.defaultExpandTemplate; + return this.grid.rowExpandedIndicatorTemplate || this.defaultExpandedTemplate; } else { - return this.grid.rowCollapseIndicatorTemplate || this.defaultCollapseTemplate; + return this.grid.rowCollapsedIndicatorTemplate || this.defaultCollapsedTemplate; } } } From 8604bbec8e49f90a2f686bbc0b1e392e3f082039 Mon Sep 17 00:00:00 2001 From: MKirova Date: Thu, 29 Aug 2019 15:26:48 +0300 Subject: [PATCH 12/17] fix(igxHierarchicalGrid): Allow hiding expansion indicator based on user condition. Moving toggle logic inside icon. Unifying how hgrid tests expand rows. --- .../styles/components/grid/_grid-theme.scss | 2 +- .../hierarchical-grid.integration.spec.ts | 82 ++++++++++--------- .../hierarchical-grid.virtualization.spec.ts | 40 ++++----- .../hierarchical-row.component.html | 6 +- .../hierarchical-grid.sample.html | 6 +- .../hierarchical-grid.sample.ts | 12 +++ 6 files changed, 82 insertions(+), 66 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss index df73013e0fd..c08f3d72afa 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss @@ -2196,7 +2196,6 @@ display: flex; align-items: center; justify-content: center; - cursor: pointer; z-index: 3; color: --var($theme, 'expand-icon-color'); border-right: 1px solid transparent; @@ -2216,6 +2215,7 @@ } igx-icon { + cursor: pointer; color: --var($theme, 'expand-icon-color'); max-width: $hierarchical-action-icon; min-width: $hierarchical-action-icon; diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.integration.spec.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.integration.spec.ts index 4e6cae8adba..d60d005aa07 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.integration.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.integration.spec.ts @@ -50,9 +50,9 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { expect(document.querySelectorAll('igx-grid-header').length).toEqual(3); - const firstRow = hierarchicalGrid.dataRowList.toArray()[0]; + const firstRow = hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent; // first child of the row should expand indicator - firstRow.nativeElement.children[0].click(); + UIInteractions.clickElement(firstRow.expander); fixture.detectChanges(); const childGrid = hierarchicalGrid.hgridAPI.getChildGrids(false)[0]; @@ -89,7 +89,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { fixture.detectChanges(); let firstRow = hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent; - firstRow.nativeElement.children[0].click(); + UIInteractions.clickElement(firstRow.expander); fixture.detectChanges(); expect(firstRow.expanded).toBeTruthy(); @@ -133,10 +133,10 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { firstLayoutInstances.push(args.grid); }); // expand 1st row - hierarchicalGrid.dataRowList.toArray()[0].nativeElement.children[0].click(); + UIInteractions.clickElement((hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent).expander); fixture.detectChanges(); // expand 2nd row - hierarchicalGrid.dataRowList.toArray()[1].nativeElement.children[0].click(); + UIInteractions.clickElement((hierarchicalGrid.dataRowList.toArray()[1] as IgxHierarchicalRowComponent).expander); fixture.detectChanges(); // test instances expect(firstLayoutInstances.length).toEqual(2); @@ -150,10 +150,10 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { firstLayoutInstances.push(args.grid); }); // expand 1st row - hierarchicalGrid.dataRowList.toArray()[0].nativeElement.children[0].click(); + UIInteractions.clickElement((hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent).expander); fixture.detectChanges(); // expand 2nd row - hierarchicalGrid.dataRowList.toArray()[1].nativeElement.children[0].click(); + UIInteractions.clickElement((hierarchicalGrid.dataRowList.toArray()[1] as IgxHierarchicalRowComponent).expander); fixture.detectChanges(); firstLayoutInstances[0].updateRow({ ProductName: 'Changed' }, '00'); firstLayoutInstances[1].updateRow({ ProductName: 'Changed' }, '10'); @@ -213,7 +213,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { childGrid = args.grid; }); // expand 1st row - hierarchicalGrid.dataRowList.toArray()[0].nativeElement.children[0].click(); + UIInteractions.clickElement((hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent).expander); fixture.detectChanges(); childGrid.updateRow({ ProductName: 'Changed' }, '00'); fixture.detectChanges(); @@ -226,9 +226,9 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { describe('Sorting', () => { it('should display correct child data for expanded row after sorting.', (async () => { - const firstRow = hierarchicalGrid.dataRowList.toArray()[0]; + const firstRow = hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent; // expand 1st row - firstRow.nativeElement.children[0].click(); + UIInteractions.clickElement(firstRow.expander); fixture.detectChanges(); hierarchicalGrid.sort({ fieldName: 'ID', dir: SortingDirection.Desc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() @@ -249,9 +249,9 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { })); it('should allow sorting via headers in child grids', fakeAsync(/** row toggle rAF */() => { - const firstRow = hierarchicalGrid.dataRowList.toArray()[0]; + const firstRow = hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent; // expand 1st row - firstRow.nativeElement.children[0].click(); + UIInteractions.clickElement(firstRow.expander); fixture.detectChanges(); // enable sorting const childGrid = hierarchicalGrid.hgridAPI.getChildGrids(false)[0]; @@ -272,7 +272,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { })); }); - // describe('GroupBy', () => { + // describe('GroupBy', () => { // it('Data should be rendered correctly when children are expanded', async() => { // const firstRow = hierarchicalGrid.dataRowList.toArray()[0]; // // expand 1st row @@ -361,9 +361,9 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { fixture.detectChanges(); expect(document.querySelectorAll('igx-grid-filtering-row').length).toEqual(1); - const firstRow = hierarchicalGrid.dataRowList.toArray()[0]; + const firstRow = hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent; // first child of the row should expand indicator - firstRow.nativeElement.children[0].click(); + UIInteractions.clickElement(firstRow.expander); fixture.detectChanges(); filteringCells = fixture.debugElement.queryAll(By.css('igx-grid-filtering-cell')); @@ -375,7 +375,8 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { it('should not lose child grid states after filtering in parent grid.', fakeAsync(() => { // expand 1st row - hierarchicalGrid.dataRowList.toArray()[0].nativeElement.children[0].click(); + const firstRow = hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent; + UIInteractions.clickElement(firstRow.expander); fixture.detectChanges(); const childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); let childGrid = childGrids[0].query(By.css('igx-hierarchical-grid')).componentInstance; @@ -451,7 +452,8 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { describe('Summaries', () => { const SUMMARIES_MARGIN_CLASS = '.igx-grid__summaries-patch'; it('should allow defining summaries for child grid and child should be sized correctly.', fakeAsync(/** row toggle rAF */() => { - hierarchicalGrid.dataRowList.toArray()[0].nativeElement.children[0].click(); + let firstRow = hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent; + UIInteractions.clickElement(firstRow.expander); fixture.detectChanges(); const childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); @@ -462,7 +464,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { const summaryRow = childGrid.summariesRowList.first.nativeElement; const summaryRowIndentation = summaryRow.querySelector(SUMMARIES_MARGIN_CLASS); expect(summaryRow.children.length).toEqual(2); - expect(summaryRowIndentation.offsetWidth).toEqual(expander.nativeElement.offsetWidth); + expect(summaryRowIndentation.offsetWidth).toEqual(expander.nativeElement.parentElement.offsetWidth); const gridHeight = childGrid.nativeElement.offsetHeight; const childElems: HTMLElement[] = Array.from(childGrid.nativeElement.children); @@ -473,7 +475,8 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { // Expect the combined height of all elements (header, body, footer etc) to equal the calculated height of the grid. expect(elementsHeight).toEqual(gridHeight); - childGrid.dataRowList.toArray()[0].nativeElement.children[0].click(); + firstRow = childGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent; + UIInteractions.clickElement(firstRow.expander); fixture.detectChanges(); const childGridDebugElement = childGrids[0].query(By.css('igx-hierarchical-grid')); @@ -487,7 +490,8 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { it('should size summaries with row selectors for parent and children grids correctly.', fakeAsync(/** row toggle rAF */() => { hierarchicalGrid.rowSelectable = true; - hierarchicalGrid.dataRowList.toArray()[0].nativeElement.children[0].click(); + const firstRow = hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent; + UIInteractions.clickElement(firstRow.expander); fixture.detectChanges(); tick(16); @@ -498,7 +502,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { expect(rootSummaryRow.children.length).toEqual(2); expect(rootSummaryIndentation.offsetWidth) - .toEqual(rootExpander.nativeElement.offsetWidth + rootCheckbox.nativeElement.offsetWidth); + .toEqual(rootExpander.nativeElement.parentElement.offsetWidth + rootCheckbox.nativeElement.offsetWidth); const childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); const childGrid = childGrids[0].query(By.css('igx-hierarchical-grid')).componentInstance; @@ -509,7 +513,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { const childSummaryIndentation = summaryRow.querySelector(SUMMARIES_MARGIN_CLASS); expect(summaryRow.children.length).toEqual(2); - expect(childSummaryIndentation.offsetWidth).toEqual(expander.nativeElement.offsetWidth); + expect(childSummaryIndentation.offsetWidth).toEqual(expander.nativeElement.parentElement.offsetWidth); })); it('should render summaries for column inside a column group.', fakeAsync(/** row toggle rAF */() => { @@ -518,7 +522,8 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { fixture.componentInstance.rowIsland.childColumns.last.hasSummary = true; fixture.detectChanges(); - hierarchicalGrid.dataRowList.toArray()[0].nativeElement.children[0].click(); + const firstRow = hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent; + UIInteractions.clickElement(firstRow.expander); fixture.detectChanges(); const childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); @@ -538,12 +543,11 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { fixture.detectChanges(); expect(hierarchicalGrid.verticalScrollContainer.igxForOf.length).toEqual(15); - - hierarchicalGrid.dataRowList.toArray()[1].nativeElement.children[0].click(); + UIInteractions.clickElement((hierarchicalGrid.dataRowList.toArray()[1] as IgxHierarchicalRowComponent).expander); fixture.detectChanges(); expect(hierarchicalGrid.verticalScrollContainer.igxForOf.length).toEqual(16); - hierarchicalGrid.dataRowList.toArray()[0].nativeElement.children[0].click(); + UIInteractions.clickElement((hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent).expander); fixture.detectChanges(); expect(hierarchicalGrid.verticalScrollContainer.igxForOf.length).toEqual(17); @@ -559,9 +563,9 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { hierarchicalGrid.reflow(); fixture.detectChanges(); - hierarchicalGrid.dataRowList.toArray()[1].nativeElement.children[0].click(); + UIInteractions.clickElement((hierarchicalGrid.dataRowList.toArray()[1] as IgxHierarchicalRowComponent).expander); fixture.detectChanges(); - hierarchicalGrid.dataRowList.toArray()[0].nativeElement.children[0].click(); + UIInteractions.clickElement((hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent).expander); fixture.detectChanges(); expect((hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent).expanded).toBeTruthy(); @@ -616,7 +620,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { expect(hierarchicalGrid.hasVerticalSroll()).toBeFalsy(); // expand first - hierarchicalGrid.getRowByKey('0').nativeElement.children[0].click(); + UIInteractions.clickElement((hierarchicalGrid.getRowByKey('0') as IgxHierarchicalRowComponent).expander); await wait(30); fixture.detectChanges(); @@ -635,7 +639,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { expect(lastRow.index).toBe(5); expect(lastRow.rowData).toBe(fixture.componentInstance.data[4]); - hierarchicalGrid.getRowByKey('1').nativeElement.children[0].click(); + UIInteractions.clickElement((hierarchicalGrid.getRowByKey('1') as IgxHierarchicalRowComponent).expander); await wait(30); fixture.detectChanges(); hierarchicalGrid.verticalScrollContainer.scrollTo(hierarchicalGrid.verticalScrollContainer.igxForOf.length - 1); @@ -650,7 +654,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { expect(lastRow.index).toBe(6); expect(lastRow.rowData).toBe(fixture.componentInstance.data[4]); - hierarchicalGrid.getRowByKey('2').nativeElement.children[0].click(); + UIInteractions.clickElement((hierarchicalGrid.getRowByKey('2') as IgxHierarchicalRowComponent).expander); await wait(30); fixture.detectChanges(); hierarchicalGrid.verticalScrollContainer.scrollTo(hierarchicalGrid.verticalScrollContainer.igxForOf.length - 1); @@ -665,7 +669,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { expect(lastRow.index).toBe(7); expect(lastRow.rowData).toBe(fixture.componentInstance.data[4]); - hierarchicalGrid.getRowByKey('3').nativeElement.children[0].click(); + UIInteractions.clickElement((hierarchicalGrid.getRowByKey('3') as IgxHierarchicalRowComponent).expander); await wait(30); fixture.detectChanges(); hierarchicalGrid.verticalScrollContainer.scrollTo(hierarchicalGrid.verticalScrollContainer.igxForOf.length - 1); @@ -680,7 +684,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { expect(lastRow.index).toBe(8); expect(lastRow.rowData).toBe(fixture.componentInstance.data[4]); - hierarchicalGrid.getRowByKey('4').nativeElement.children[0].click(); + UIInteractions.clickElement((hierarchicalGrid.getRowByKey('4') as IgxHierarchicalRowComponent).expander); await wait(30); fixture.detectChanges(); hierarchicalGrid.verticalScrollContainer.scrollTo(hierarchicalGrid.verticalScrollContainer.igxForOf.length - 1); @@ -706,7 +710,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { expect(hierarchicalGrid.hasVerticalSroll()).toBeFalsy(); // expand row - hierarchicalGrid.dataRowList.toArray()[1].nativeElement.children[0].click(); + UIInteractions.clickElement((hierarchicalGrid.dataRowList.toArray()[1] as IgxHierarchicalRowComponent).expander); fixture.detectChanges(); await wait(30); fixture.detectChanges(); @@ -736,7 +740,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { describe('Toolbar', () => { it('should be displayed correctly for child layout and hiding should apply to the correct child.', fakeAsync(/** row toggle rAF */() => { - hierarchicalGrid.dataRowList.toArray()[0].nativeElement.children[0].click(); + UIInteractions.clickElement((hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent).expander); fixture.detectChanges(); const childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); @@ -822,7 +826,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { it('should be displayed correctly for child layout and pinning should apply to the correct child.', fakeAsync(/** row toggle rAF */() => { - hierarchicalGrid.dataRowList.toArray()[0].nativeElement.children[0].click(); + UIInteractions.clickElement((hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent).expander); fixture.detectChanges(); const childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); @@ -868,7 +872,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { fixture = TestBed.createComponent(IgxHierarchicalGridTestCustomToolbarComponent); fixture.detectChanges(); hierarchicalGrid = fixture.componentInstance.hgrid; - hierarchicalGrid.dataRowList.toArray()[0].nativeElement.children[0].click(); + UIInteractions.clickElement((hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent).expander); const toolbars = fixture.debugElement.queryAll(By.css('igx-grid-toolbar')); expect(toolbars.length).toEqual(3); @@ -889,7 +893,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { describe('Moving', () => { it('should not be possible to drag move a column from another grid.', (async() => { - hierarchicalGrid.dataRowList.toArray()[0].nativeElement.children[0].click(); + UIInteractions.clickElement((hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent).expander); fixture.detectChanges(); const childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); @@ -935,7 +939,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { describe('Pinning', () => { it('should be possible by templating the header and getting column reference for child grid', (async() => { hierarchicalGrid = fixture.componentInstance.hgrid; - hierarchicalGrid.dataRowList.toArray()[0].nativeElement.children[0].click(); + UIInteractions.clickElement((hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent).expander); fixture.detectChanges(); const childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.virtualization.spec.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.virtualization.spec.ts index b6f680ae4e4..b526820701e 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.virtualization.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.virtualization.spec.ts @@ -35,7 +35,7 @@ describe('IgxHierarchicalGrid Virtualization #hGrid', () => { resizeObserverIgnoreError(); const firstRow = hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent; // first child of the row should expand indicator - firstRow.nativeElement.children[0].click(); + UIInteractions.clickElement(firstRow.expander); fixture.detectChanges(); expect(firstRow.expanded).toBeTruthy(); const verticalScroll = fixture.componentInstance.hgrid.verticalScrollContainer; @@ -58,9 +58,9 @@ describe('IgxHierarchicalGrid Virtualization #hGrid', () => { }); it('Should retain child scroll position when expanding and collapsing through rows', async () => { - const firstRow = hierarchicalGrid.dataRowList.toArray()[0]; + const firstRow = hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent;; // first child of the row should expand indicator - firstRow.nativeElement.children[0].click(); + UIInteractions.clickElement(firstRow.expander); fixture.detectChanges(); const childGrid = hierarchicalGrid.hgridAPI.getChildGrids(false)[0]; @@ -88,9 +88,9 @@ describe('IgxHierarchicalGrid Virtualization #hGrid', () => { it('Should retain child grid states (scroll position, selection, filtering, paging etc.) when scrolling', async () => { setupHierarchicalGridScrollDetection(fixture, hierarchicalGrid); - const firstRow = hierarchicalGrid.dataRowList.toArray()[0]; + const firstRow = hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent; // first child of the row should expand indicator - firstRow.nativeElement.children[0].click(); + UIInteractions.clickElement(firstRow.expander); fixture.detectChanges(); const childGrid = hierarchicalGrid.hgridAPI.getChildGrids(false)[0]; @@ -127,12 +127,12 @@ describe('IgxHierarchicalGrid Virtualization #hGrid', () => { }); it('should render correct data for child grid after scrolling and start index changes.', async() => { - const firstRow = hierarchicalGrid.dataRowList.toArray()[0]; + const firstRow = hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent; // first child of the row should expand indicator - firstRow.nativeElement.children[0].click(); + UIInteractions.clickElement(firstRow.expander); fixture.detectChanges(); - const secondRow = hierarchicalGrid.dataRowList.toArray()[1]; - secondRow.nativeElement.children[0].click(); + const secondRow = hierarchicalGrid.dataRowList.toArray()[1] as IgxHierarchicalRowComponent; + UIInteractions.clickElement(secondRow.expander); fixture.detectChanges(); const childGrid1 = hierarchicalGrid.hgridAPI.getChildGrids(false)[0]; @@ -267,8 +267,8 @@ describe('IgxHierarchicalGrid Virtualization #hGrid', () => { it('should update scroll height after expanding/collapsing rows.', async() => { const scrHeight = hierarchicalGrid.verticalScrollContainer.getVerticalScroll().scrollHeight; - const firstRow = hierarchicalGrid.dataRowList.toArray()[0]; - UIInteractions.clickElement(firstRow.nativeElement.children[0]); + const firstRow = hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent; + UIInteractions.clickElement(firstRow.expander); fixture.detectChanges(); await wait(200); const childGrid1 = hierarchicalGrid.hgridAPI.getChildGrids(false)[0]; @@ -297,7 +297,7 @@ it('should update scroll height after expanding/collapsing row in a nested child let scrHeight = hierarchicalGrid.verticalScrollContainer.getVerticalScroll().scrollHeight; expect(scrHeight).toBe(0); - hierarchicalGrid.dataRowList.toArray()[2].nativeElement.children[0].click(); + UIInteractions.clickElement((hierarchicalGrid.dataRowList.toArray()[2] as IgxHierarchicalRowComponent).expander); await wait(100); fixture.detectChanges(); hierarchicalGrid.verticalScrollContainer.scrollNext(); @@ -309,14 +309,14 @@ it('should update scroll height after expanding/collapsing row in a nested child expect(scrHeight).toBe(3 * 51 + childGrid1.nativeElement.closest('.igx-grid__tr-container').offsetHeight - 1); // expand - childGrid1.dataRowList.toArray()[0].nativeElement.children[0].click(); + UIInteractions.clickElement(childGrid1.dataRowList.toArray()[0].expander); await wait(100); fixture.detectChanges(); scrHeight = hierarchicalGrid.verticalScrollContainer.getVerticalScroll().scrollHeight; expect(scrHeight).toBe(3 * 51 + childGrid1.nativeElement.closest('.igx-grid__tr-container').offsetHeight - 1); // collapse - childGrid1.dataRowList.toArray()[0].nativeElement.children[0].click(); + UIInteractions.clickElement(childGrid1.dataRowList.toArray()[0].expander); await wait(100); fixture.detectChanges(); scrHeight = hierarchicalGrid.verticalScrollContainer.getVerticalScroll().scrollHeight; @@ -326,8 +326,8 @@ it('should update scroll height after expanding/collapsing row in a nested child it('should update context information correctly for child grid container after scrolling', async() => { resizeObserverIgnoreError(); // expand 3rd row - const row = hierarchicalGrid.dataRowList.toArray()[3]; - row.nativeElement.children[0].click(); + const row = hierarchicalGrid.dataRowList.toArray()[3] as IgxHierarchicalRowComponent; + UIInteractions.clickElement(row.expander); fixture.detectChanges(); // verify index and rowData @@ -362,8 +362,8 @@ it('should update scroll height after expanding/collapsing row in a nested child expect(hierarchicalGrid.verticalScrollContainer.getVerticalScroll().children[0].offsetHeight).toEqual(510); // expand 1st row - const row = hierarchicalGrid.dataRowList.toArray()[0]; - row.nativeElement.children[0].click(); + const row = hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent; + UIInteractions.clickElement(row.expander); fixture.detectChanges(); expect(hierarchicalGrid.verticalScrollContainer.getVerticalScroll().children[0].offsetHeight).toEqual(561); @@ -395,8 +395,8 @@ describe('IgxHierarchicalGrid Virtualization Custom Scenarios #hGrid', () => { expect(hierarchicalGrid.verticalScrollContainer.getVerticalScroll().parentElement.hidden).toBeTruthy(); // expand 1st row - const row = hierarchicalGrid.dataRowList.toArray()[0]; - row.nativeElement.children[0].click(); + const row = hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent; + UIInteractions.clickElement(row.expander); fixture.detectChanges(); await wait(200); diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html index 80d075e01e1..4c1ea9d7910 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html @@ -1,13 +1,13 @@ -
+
- expand_more + expand_more - chevron_right + chevron_right
diff --git a/src/app/hierarchical-grid/hierarchical-grid.sample.html b/src/app/hierarchical-grid/hierarchical-grid.sample.html index 8123a19317d..cf28b2b0c9b 100644 --- a/src/app/hierarchical-grid/hierarchical-grid.sample.html +++ b/src/app/hierarchical-grid/hierarchical-grid.sample.html @@ -11,16 +11,16 @@

Sample One

- add + add remove - remove + remove - add + add diff --git a/src/app/hierarchical-grid/hierarchical-grid.sample.ts b/src/app/hierarchical-grid/hierarchical-grid.sample.ts index dfe8a7debd6..51bb358b120 100644 --- a/src/app/hierarchical-grid/hierarchical-grid.sample.ts +++ b/src/app/hierarchical-grid/hierarchical-grid.sample.ts @@ -44,6 +44,7 @@ export class HierarchicalGridSampleComponent { { label: 'comfortable', selected: this.density === 'comfortable', togglable: true } ]; this.localData = this.generateDataUneven(100, 3); + this.localData[0].childData = null; } generateData(count: number, level: number) { @@ -101,6 +102,17 @@ export class HierarchicalGridSampleComponent { this.density = this.displayDensities[event.index].label; } + isRecordExpandable(rowData) { + return !!rowData.childData; + } + + expandAll(hgrid) { + hgrid.hierarchicalState = hgrid.data.filter(x => this.isRecordExpandable(x)) + .map((rec) => { + return { rowID: hgrid.primaryKey ? rec[hgrid.primaryKey] : rec }; + }); + } + public LoadMoreColumns() { this.columns = ['Col1', 'Col2', 'Col3']; this.childColumns = ['ChildCol1', 'ChildCol2']; From cc08bf3c9b3403d0340bd1325eeae45efb079e27 Mon Sep 17 00:00:00 2001 From: MKirova Date: Thu, 29 Aug 2019 15:43:10 +0300 Subject: [PATCH 13/17] chore(*): Fixing merge issue. --- .../hierarchical-grid/hierarchical-grid.virtualization.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.virtualization.spec.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.virtualization.spec.ts index b526820701e..ffd61fb3b5e 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.virtualization.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.virtualization.spec.ts @@ -58,7 +58,7 @@ describe('IgxHierarchicalGrid Virtualization #hGrid', () => { }); it('Should retain child scroll position when expanding and collapsing through rows', async () => { - const firstRow = hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent;; + const firstRow = hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent; // first child of the row should expand indicator UIInteractions.clickElement(firstRow.expander); fixture.detectChanges(); From d1f279e9a248b7d8c1272710d8d41a408df3d217 Mon Sep 17 00:00:00 2001 From: MKirova Date: Tue, 3 Sep 2019 17:06:10 +0300 Subject: [PATCH 14/17] chore(*): Moving toggle action logic for row expander above the template. Template can not be used to change default behavior. --- .../styles/components/grid/_grid-theme.scss | 2 +- .../hierarchical-grid.integration.spec.ts | 84 +++++++++---------- .../hierarchical-grid.virtualization.spec.ts | 40 ++++----- .../hierarchical-row.component.html | 6 +- .../hierarchical-grid.sample.html | 6 +- .../hierarchical-grid.sample.ts | 17 ---- 6 files changed, 67 insertions(+), 88 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss index 89d94dabd40..3f5e1529a98 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss @@ -2216,6 +2216,7 @@ display: flex; align-items: center; justify-content: center; + cursor: pointer; z-index: 3; color: --var($theme, 'expand-icon-color'); border-right: 1px solid transparent; @@ -2235,7 +2236,6 @@ } igx-icon { - cursor: pointer; color: --var($theme, 'expand-icon-color'); max-width: $hierarchical-action-icon; min-width: $hierarchical-action-icon; diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.integration.spec.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.integration.spec.ts index 22e09d8c2b7..2ad4779640d 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.integration.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.integration.spec.ts @@ -51,9 +51,9 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { expect(document.querySelectorAll('igx-grid-header').length).toEqual(3); - const firstRow = hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent; + const firstRow = hierarchicalGrid.dataRowList.toArray()[0]; // first child of the row should expand indicator - UIInteractions.clickElement(firstRow.expander); + firstRow.nativeElement.children[0].click(); fixture.detectChanges(); const childGrid = hierarchicalGrid.hgridAPI.getChildGrids(false)[0]; @@ -90,7 +90,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { fixture.detectChanges(); let firstRow = hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent; - UIInteractions.clickElement(firstRow.expander); + firstRow.nativeElement.children[0].click(); fixture.detectChanges(); expect(firstRow.expanded).toBeTruthy(); @@ -134,10 +134,10 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { firstLayoutInstances.push(args.grid); }); // expand 1st row - UIInteractions.clickElement((hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent).expander); + hierarchicalGrid.dataRowList.toArray()[0].nativeElement.children[0].click(); fixture.detectChanges(); // expand 2nd row - UIInteractions.clickElement((hierarchicalGrid.dataRowList.toArray()[1] as IgxHierarchicalRowComponent).expander); + hierarchicalGrid.dataRowList.toArray()[1].nativeElement.children[0].click(); fixture.detectChanges(); // test instances expect(firstLayoutInstances.length).toEqual(2); @@ -151,10 +151,10 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { firstLayoutInstances.push(args.grid); }); // expand 1st row - UIInteractions.clickElement((hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent).expander); + hierarchicalGrid.dataRowList.toArray()[0].nativeElement.children[0].click(); fixture.detectChanges(); // expand 2nd row - UIInteractions.clickElement((hierarchicalGrid.dataRowList.toArray()[1] as IgxHierarchicalRowComponent).expander); + hierarchicalGrid.dataRowList.toArray()[1].nativeElement.children[0].click(); fixture.detectChanges(); firstLayoutInstances[0].updateRow({ ProductName: 'Changed' }, '00'); firstLayoutInstances[1].updateRow({ ProductName: 'Changed' }, '10'); @@ -214,7 +214,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { childGrid = args.grid; }); // expand 1st row - UIInteractions.clickElement((hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent).expander); + hierarchicalGrid.dataRowList.toArray()[0].nativeElement.children[0].click(); fixture.detectChanges(); childGrid.updateRow({ ProductName: 'Changed' }, '00'); fixture.detectChanges(); @@ -227,9 +227,9 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { describe('Sorting', () => { it('should display correct child data for expanded row after sorting.', (async () => { - const firstRow = hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent; + const firstRow = hierarchicalGrid.dataRowList.toArray()[0]; // expand 1st row - UIInteractions.clickElement(firstRow.expander); + firstRow.nativeElement.children[0].click(); fixture.detectChanges(); hierarchicalGrid.sort({ fieldName: 'ID', dir: SortingDirection.Desc, ignoreCase: false, strategy: DefaultSortingStrategy.instance() @@ -250,9 +250,9 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { })); it('should allow sorting via headers in child grids', fakeAsync(/** row toggle rAF */() => { - const firstRow = hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent; + const firstRow = hierarchicalGrid.dataRowList.toArray()[0]; // expand 1st row - UIInteractions.clickElement(firstRow.expander); + firstRow.nativeElement.children[0].click(); fixture.detectChanges(); // enable sorting const childGrid = hierarchicalGrid.hgridAPI.getChildGrids(false)[0]; @@ -273,7 +273,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { })); }); - // describe('GroupBy', () => { + // describe('GroupBy', () => { // it('Data should be rendered correctly when children are expanded', async() => { // const firstRow = hierarchicalGrid.dataRowList.toArray()[0]; // // expand 1st row @@ -362,9 +362,9 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { fixture.detectChanges(); expect(document.querySelectorAll('igx-grid-filtering-row').length).toEqual(1); - const firstRow = hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent; + const firstRow = hierarchicalGrid.dataRowList.toArray()[0]; // first child of the row should expand indicator - UIInteractions.clickElement(firstRow.expander); + firstRow.nativeElement.children[0].click(); fixture.detectChanges(); filteringCells = fixture.debugElement.queryAll(By.css('igx-grid-filtering-cell')); @@ -376,8 +376,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { it('should not lose child grid states after filtering in parent grid.', fakeAsync(() => { // expand 1st row - const firstRow = hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent; - UIInteractions.clickElement(firstRow.expander); + hierarchicalGrid.dataRowList.toArray()[0].nativeElement.children[0].click(); fixture.detectChanges(); const childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); let childGrid = childGrids[0].query(By.css('igx-hierarchical-grid')).componentInstance; @@ -434,8 +433,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { describe('Summaries', () => { const SUMMARIES_MARGIN_CLASS = '.igx-grid__summaries-patch'; it('should allow defining summaries for child grid and child should be sized correctly.', fakeAsync(/** row toggle rAF */() => { - let firstRow = hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent; - UIInteractions.clickElement(firstRow.expander); + hierarchicalGrid.dataRowList.toArray()[0].nativeElement.children[0].click(); fixture.detectChanges(); const childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); @@ -446,7 +444,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { const summaryRow = childGrid.summariesRowList.first.nativeElement; const summaryRowIndentation = summaryRow.querySelector(SUMMARIES_MARGIN_CLASS); expect(summaryRow.children.length).toEqual(2); - expect(summaryRowIndentation.offsetWidth).toEqual(expander.nativeElement.parentElement.offsetWidth); + expect(summaryRowIndentation.offsetWidth).toEqual(expander.nativeElement.offsetWidth); const gridHeight = childGrid.nativeElement.offsetHeight; const childElems: HTMLElement[] = Array.from(childGrid.nativeElement.children); @@ -457,8 +455,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { // Expect the combined height of all elements (header, body, footer etc) to equal the calculated height of the grid. expect(elementsHeight).toEqual(gridHeight); - firstRow = childGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent; - UIInteractions.clickElement(firstRow.expander); + childGrid.dataRowList.toArray()[0].nativeElement.children[0].click(); fixture.detectChanges(); const childGridDebugElement = childGrids[0].query(By.css('igx-hierarchical-grid')); @@ -471,9 +468,8 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { })); it('should size summaries with row selectors for parent and children grids correctly.', fakeAsync(/** row toggle rAF */() => { - hierarchicalGrid.rowSelection = GridSelectionMode.multiple; - const firstRow = hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent; - UIInteractions.clickElement(firstRow.expander); + hierarchicalGrid.rowSelectable = true; + hierarchicalGrid.dataRowList.toArray()[0].nativeElement.children[0].click(); fixture.detectChanges(); tick(16); @@ -484,7 +480,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { expect(rootSummaryRow.children.length).toEqual(2); expect(rootSummaryIndentation.offsetWidth) - .toEqual(rootExpander.nativeElement.parentElement.offsetWidth + rootCheckbox.nativeElement.offsetWidth); + .toEqual(rootExpander.nativeElement.offsetWidth + rootCheckbox.nativeElement.offsetWidth); const childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); const childGrid = childGrids[0].query(By.css('igx-hierarchical-grid')).componentInstance; @@ -495,7 +491,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { const childSummaryIndentation = summaryRow.querySelector(SUMMARIES_MARGIN_CLASS); expect(summaryRow.children.length).toEqual(2); - expect(childSummaryIndentation.offsetWidth).toEqual(expander.nativeElement.parentElement.offsetWidth); + expect(childSummaryIndentation.offsetWidth).toEqual(expander.nativeElement.offsetWidth); })); it('should render summaries for column inside a column group.', fakeAsync(/** row toggle rAF */() => { @@ -504,8 +500,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { fixture.componentInstance.rowIsland.childColumns.last.hasSummary = true; fixture.detectChanges(); - const firstRow = hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent; - UIInteractions.clickElement(firstRow.expander); + hierarchicalGrid.dataRowList.toArray()[0].nativeElement.children[0].click(); fixture.detectChanges(); const childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); @@ -525,11 +520,12 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { fixture.detectChanges(); expect(hierarchicalGrid.verticalScrollContainer.igxForOf.length).toEqual(15); - UIInteractions.clickElement((hierarchicalGrid.dataRowList.toArray()[1] as IgxHierarchicalRowComponent).expander); + + hierarchicalGrid.dataRowList.toArray()[1].nativeElement.children[0].click(); fixture.detectChanges(); expect(hierarchicalGrid.verticalScrollContainer.igxForOf.length).toEqual(16); - UIInteractions.clickElement((hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent).expander); + hierarchicalGrid.dataRowList.toArray()[0].nativeElement.children[0].click(); fixture.detectChanges(); expect(hierarchicalGrid.verticalScrollContainer.igxForOf.length).toEqual(17); @@ -545,9 +541,9 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { hierarchicalGrid.reflow(); fixture.detectChanges(); - UIInteractions.clickElement((hierarchicalGrid.dataRowList.toArray()[1] as IgxHierarchicalRowComponent).expander); + hierarchicalGrid.dataRowList.toArray()[1].nativeElement.children[0].click(); fixture.detectChanges(); - UIInteractions.clickElement((hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent).expander); + hierarchicalGrid.dataRowList.toArray()[0].nativeElement.children[0].click(); fixture.detectChanges(); expect((hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent).expanded).toBeTruthy(); @@ -601,7 +597,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { expect(hierarchicalGrid.hasVerticalSroll()).toBeFalsy(); // expand first - UIInteractions.clickElement((hierarchicalGrid.getRowByKey('0') as IgxHierarchicalRowComponent).expander); + hierarchicalGrid.getRowByKey('0').nativeElement.children[0].click(); await wait(30); fixture.detectChanges(); @@ -620,7 +616,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { expect(lastRow.index).toBe(5); expect(lastRow.rowData).toBe(fixture.componentInstance.data[4]); - UIInteractions.clickElement((hierarchicalGrid.getRowByKey('1') as IgxHierarchicalRowComponent).expander); + hierarchicalGrid.getRowByKey('1').nativeElement.children[0].click(); await wait(30); fixture.detectChanges(); hierarchicalGrid.verticalScrollContainer.scrollTo(hierarchicalGrid.verticalScrollContainer.igxForOf.length - 1); @@ -635,7 +631,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { expect(lastRow.index).toBe(6); expect(lastRow.rowData).toBe(fixture.componentInstance.data[4]); - UIInteractions.clickElement((hierarchicalGrid.getRowByKey('2') as IgxHierarchicalRowComponent).expander); + hierarchicalGrid.getRowByKey('2').nativeElement.children[0].click(); await wait(30); fixture.detectChanges(); hierarchicalGrid.verticalScrollContainer.scrollTo(hierarchicalGrid.verticalScrollContainer.igxForOf.length - 1); @@ -650,7 +646,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { expect(lastRow.index).toBe(7); expect(lastRow.rowData).toBe(fixture.componentInstance.data[4]); - UIInteractions.clickElement((hierarchicalGrid.getRowByKey('3') as IgxHierarchicalRowComponent).expander); + hierarchicalGrid.getRowByKey('3').nativeElement.children[0].click(); await wait(30); fixture.detectChanges(); hierarchicalGrid.verticalScrollContainer.scrollTo(hierarchicalGrid.verticalScrollContainer.igxForOf.length - 1); @@ -665,7 +661,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { expect(lastRow.index).toBe(8); expect(lastRow.rowData).toBe(fixture.componentInstance.data[4]); - UIInteractions.clickElement((hierarchicalGrid.getRowByKey('4') as IgxHierarchicalRowComponent).expander); + hierarchicalGrid.getRowByKey('4').nativeElement.children[0].click(); await wait(30); fixture.detectChanges(); hierarchicalGrid.verticalScrollContainer.scrollTo(hierarchicalGrid.verticalScrollContainer.igxForOf.length - 1); @@ -691,7 +687,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { expect(hierarchicalGrid.hasVerticalSroll()).toBeFalsy(); // expand row - UIInteractions.clickElement((hierarchicalGrid.dataRowList.toArray()[1] as IgxHierarchicalRowComponent).expander); + hierarchicalGrid.dataRowList.toArray()[1].nativeElement.children[0].click(); fixture.detectChanges(); await wait(30); fixture.detectChanges(); @@ -721,7 +717,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { describe('Toolbar', () => { it('should be displayed correctly for child layout and hiding should apply to the correct child.', fakeAsync(/** row toggle rAF */() => { - UIInteractions.clickElement((hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent).expander); + hierarchicalGrid.dataRowList.toArray()[0].nativeElement.children[0].click(); fixture.detectChanges(); const childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); @@ -807,7 +803,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { it('should be displayed correctly for child layout and pinning should apply to the correct child.', fakeAsync(/** row toggle rAF */() => { - UIInteractions.clickElement((hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent).expander); + hierarchicalGrid.dataRowList.toArray()[0].nativeElement.children[0].click(); fixture.detectChanges(); const childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); @@ -853,7 +849,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { fixture = TestBed.createComponent(IgxHierarchicalGridTestCustomToolbarComponent); fixture.detectChanges(); hierarchicalGrid = fixture.componentInstance.hgrid; - UIInteractions.clickElement((hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent).expander); + hierarchicalGrid.dataRowList.toArray()[0].nativeElement.children[0].click(); const toolbars = fixture.debugElement.queryAll(By.css('igx-grid-toolbar')); expect(toolbars.length).toEqual(3); @@ -874,7 +870,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { describe('Moving', () => { it('should not be possible to drag move a column from another grid.', (async() => { - UIInteractions.clickElement((hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent).expander); + hierarchicalGrid.dataRowList.toArray()[0].nativeElement.children[0].click(); fixture.detectChanges(); const childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); @@ -920,7 +916,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => { describe('Pinning', () => { it('should be possible by templating the header and getting column reference for child grid', (async() => { hierarchicalGrid = fixture.componentInstance.hgrid; - UIInteractions.clickElement((hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent).expander); + hierarchicalGrid.dataRowList.toArray()[0].nativeElement.children[0].click(); fixture.detectChanges(); const childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row')); diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.virtualization.spec.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.virtualization.spec.ts index ffd61fb3b5e..b6f680ae4e4 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.virtualization.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.virtualization.spec.ts @@ -35,7 +35,7 @@ describe('IgxHierarchicalGrid Virtualization #hGrid', () => { resizeObserverIgnoreError(); const firstRow = hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent; // first child of the row should expand indicator - UIInteractions.clickElement(firstRow.expander); + firstRow.nativeElement.children[0].click(); fixture.detectChanges(); expect(firstRow.expanded).toBeTruthy(); const verticalScroll = fixture.componentInstance.hgrid.verticalScrollContainer; @@ -58,9 +58,9 @@ describe('IgxHierarchicalGrid Virtualization #hGrid', () => { }); it('Should retain child scroll position when expanding and collapsing through rows', async () => { - const firstRow = hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent; + const firstRow = hierarchicalGrid.dataRowList.toArray()[0]; // first child of the row should expand indicator - UIInteractions.clickElement(firstRow.expander); + firstRow.nativeElement.children[0].click(); fixture.detectChanges(); const childGrid = hierarchicalGrid.hgridAPI.getChildGrids(false)[0]; @@ -88,9 +88,9 @@ describe('IgxHierarchicalGrid Virtualization #hGrid', () => { it('Should retain child grid states (scroll position, selection, filtering, paging etc.) when scrolling', async () => { setupHierarchicalGridScrollDetection(fixture, hierarchicalGrid); - const firstRow = hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent; + const firstRow = hierarchicalGrid.dataRowList.toArray()[0]; // first child of the row should expand indicator - UIInteractions.clickElement(firstRow.expander); + firstRow.nativeElement.children[0].click(); fixture.detectChanges(); const childGrid = hierarchicalGrid.hgridAPI.getChildGrids(false)[0]; @@ -127,12 +127,12 @@ describe('IgxHierarchicalGrid Virtualization #hGrid', () => { }); it('should render correct data for child grid after scrolling and start index changes.', async() => { - const firstRow = hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent; + const firstRow = hierarchicalGrid.dataRowList.toArray()[0]; // first child of the row should expand indicator - UIInteractions.clickElement(firstRow.expander); + firstRow.nativeElement.children[0].click(); fixture.detectChanges(); - const secondRow = hierarchicalGrid.dataRowList.toArray()[1] as IgxHierarchicalRowComponent; - UIInteractions.clickElement(secondRow.expander); + const secondRow = hierarchicalGrid.dataRowList.toArray()[1]; + secondRow.nativeElement.children[0].click(); fixture.detectChanges(); const childGrid1 = hierarchicalGrid.hgridAPI.getChildGrids(false)[0]; @@ -267,8 +267,8 @@ describe('IgxHierarchicalGrid Virtualization #hGrid', () => { it('should update scroll height after expanding/collapsing rows.', async() => { const scrHeight = hierarchicalGrid.verticalScrollContainer.getVerticalScroll().scrollHeight; - const firstRow = hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent; - UIInteractions.clickElement(firstRow.expander); + const firstRow = hierarchicalGrid.dataRowList.toArray()[0]; + UIInteractions.clickElement(firstRow.nativeElement.children[0]); fixture.detectChanges(); await wait(200); const childGrid1 = hierarchicalGrid.hgridAPI.getChildGrids(false)[0]; @@ -297,7 +297,7 @@ it('should update scroll height after expanding/collapsing row in a nested child let scrHeight = hierarchicalGrid.verticalScrollContainer.getVerticalScroll().scrollHeight; expect(scrHeight).toBe(0); - UIInteractions.clickElement((hierarchicalGrid.dataRowList.toArray()[2] as IgxHierarchicalRowComponent).expander); + hierarchicalGrid.dataRowList.toArray()[2].nativeElement.children[0].click(); await wait(100); fixture.detectChanges(); hierarchicalGrid.verticalScrollContainer.scrollNext(); @@ -309,14 +309,14 @@ it('should update scroll height after expanding/collapsing row in a nested child expect(scrHeight).toBe(3 * 51 + childGrid1.nativeElement.closest('.igx-grid__tr-container').offsetHeight - 1); // expand - UIInteractions.clickElement(childGrid1.dataRowList.toArray()[0].expander); + childGrid1.dataRowList.toArray()[0].nativeElement.children[0].click(); await wait(100); fixture.detectChanges(); scrHeight = hierarchicalGrid.verticalScrollContainer.getVerticalScroll().scrollHeight; expect(scrHeight).toBe(3 * 51 + childGrid1.nativeElement.closest('.igx-grid__tr-container').offsetHeight - 1); // collapse - UIInteractions.clickElement(childGrid1.dataRowList.toArray()[0].expander); + childGrid1.dataRowList.toArray()[0].nativeElement.children[0].click(); await wait(100); fixture.detectChanges(); scrHeight = hierarchicalGrid.verticalScrollContainer.getVerticalScroll().scrollHeight; @@ -326,8 +326,8 @@ it('should update scroll height after expanding/collapsing row in a nested child it('should update context information correctly for child grid container after scrolling', async() => { resizeObserverIgnoreError(); // expand 3rd row - const row = hierarchicalGrid.dataRowList.toArray()[3] as IgxHierarchicalRowComponent; - UIInteractions.clickElement(row.expander); + const row = hierarchicalGrid.dataRowList.toArray()[3]; + row.nativeElement.children[0].click(); fixture.detectChanges(); // verify index and rowData @@ -362,8 +362,8 @@ it('should update scroll height after expanding/collapsing row in a nested child expect(hierarchicalGrid.verticalScrollContainer.getVerticalScroll().children[0].offsetHeight).toEqual(510); // expand 1st row - const row = hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent; - UIInteractions.clickElement(row.expander); + const row = hierarchicalGrid.dataRowList.toArray()[0]; + row.nativeElement.children[0].click(); fixture.detectChanges(); expect(hierarchicalGrid.verticalScrollContainer.getVerticalScroll().children[0].offsetHeight).toEqual(561); @@ -395,8 +395,8 @@ describe('IgxHierarchicalGrid Virtualization Custom Scenarios #hGrid', () => { expect(hierarchicalGrid.verticalScrollContainer.getVerticalScroll().parentElement.hidden).toBeTruthy(); // expand 1st row - const row = hierarchicalGrid.dataRowList.toArray()[0] as IgxHierarchicalRowComponent; - UIInteractions.clickElement(row.expander); + const row = hierarchicalGrid.dataRowList.toArray()[0]; + row.nativeElement.children[0].click(); fixture.detectChanges(); await wait(200); diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html index cfe02383d28..8f2ffec4d5e 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html @@ -1,13 +1,13 @@ -
+
- expand_more + expand_more - chevron_right + chevron_right
diff --git a/src/app/hierarchical-grid/hierarchical-grid.sample.html b/src/app/hierarchical-grid/hierarchical-grid.sample.html index cf28b2b0c9b..8123a19317d 100644 --- a/src/app/hierarchical-grid/hierarchical-grid.sample.html +++ b/src/app/hierarchical-grid/hierarchical-grid.sample.html @@ -11,16 +11,16 @@

Sample One

- add + add remove - remove + remove - add + add diff --git a/src/app/hierarchical-grid/hierarchical-grid.sample.ts b/src/app/hierarchical-grid/hierarchical-grid.sample.ts index f9998471023..a35d045265a 100644 --- a/src/app/hierarchical-grid/hierarchical-grid.sample.ts +++ b/src/app/hierarchical-grid/hierarchical-grid.sample.ts @@ -44,7 +44,6 @@ export class HierarchicalGridSampleComponent { { label: 'comfortable', selected: this.density === 'comfortable', togglable: true } ]; this.localData = this.generateDataUneven(100, 3); - this.localData[0].childData = null; } generateData(count: number, level: number) { @@ -102,22 +101,6 @@ export class HierarchicalGridSampleComponent { this.density = this.displayDensities[event.index].label; } - cellClick($evt: IGridCellEventArgs) { - console.log('Cell Click', $evt); - console.log($evt); - } - - isRecordExpandable(rowData) { - return !!rowData.childData; - } - - expandAll(hgrid) { - hgrid.hierarchicalState = hgrid.data.filter(x => this.isRecordExpandable(x)) - .map((rec) => { - return { rowID: hgrid.primaryKey ? rec[hgrid.primaryKey] : rec }; - }); - } - public LoadMoreColumns() { this.columns = ['Col1', 'Col2', 'Col3']; this.childColumns = ['ChildCol1', 'ChildCol2']; From 65fcd45559367c177fd584c21dc6d95757f98875 Mon Sep 17 00:00:00 2001 From: MKirova Date: Tue, 3 Sep 2019 18:17:02 +0300 Subject: [PATCH 15/17] feat(HierarchicalGrid): Adding hasChildrenKey Input for HierarchicalGrid and RowIslands. --- .../hierarchical-grid-base.component.ts | 3 +++ .../hierarchical-grid.component.ts | 9 +++++++++ .../hierarchical-row.component.html | 5 +++++ .../hierarchical-grid/hierarchical-row.component.ts | 13 +++++++++++++ .../hierarchical-grid/hierarchical-grid.sample.html | 2 +- .../hierarchical-grid/hierarchical-grid.sample.ts | 8 ++++++-- 6 files changed, 37 insertions(+), 3 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-base.component.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-base.component.ts index 52a3677698f..8e1506a3ab4 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-base.component.ts @@ -46,6 +46,9 @@ export abstract class IgxHierarchicalGridBaseComponent extends IgxGridBaseCompon @Input() public expandChildren: boolean; + @Input() + public hasChildrenKey: string; + /** * @hidden */ diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts index 5fad08a62df..90e5c5a2e99 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts @@ -132,6 +132,12 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseCompone return this._hierarchicalState; } public set hierarchicalState(val) { + if (this.hasChildrenKey) { + val = val.filter(item => { + const rec = this.primaryKey ? this.data.find(x => x[this.primaryKey]=== item.rowID) : item.rowID; + return rec[this.hasChildrenKey]; + }); + } this._hierarchicalState = val; if (this.parent) { this.notifyChanges(true); @@ -376,6 +382,9 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseCompone this.rowCollapsedIndicatorTemplate = this.rootGrid.rowCollapsedIndicatorTemplate; this.headerCollapseIndicatorTemplate = this.rootGrid.headerCollapseIndicatorTemplate; this.headerExpandIndicatorTemplate = this.rootGrid.headerExpandIndicatorTemplate; + this.hasChildrenKey = this.parentIsland ? + this.parentIsland.hasChildrenKey || this.rootGrid.hasChildrenKey : + this.rootGrid.hasChildrenKey; } private updateSizes() { diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html index 8f2ffec4d5e..c9db0bb4712 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html @@ -9,6 +9,11 @@ chevron_right + + + + +
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.ts index ff4d54f4b57..db9325257f5 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.ts @@ -44,6 +44,12 @@ export class IgxHierarchicalRowComponent extends IgxRowComponent; + /** + * @hidden + */ + @ViewChild('defaultEmptyTemplate', { read: TemplateRef, static: true }) + protected defaultEmptyTemplate: TemplateRef; + /** * @hidden */ @@ -107,6 +113,13 @@ export class IgxHierarchicalRowComponent extends IgxRowComponentSample One
- diff --git a/src/app/hierarchical-grid/hierarchical-grid.sample.ts b/src/app/hierarchical-grid/hierarchical-grid.sample.ts index a35d045265a..8c142a05725 100644 --- a/src/app/hierarchical-grid/hierarchical-grid.sample.ts +++ b/src/app/hierarchical-grid/hierarchical-grid.sample.ts @@ -44,6 +44,10 @@ export class HierarchicalGridSampleComponent { { label: 'comfortable', selected: this.density === 'comfortable', togglable: true } ]; this.localData = this.generateDataUneven(100, 3); + this.localData[0].hasChild = false; + this.localData[1].hasChild = false; + this.localData[2].childData[0].hasChild = false; + this.localData[2].childData[1].hasChild = false; } generateData(count: number, level: number) { @@ -56,7 +60,7 @@ export class HierarchicalGridSampleComponent { } prods.push({ ID: i, ChildLevels: currLevel, ProductName: 'Product: A' + i, 'Col1': i, - 'Col2': i, 'Col3': i, childData: children, childData2: children }); + 'Col2': i, 'Col3': i, childData: children, childData2: children, hasChild: true }); } return prods; } @@ -73,7 +77,7 @@ export class HierarchicalGridSampleComponent { } prods.push({ ID: rowID, ChildLevels: currLevel, ProductName: 'Product: A' + i, 'Col1': i, - 'Col2': i, 'Col3': i, childData: children, childData2: children }); + 'Col2': i, 'Col3': i, childData: children, childData2: children, hasChild: true }); } return prods; } From ca373b1c624a2ce7f2a9cd7bbd8c596d65bb66dd Mon Sep 17 00:00:00 2001 From: MKirova Date: Thu, 5 Sep 2019 17:32:03 +0300 Subject: [PATCH 16/17] chore(*): Fixing tests. --- .../src/lib/grids/grid-base.component.ts | 47 ++++++++++--------- 1 file changed, 25 insertions(+), 22 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts index 8b9ec943648..c7ffa00c876 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -265,31 +265,9 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements private _hostWidth; - /** - * The custom template, if any, that should be used when rendering a row expand indicator. - */ - @ContentChild(IgxRowExpandedIndicatorDirective, { read: TemplateRef, static: false }) - public rowExpandedIndicatorTemplate: TemplateRef = null; - /** - * The custom template, if any, that should be used when rendering a row collapse indicator. - */ - @ContentChild(IgxRowCollapsedIndicatorDirective, { read: TemplateRef, static: false }) - public rowCollapsedIndicatorTemplate: TemplateRef = null; - /** - * The custom template, if any, that should be used when rendering a header expand indicator. - */ - @ContentChild(IgxHeaderExpandIndicatorDirective, { read: TemplateRef, static: false }) - public headerExpandIndicatorTemplate: TemplateRef = null; - - /** - * The custom template, if any, that should be used when rendering a header collapse indicator. - */ - @ContentChild(IgxHeaderCollapseIndicatorDirective, { read: TemplateRef, static: false }) - public headerCollapseIndicatorTemplate: TemplateRef = null; - /** * @hidden */ @@ -1939,6 +1917,31 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements @ContentChild(IgxRowEditActionsDirective, { read: TemplateRef, static: false }) public rowEditActions: TemplateRef; + + /** + * The custom template, if any, that should be used when rendering a row expand indicator. + */ + @ContentChild(IgxRowExpandedIndicatorDirective, { read: TemplateRef, static: false }) + public rowExpandedIndicatorTemplate: TemplateRef = null; + + /** + * The custom template, if any, that should be used when rendering a row collapse indicator. + */ + @ContentChild(IgxRowCollapsedIndicatorDirective, { read: TemplateRef, static: false }) + public rowCollapsedIndicatorTemplate: TemplateRef = null; + + /** + * The custom template, if any, that should be used when rendering a header expand indicator. + */ + @ContentChild(IgxHeaderExpandIndicatorDirective, { read: TemplateRef, static: false }) + public headerExpandIndicatorTemplate: TemplateRef = null; + + /** + * The custom template, if any, that should be used when rendering a header collapse indicator. + */ + @ContentChild(IgxHeaderCollapseIndicatorDirective, { read: TemplateRef, static: false }) + public headerCollapseIndicatorTemplate: TemplateRef = null; + /** * @hidden */ From 0ced058b7bd09b5385e031c95e0a2d6f946401bc Mon Sep 17 00:00:00 2001 From: MKirova Date: Thu, 5 Sep 2019 18:35:59 +0300 Subject: [PATCH 17/17] feat(HierarchicalGrid): Adding showExpandAll Input for HierarchicalGrid and RowIslands. --- .../hierarchical-grid-base.component.ts | 3 +++ .../hierarchical-grid.component.html | 8 ++++---- .../hierarchical-grid.component.ts | 19 ++++++++++++++++--- .../hierarchical-grid.spec.ts | 4 ++-- .../hierarchical-grid.sample.html | 18 +++++++++--------- 5 files changed, 34 insertions(+), 18 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-base.component.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-base.component.ts index 8e1506a3ab4..e56c2693e42 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-base.component.ts @@ -49,6 +49,9 @@ export abstract class IgxHierarchicalGridBaseComponent extends IgxGridBaseCompon @Input() public hasChildrenKey: string; + @Input() + public showExpandAll = false; + /** * @hidden */ diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html index e27faae66e2..9f1ccfc2f8e 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html @@ -11,7 +11,7 @@ -
unfold_less + unfold_more - unfold_less + unfold_less
@@ -217,7 +217,7 @@ - 0 && this.hasExpandableChildren; - if (expanded) { - return this.headerExpandIndicatorTemplate || this.defaultExpandedTemplate; - } else { + if (!expanded && this.showExpandAll) { return this.headerCollapseIndicatorTemplate || this.defaultCollapsedTemplate; + } else { + return this.headerExpandIndicatorTemplate || this.defaultExpandedTemplate; } } @@ -663,6 +665,17 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseCompone return height; } + /** + * @hidden + */ + toggleAll() { + const expanded = this.hierarchicalState.length > 0 && this.hasExpandableChildren; + if (!expanded && this.showExpandAll) { + this.expandAll(); + } else { + this.collapseAll(); + } + } /** * Collapses all rows of the current hierarchical grid. diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts index ea4603b4f4c..d08505fb359 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts @@ -1388,11 +1388,11 @@ public toggleChildRI = true; @Component({ template: ` - - + diff --git a/src/app/hierarchical-grid/hierarchical-grid.sample.html b/src/app/hierarchical-grid/hierarchical-grid.sample.html index c622ffa56f2..dcfbfd822f9 100644 --- a/src/app/hierarchical-grid/hierarchical-grid.sample.html +++ b/src/app/hierarchical-grid/hierarchical-grid.sample.html @@ -3,26 +3,26 @@

Sample One

- - - add + + add - - remove + + remove - + remove - + add - + @@ -62,7 +62,7 @@

Sample two

- +