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 e9c98c200ca..3a6738ee2be 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -94,6 +94,8 @@ import { FilterMode, GridKeydownTargetType, GridSelectionMode, GridSummaryPositi import { IgxColumnResizingService } from './grid-column-resizing.service'; import { IgxHeadSelectorDirective, IgxRowSelectorDirective } from './igx-row-selectors.module'; import { DeprecateProperty } from '../core/deprecateDecorators'; +import { IgxRowExpandedIndicatorDirective, IgxRowCollapsedIndicatorDirective, + IgxHeaderExpandIndicatorDirective, IgxHeaderCollapseIndicatorDirective } from './grid/grid.directives'; const MINIMUM_COLUMN_WIDTH = 136; const FILTER_ROW_HEIGHT = 50; @@ -236,6 +238,24 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements private overlayIDs = []; private _hostWidth; + + + + + + /** + * @hidden + */ + @ViewChild('defaultExpandedTemplate', { read: TemplateRef, static: true }) + protected defaultExpandedTemplate: TemplateRef; + +/** + * @hidden + */ + @ViewChild('defaultCollapsedTemplate', { read: TemplateRef, static: true }) + protected defaultCollapsedTemplate: TemplateRef; + + /** * An accessor that sets the resource strings. * By default it uses EN resources. @@ -1872,6 +1892,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 */ 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 cc3e5ffaee9..44fd5dd7cff 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()"> + +
@@ -204,6 +199,20 @@ {{dropAreaMessage}} + + unfold_less + + + + unfold_more + +
{ 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(); @@ -535,7 +535,19 @@ describe('IgxGrid - GroupBy #grid', () => { 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'); + + expect(grid.headerGroupContainer.nativeElement.innerText).toBe('EXPANDED'); + grid.toggleAllGroupRows(); + fix.detectChanges(); + expect(grid.headerGroupContainer.nativeElement.innerText).toBe('COLLAPSED'); + })); it('should have the correct ARIA attributes on the group rows.', fakeAsync(() => { @@ -2670,6 +2682,19 @@ 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/grid/grid.module.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.module.ts index da4ae31216c..884693eead8 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,11 @@ import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { IgxGroupAreaDropDirective, - IgxGroupByRowTemplateDirective + IgxGroupByRowTemplateDirective, + IgxRowExpandedIndicatorDirective, + IgxRowCollapsedIndicatorDirective, + IgxHeaderExpandIndicatorDirective, + IgxHeaderCollapseIndicatorDirective } from './grid.directives'; import { IgxGridComponent } from './grid.component'; import { @@ -29,6 +33,10 @@ import { IgxSelectModule } from '../../select/index'; IgxGridRowComponent, IgxGridGroupByRowComponent, IgxGroupByRowTemplateDirective, + IgxRowExpandedIndicatorDirective, + IgxRowCollapsedIndicatorDirective, + IgxHeaderExpandIndicatorDirective, + IgxHeaderCollapseIndicatorDirective, IgxGroupAreaDropDirective, IgxGridGroupingPipe, IgxGridPagingPipe, @@ -41,6 +49,10 @@ import { IgxSelectModule } from '../../select/index'; IgxGridGroupByRowComponent, IgxGridRowComponent, IgxGroupByRowTemplateDirective, + IgxRowExpandedIndicatorDirective, + IgxRowCollapsedIndicatorDirective, + IgxHeaderExpandIndicatorDirective, + IgxHeaderCollapseIndicatorDirective, 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..052d67ffca9 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 e8bc05e1d4d..e8e96ecc011 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('defaultGroupByExpandedTemplate', { read: TemplateRef, static: true }) + protected defaultGroupByExpandedTemplate: TemplateRef; + + /** + * @hidden + */ + @ViewChild('defaultGroupByCollapsedTemplate', { read: TemplateRef, static: true }) + protected defaultGroupByCollapsedTemplate: TemplateRef; + /** * @hidden */ @@ -177,6 +190,14 @@ export class IgxGridGroupByRowComponent { } } + public get iconTemplate() { + if (this.expanded) { + return this.grid.rowExpandedIndicatorTemplate || this.defaultGroupByExpandedTemplate; + } else { + return this.grid.rowCollapsedIndicatorTemplate || this.defaultGroupByCollapsedTemplate; + } + } + protected get selectionNode(): ISelectionNode { return { row: this.index, 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 3e0d155d5f3..a9bd78310d7 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 @@ -47,6 +47,12 @@ export abstract class IgxHierarchicalGridBaseComponent extends IgxGridBaseCompon @Input() public expandChildren: boolean; + @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 4546352898d..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,13 +11,12 @@ -
- unfold_less +
unfold_more + + + + unfold_less +
@@ -211,7 +217,7 @@ - { + 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); @@ -384,6 +390,15 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseCompone this.rowSelectorsTemplates = this.parentIsland ? this.parentIsland.rowSelectorsTemplates : this.rowSelectorsTemplates; + this.rowExpandedIndicatorTemplate = this.rootGrid.rowExpandedIndicatorTemplate; + 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; + this.showExpandAll = this.parentIsland ? + this.parentIsland.showExpandAll : this.rootGrid.showExpandAll; } private updateSizes() { @@ -614,6 +629,18 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseCompone return currGrid; } + /** + * @hidden + */ + public get iconTemplate() { + const expanded = this.hierarchicalState.length > 0 && this.hasExpandableChildren; + if (!expanded && this.showExpandAll) { + return this.headerCollapseIndicatorTemplate || this.defaultCollapsedTemplate; + } else { + return this.headerExpandIndicatorTemplate || this.defaultExpandedTemplate; + } + } + /** * @hidden */ @@ -645,10 +672,41 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseCompone /** * @hidden */ - public collapseAllRows() { + 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. + * ```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 1eaa0e12a8b..c3696959a5b 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 @@ -469,9 +469,10 @@ 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; + 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.headerSelectorContainer; 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 4ff2468bbe4..c7dfce94705 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 @@ -44,14 +44,14 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => { 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 */() => { @@ -71,11 +71,11 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => { 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 */() => { @@ -101,6 +101,7 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => { 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); @@ -1128,6 +1129,61 @@ describe('IgxHierarchicalGrid Runtime Row Island change Scenarios #hGrid', () => }); +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', async() => { + 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'); + } + + 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); + fixture.detectChanges(); + expect((hierarchicalGrid as any).headerHierarchyExpander.nativeElement.innerText).toBe('COLLAPSED'); + }); +}); + @Component({ template: ` + + + + + + + + + + EXPANDED + + + COLLAPSED + + + COLLAPSED + + + EXPANDED + + ` +}) +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 b38f3c43677..4f035dbfc07 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,19 @@ -
- 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 f758646dbc3..e5931a6aadf 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 @@ -6,7 +6,8 @@ import { ElementRef, ViewChildren, QueryList, - ViewChild + ViewChild, + TemplateRef } from '@angular/core'; import { IgxHierarchicalGridComponent } from './hierarchical-grid.component'; import { IgxRowComponent } from '../row.component'; @@ -34,6 +35,24 @@ export class IgxHierarchicalRowComponent extends IgxRowComponent; + + /** + * @hidden + */ + @ViewChild('defaultEmptyTemplate', { read: TemplateRef, static: true }) + protected defaultEmptyTemplate: TemplateRef; + + /** + * @hidden + */ + @ViewChild('defaultCollapsedTemplate', { read: TemplateRef, static: true }) + protected defaultCollapsedTemplate: TemplateRef; + /** * @hidden */ @@ -103,6 +122,24 @@ 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 152f48f76c9..9a278525193 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'; @@ -57,6 +58,18 @@ export class IgxTreeGridCellComponent extends IgxGridCellComponent implements On @ViewChild('defaultContentElement', { read: ElementRef, static: false }) public defaultContentElement: ElementRef; + /** + * @hidden + */ + @ViewChild('defaultExpandedTemplate', { read: TemplateRef, static: true }) + protected defaultExpandedTemplate: TemplateRef; + + /** + * @hidden + */ + @ViewChild('defaultCollapsedTemplate', { read: TemplateRef, static: true }) + protected defaultCollapsedTemplate: TemplateRef; + /** * @hidden */ @@ -109,4 +122,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.rowExpandedIndicatorTemplate || this.defaultExpandedTemplate; + } else { + return this.grid.rowCollapsedIndicatorTemplate || this.defaultCollapsedTemplate; + } + } } 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 24a0051d757..71807050f37 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'; import { resizeObserverIgnoreError } from '../../test-utils/helper-utils.spec'; import { GridFunctions } from '../../test-utils/grid-functions.spec'; import { GridSelectionMode } from '../types'; @@ -1376,6 +1378,44 @@ describe('Row editing expanding/collapsing #tGrid', () => { }));*/ }); +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 0f29d53dc7e..25fd0d69115 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 @@ -774,3 +774,24 @@ export class IgxTreeGridCustomRowSelectorsComponent implements OnInit { headContext.selected ? this.treeGrid.deselectAllRows() : this.treeGrid.selectAllRows(); } } + +@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 ec1b7d55073..f18a55bdf9a 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 @@ -240,13 +240,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') { diff --git a/src/app/hierarchical-grid/hierarchical-grid.sample.html b/src/app/hierarchical-grid/hierarchical-grid.sample.html index 74b7a7bff3d..dcfbfd822f9 100644 --- a/src/app/hierarchical-grid/hierarchical-grid.sample.html +++ b/src/app/hierarchical-grid/hierarchical-grid.sample.html @@ -3,15 +3,26 @@

Sample One

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

Sample two

- + diff --git a/src/app/hierarchical-grid/hierarchical-grid.sample.ts b/src/app/hierarchical-grid/hierarchical-grid.sample.ts index 417a6d10775..2f0cf3bb2cd 100644 --- a/src/app/hierarchical-grid/hierarchical-grid.sample.ts +++ b/src/app/hierarchical-grid/hierarchical-grid.sample.ts @@ -47,6 +47,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) { @@ -89,7 +93,8 @@ export class HierarchicalGridSampleComponent { Col2: i, Col3: i, childData: children, - childData2: children + childData2: children, + hasChild: true }); } return prods;