Skip to content

Commit 014c58f

Browse files
zdrawkuzdrawku
authored
Merge branch '8.1.x' into dynamic-rm-mch-master
2 parents 04cf9c6 + 52f0047 commit 014c58f

File tree

10 files changed

+185
-10
lines changed

10 files changed

+185
-10
lines changed

‎projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-date-expression.component.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
#dropdownConditions
33
[maxHeight]="'200px'"
44
[width]="getInputWidth()"
5+
[displayDensity]="displayDensity"
56
(onSelection)="onConditionsChanged($event)">
67
<igx-drop-down-item *ngFor="let condition of conditions" [value]="condition" [selected]="isConditionSelected(condition)">
78
<igx-icon fontSet="filtering-icons" [name]="getCondition(condition).iconName"></igx-icon>

‎projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
#dropdownConditions
33
[maxHeight]="'200px'"
44
[width]="getInputWidth()"
5+
[displayDensity]="displayDensity"
56
(onSelection)="onConditionsChanged($event)">
67
<igx-drop-down-item *ngFor="let condition of conditions" [value]="condition" [selected]="isConditionSelected(condition)">
78
<igx-icon fontSet="filtering-icons" [name]="getCondition(condition).iconName"></igx-icon>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,7 @@ <h4>{{ column.header || column.field }}</h4>
131131
</footer>
132132
</article>
133133

134-
<igx-drop-down [maxHeight]="'397px'" #subMenu (onSelection)="onSubMenuSelection($event)" (onClosed)="onSubMenuClosed()">
134+
<igx-drop-down [maxHeight]="'397px'" [displayDensity]="grid.displayDensity" #subMenu (onSelection)="onSubMenuSelection($event)" (onClosed)="onSubMenuClosed()">
135135
<div>
136136
<igx-drop-down-item
137137
*ngFor="let condition of conditions"

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4110,15 +4110,15 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
41104110
if (!this._height) {
41114111
return null;
41124112
}
4113-
const footerBordersAndScrollbars = this.tfoot.nativeElement.offsetHeight -
4114-
this.tfoot.nativeElement.clientHeight;
4113+
const footerHeight = this.summariesHeight || this.tfoot.nativeElement.offsetHeight -
4114+
this.tfoot.nativeElement.clientHeight;
41154115
let gridHeight;
41164116
const computed = this.document.defaultView.getComputedStyle(this.nativeElement);
41174117
const toolbarHeight = this.getToolbarHeight();
41184118
const pagingHeight = this.getPagingHeight();
41194119
const groupAreaHeight = this.getGroupAreaHeight();
41204120
const renderedHeight = toolbarHeight + this.theadRow.nativeElement.offsetHeight +
4121-
this.summariesHeight + pagingHeight + groupAreaHeight + footerBordersAndScrollbars +
4121+
footerHeight + pagingHeight + groupAreaHeight +
41224122
this.scr.nativeElement.clientHeight;
41234123

41244124
if (this.isPercentHeight) {

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

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4277,6 +4277,149 @@ describe('IgxGrid - Filtering actions - Excel style filtering', () => {
42774277
fix.detectChanges();
42784278
}));
42794279

4280+
it('display density is properly applied on the excel style cascade dropdown', fakeAsync(() => {
4281+
const gridNativeElement = fix.debugElement.query(By.css('igx-grid')).nativeElement;
4282+
4283+
// Open excel style cascade operators dropdown and verify its display density
4284+
GridFunctions.clickExcelFilterIcon(fix, 'ProductName');
4285+
fix.detectChanges();
4286+
GridFunctions.clickExcelFilterCascadeButton(fix);
4287+
fix.detectChanges();
4288+
verifyGridSubmenuDisplayDensity(gridNativeElement, DisplayDensity.comfortable);
4289+
GridFunctions.clickCancelExcelStyleFiltering(fix);
4290+
fix.detectChanges();
4291+
4292+
grid.displayDensity = DisplayDensity.cosy;
4293+
tick(200);
4294+
fix.detectChanges();
4295+
4296+
// Open excel style cascade operators dropdown and verify its display density
4297+
GridFunctions.clickExcelFilterIcon(fix, 'ProductName');
4298+
fix.detectChanges();
4299+
GridFunctions.clickExcelFilterCascadeButton(fix);
4300+
fix.detectChanges();
4301+
verifyGridSubmenuDisplayDensity(gridNativeElement, DisplayDensity.cosy);
4302+
GridFunctions.clickCancelExcelStyleFiltering(fix);
4303+
fix.detectChanges();
4304+
4305+
grid.displayDensity = DisplayDensity.compact;
4306+
tick(200);
4307+
fix.detectChanges();
4308+
4309+
// Open excel style cascade operators dropdown and verify its display density
4310+
GridFunctions.clickExcelFilterIcon(fix, 'ProductName');
4311+
fix.detectChanges();
4312+
GridFunctions.clickExcelFilterCascadeButton(fix);
4313+
fix.detectChanges();
4314+
verifyGridSubmenuDisplayDensity(gridNativeElement, DisplayDensity.compact);
4315+
GridFunctions.clickCancelExcelStyleFiltering(fix);
4316+
fix.detectChanges();
4317+
}));
4318+
4319+
it('display density is properly applied on the excel custom dialog\'s default expression dropdown',
4320+
fakeAsync(() => {
4321+
const gridNativeElement = fix.debugElement.query(By.css('igx-grid')).nativeElement;
4322+
4323+
// Open excel style custom filtering dialog.
4324+
GridFunctions.clickExcelFilterIcon(fix, 'ProductName');
4325+
fix.detectChanges();
4326+
GridFunctions.clickExcelFilterCascadeButton(fix);
4327+
fix.detectChanges();
4328+
GridFunctions.clickOperatorFromCascadeMenu(fix, 0);
4329+
tick(200);
4330+
fix.detectChanges();
4331+
4332+
// Click the left input to open the operators dropdown and verify its display density.
4333+
let expr = GridFunctions.getExcelCustomFilteringDefaultExpressions(fix)[0];
4334+
let inputs = GridFunctions.sortNativeElementsHorizontally(Array.from(expr.querySelectorAll('input')));
4335+
let conditionsInput = inputs[0];
4336+
conditionsInput.click();
4337+
tick(100);
4338+
fix.detectChanges();
4339+
verifyGridSubmenuDisplayDensity(gridNativeElement, DisplayDensity.comfortable);
4340+
GridFunctions.clickCancelExcelStyleCustomFiltering(fix);
4341+
tick(100);
4342+
fix.detectChanges();
4343+
4344+
// Change display density
4345+
grid.displayDensity = DisplayDensity.cosy;
4346+
tick(200);
4347+
fix.detectChanges();
4348+
4349+
// Open excel style custom filtering dialog.
4350+
GridFunctions.clickExcelFilterIcon(fix, 'ProductName');
4351+
fix.detectChanges();
4352+
GridFunctions.clickExcelFilterCascadeButton(fix);
4353+
fix.detectChanges();
4354+
GridFunctions.clickOperatorFromCascadeMenu(fix, 0);
4355+
tick(200);
4356+
fix.detectChanges();
4357+
4358+
// Click the left input to open the operators dropdown and verify its display density.
4359+
expr = GridFunctions.getExcelCustomFilteringDefaultExpressions(fix)[0];
4360+
inputs = GridFunctions.sortNativeElementsHorizontally(Array.from(expr.querySelectorAll('input')));
4361+
conditionsInput = inputs[0];
4362+
conditionsInput.click();
4363+
tick(100);
4364+
fix.detectChanges();
4365+
verifyGridSubmenuDisplayDensity(gridNativeElement, DisplayDensity.cosy);
4366+
GridFunctions.clickCancelExcelStyleCustomFiltering(fix);
4367+
tick(100);
4368+
fix.detectChanges();
4369+
}));
4370+
4371+
it('display density is properly applied on the excel custom dialog\'s date expression dropdown',
4372+
fakeAsync(() => {
4373+
const gridNativeElement = fix.debugElement.query(By.css('igx-grid')).nativeElement;
4374+
4375+
// Open excel style custom filtering dialog.
4376+
GridFunctions.clickExcelFilterIcon(fix, 'ReleaseDate');
4377+
fix.detectChanges();
4378+
GridFunctions.clickExcelFilterCascadeButton(fix);
4379+
fix.detectChanges();
4380+
GridFunctions.clickOperatorFromCascadeMenu(fix, 0);
4381+
tick(200);
4382+
fix.detectChanges();
4383+
4384+
// Click the left input to open the operators dropdown and verify its display density.
4385+
let expr = GridFunctions.getExcelCustomFilteringDateExpressions(fix)[0];
4386+
let inputs = GridFunctions.sortNativeElementsHorizontally(Array.from(expr.querySelectorAll('input')));
4387+
let conditionsInput = inputs[0];
4388+
conditionsInput.click();
4389+
tick(100);
4390+
fix.detectChanges();
4391+
verifyGridSubmenuDisplayDensity(gridNativeElement, DisplayDensity.comfortable);
4392+
GridFunctions.clickCancelExcelStyleCustomFiltering(fix);
4393+
tick(100);
4394+
fix.detectChanges();
4395+
4396+
// Change display density
4397+
grid.displayDensity = DisplayDensity.cosy;
4398+
tick(200);
4399+
fix.detectChanges();
4400+
4401+
// Open excel style custom filtering dialog.
4402+
GridFunctions.clickExcelFilterIcon(fix, 'ReleaseDate');
4403+
fix.detectChanges();
4404+
GridFunctions.clickExcelFilterCascadeButton(fix);
4405+
fix.detectChanges();
4406+
GridFunctions.clickOperatorFromCascadeMenu(fix, 0);
4407+
tick(200);
4408+
fix.detectChanges();
4409+
4410+
// Click the left input to open the operators dropdown and verify its display density.
4411+
expr = GridFunctions.getExcelCustomFilteringDateExpressions(fix)[0];
4412+
inputs = GridFunctions.sortNativeElementsHorizontally(Array.from(expr.querySelectorAll('input')));
4413+
conditionsInput = inputs[0];
4414+
conditionsInput.click();
4415+
tick(100);
4416+
fix.detectChanges();
4417+
verifyGridSubmenuDisplayDensity(gridNativeElement, DisplayDensity.cosy);
4418+
GridFunctions.clickCancelExcelStyleCustomFiltering(fix);
4419+
tick(100);
4420+
fix.detectChanges();
4421+
}));
4422+
42804423
it('should scroll items in search list correctly', (async () => {
42814424
// Add additional rows as prerequisite for the test
42824425
for (let index = 0; index < 30; index++) {
@@ -5638,6 +5781,17 @@ function verifyExcelCustomFilterDisplayDensity(gridNativeElement: HTMLElement, e
56385781
});
56395782
}
56405783

5784+
function verifyGridSubmenuDisplayDensity(gridNativeElement: HTMLElement, expectedDisplayDensity: DisplayDensity) {
5785+
const outlet = gridNativeElement.querySelector('.igx-grid__outlet');
5786+
const dropdowns = Array.from(outlet.querySelectorAll('.igx-drop-down__list'));
5787+
const visibleDropdown: any = dropdowns.find((d) => !d.classList.contains('igx-toggle--hidden'));
5788+
const dropdownItems = visibleDropdown.querySelectorAll('igx-drop-down-item');
5789+
dropdownItems.forEach((dropdownItem) => {
5790+
expect(dropdownItem.classList.contains(getDropdownItemDensityClass(expectedDisplayDensity))).toBe(true,
5791+
'incorrect dropdown item density');
5792+
});
5793+
}
5794+
56415795
function getListDensityClass(displayDensity: DisplayDensity) {
56425796
let densityClass;
56435797
switch (displayDensity) {
@@ -5672,6 +5826,16 @@ function getButtonDensityClass(displayDensity: DisplayDensity) {
56725826
return densityClass;
56735827
}
56745828

5829+
function getDropdownItemDensityClass(displayDensity: DisplayDensity) {
5830+
let densityClass;
5831+
switch (displayDensity) {
5832+
case DisplayDensity.compact: densityClass = 'igx-drop-down__item--compact'; break;
5833+
case DisplayDensity.cosy: densityClass = 'igx-drop-down__item--cosy'; break;
5834+
default: densityClass = 'igx-drop-down__item'; break;
5835+
}
5836+
return densityClass;
5837+
}
5838+
56755839
function verifyFilteringExpression(operand: IFilteringExpression, fieldName: string, conditionName: string, searchVal: any) {
56765840
expect(operand.fieldName).toBe(fieldName);
56775841
expect(operand.condition.name).toBe(conditionName);

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -174,8 +174,7 @@
174174
</div>
175175

176176
<ng-template #defaultPaginator>
177-
<igx-paginator [displayDensity]="displayDensity" [(page)]="page"
178-
[totalRecords]="filteredData ? filteredData.length : totalRecords" [(perPage)]="perPage">
177+
<igx-paginator [displayDensity]="displayDensity" [(page)]="page" [totalRecords]="totalRecords" [(perPage)]="perPage">
179178
</igx-paginator>
180179
</ng-template>
181180

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4309,7 +4309,7 @@ describe('IgxGrid Component Tests', () => {
43094309
const summaries = fix.debugElement.queryAll(By.css('igx-grid-summary-cell'));
43104310
expect(headers.length).toBe(4);
43114311
expect(summaries.length).toBe(4);
4312-
expect(parseInt(window.getComputedStyle(gridBody.nativeElement).height, 10)).toBe(138);
4312+
expect(parseInt(window.getComputedStyle(gridBody.nativeElement).height, 10)).toBe(139);
43134313
expect(parseInt(window.getComputedStyle(paging.nativeElement).height, 10)).toBe(36);
43144314
});
43154315

‎projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-navigation.service.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -607,14 +607,17 @@ export class IgxHierarchicalGridNavigationService extends IgxGridNavigationServi
607607
const nextIsSiblingChild = !!childRowContainer.nextElementSibling;
608608
let next = childRowContainer.nextElementSibling || nextParentElem;
609609
const verticalScroll = nextParentGrid.verticalScrollContainer.getVerticalScroll();
610+
const parentState = nextParentGrid.verticalScrollContainer.state;
611+
const atLastChunk = parentState.startIndex + parentState.chunkSize ===
612+
nextParentGrid.verticalScrollContainer.igxForOf.length;
610613
if (next) {
611614
if (nextIsSiblingChild) {
612615
this.focusNextChild(next, visibleColumnIndex, nextParentGrid);
613616
} else {
614617
this.focusNextRow(next, visibleColumnIndex, grid || nextParentGrid);
615618
}
616619
} else if (verticalScroll.scrollTop !==
617-
verticalScroll.scrollHeight - nextParentGrid.verticalScrollContainer.igxForContainerSize) {
620+
verticalScroll.scrollHeight - nextParentGrid.verticalScrollContainer.igxForContainerSize && !atLastChunk) {
618621
this.scrollGrid(nextParentGrid, 'next',
619622
() => {
620623
nextParentElem = parentInfo.nextElement;

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -147,8 +147,7 @@
147147
</div>
148148

149149
<ng-template #defaultPaginator>
150-
<igx-paginator [displayDensity]="displayDensity" [(page)]="page"
151-
[totalRecords]="filteredData ? filteredData.length : totalRecords" [(perPage)]="perPage">
150+
<igx-paginator [displayDensity]="displayDensity" [(page)]="page" [totalRecords]="totalRecords" [(perPage)]="perPage">
152151
</igx-paginator>
153152
</ng-template>
154153

‎projects/igniteui-angular/src/lib/test-utils/grid-functions.spec.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -511,6 +511,14 @@ export class GridFunctions {
511511
applyButton.click();
512512
}
513513

514+
public static clickCancelExcelStyleCustomFiltering(fix: ComponentFixture<any>) {
515+
const gridNativeElement = fix.debugElement.query(By.css('igx-grid')).nativeElement;
516+
const customFilterMenu = gridNativeElement.querySelector('.igx-excel-filter__secondary');
517+
const flatButtons = Array.from(customFilterMenu.querySelectorAll('.igx-button--flat'));
518+
const cancelButton: any = flatButtons.find((rb: any) => rb.innerText === 'cancel');
519+
cancelButton.click();
520+
}
521+
514522
public static clickAddFilterExcelStyleCustomFiltering(fix: ComponentFixture<any>) {
515523
const gridNativeElement = fix.debugElement.query(By.css('igx-grid')).nativeElement;
516524
const customFilterMenu = gridNativeElement.querySelector('.igx-excel-filter__secondary');

0 commit comments

Comments
 (0)