Skip to content

Commit 3380c6e

Browse files
mpavlinovmpavlinov
authored
Merge pull request #4932 from IgniteUI/nrobakova/fix-issue-4906
Reset chips area when resizing the window
2 parents cf5978c + 517c062 commit 3380c6e

File tree

3 files changed

+216
-150
lines changed

3 files changed

+216
-150
lines changed

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

+11
Original file line numberDiff line numberDiff line change
@@ -717,6 +717,17 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
717717
}
718718
}
719719

720+
/**
721+
* @hidden
722+
* Resets the chips area
723+
* @memberof IgxGridFilteringRowComponent
724+
*/
725+
public resetChipsArea() {
726+
this.chipAreaScrollOffset = 0;
727+
this.transform(this.chipAreaScrollOffset);
728+
this.showHideArrowButtons();
729+
}
730+
720731
private transform(offset: number) {
721732
requestAnimationFrame(() => {
722733
this.chipsArea.element.nativeElement.style.transform = `translate(${offset}px)`;

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

+90-86
Original file line numberDiff line numberDiff line change
@@ -1514,10 +1514,10 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
15141514
@Output()
15151515
public onGridKeydown = new EventEmitter<IGridKeydownEventArgs>();
15161516

1517-
/**
1518-
* Emitted when start dragging a row.
1519-
* Return the dragged row.
1520-
*/
1517+
/**
1518+
* Emitted when start dragging a row.
1519+
* Return the dragged row.
1520+
*/
15211521
@Output()
15221522
public onRowDragStart = new EventEmitter<IRowDragStartEventArgs>();
15231523

@@ -1718,9 +1718,9 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
17181718
@ViewChild('verticalScrollContainer', { read: IgxGridForOfDirective })
17191719
public verticalScrollContainer: IgxGridForOfDirective<any>;
17201720

1721-
/**
1722-
* @hidden
1723-
*/
1721+
/**
1722+
* @hidden
1723+
*/
17241724
@ViewChild('verticalScrollHolder', { read: IgxGridForOfDirective })
17251725
public verticalScroll: IgxGridForOfDirective<any>;
17261726

@@ -2716,8 +2716,8 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
27162716
this._derivePossibleHeight();
27172717

27182718
this.columnList.changes
2719-
.pipe(takeUntil(this.destroy$))
2720-
.subscribe((change: QueryList<IgxColumnComponent>) => { this.onColumnsChanged(change); });
2719+
.pipe(takeUntil(this.destroy$))
2720+
.subscribe((change: QueryList<IgxColumnComponent>) => { this.onColumnsChanged(change); });
27212721
}
27222722

27232723
/**
@@ -4100,7 +4100,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
41004100

41014101
if (this.isPercentHeight) {
41024102
/*height in %*/
4103-
if (computed.getPropertyValue('height').indexOf('%') === -1 ) {
4103+
if (computed.getPropertyValue('height').indexOf('%') === -1) {
41044104
gridHeight = parseInt(computed.getPropertyValue('height'), 10);
41054105
} else {
41064106
return this.defaultTargetBodyHeight;
@@ -4109,10 +4109,10 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
41094109
gridHeight = parseInt(this._height, 10);
41104110
}
41114111
const height = Math.abs(gridHeight - toolbarHeight -
4112-
this.theadRow.nativeElement.offsetHeight -
4113-
this.summariesHeight - pagingHeight -
4114-
groupAreaHeight - footerBordersAndScrollbars -
4115-
this.scr.nativeElement.clientHeight);
4112+
this.theadRow.nativeElement.offsetHeight -
4113+
this.summariesHeight - pagingHeight -
4114+
groupAreaHeight - footerBordersAndScrollbars -
4115+
this.scr.nativeElement.clientHeight);
41164116

41174117
if (height === 0 || isNaN(gridHeight)) {
41184118
const bodyHeight = this.defaultTargetBodyHeight;
@@ -4213,7 +4213,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
42134213

42144214

42154215
if (!width) {
4216-
width = this.columnList.reduce((sum, item) => sum + parseInt((item.width || item.defaultWidth), 10), 0);
4216+
width = this.columnList.reduce((sum, item) => sum + parseInt((item.width || item.defaultWidth), 10), 0);
42174217
}
42184218

42194219
if (this.hasVerticalSroll()) {
@@ -4230,8 +4230,8 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
42304230
if (!this._ngAfterViewInitPassed) { return false; }
42314231
const isScrollable = this.verticalScrollContainer.isScrollable();
42324232
return !!(this.calcWidth && this.verticalScrollContainer.igxForOf &&
4233-
this.verticalScrollContainer.igxForOf.length > 0 &&
4234-
isScrollable);
4233+
this.verticalScrollContainer.igxForOf.length > 0 &&
4234+
isScrollable);
42354235
}
42364236

42374237
/**
@@ -4293,6 +4293,10 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
42934293
this.repositionRowEditingOverlay(this.rowInEditMode);
42944294
}
42954295

4296+
if (this.filteringService.isFilterRowVisible) {
4297+
this.filteringRow.resetChipsArea();
4298+
}
4299+
42964300
this.cdr.detectChanges();
42974301
this.resetCaches();
42984302
// in case scrollbar has appeared recalc to size correctly.
@@ -4464,9 +4468,9 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
44644468
this.columnList.forEach((col) => {
44654469
if (col.columnLayout) {
44664470
const layoutSize = col.children ?
4467-
col.children.reduce((acc, val) => Math.max(val.rowStart + val.gridRowSpan - 1, acc), 1) :
4468-
1;
4469-
this._multiRowLayoutRowSize = Math.max(layoutSize, this._multiRowLayoutRowSize);
4471+
col.children.reduce((acc, val) => Math.max(val.rowStart + val.gridRowSpan - 1, acc), 1) :
4472+
1;
4473+
this._multiRowLayoutRowSize = Math.max(layoutSize, this._multiRowLayoutRowSize);
44704474
}
44714475
});
44724476
}
@@ -4771,8 +4775,8 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
47714775

47724776

47734777
setSelection(range: GridSelectionRange): void {
4774-
const startNode = { row: range.rowStart, column: this.columnToVisibleIndex(range.columnStart) };
4775-
const endNode = { row: range.rowEnd, column: this.columnToVisibleIndex(range.columnEnd) };
4778+
const startNode = { row: range.rowStart, column: this.columnToVisibleIndex(range.columnStart) };
4779+
const endNode = { row: range.rowEnd, column: this.columnToVisibleIndex(range.columnEnd) };
47764780

47774781
this.selectionService.pointerState.node = startNode;
47784782
this.selectionService.selectRange(endNode, this.selectionService.pointerState);
@@ -4863,7 +4867,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
48634867
*/
48644868
public navigateTo(rowIndex: number, visibleColIndex = -1, cb: Function = null) {
48654869
if (rowIndex < 0 || rowIndex > this.verticalScrollContainer.igxForOf.length - 1
4866-
|| (visibleColIndex !== -1 && this.columnList.map(col => col.visibleIndex).indexOf(visibleColIndex) === -1)) {
4870+
|| (visibleColIndex !== -1 && this.columnList.map(col => col.visibleIndex).indexOf(visibleColIndex) === -1)) {
48674871
return;
48684872
}
48694873
this.wheelHandler();
@@ -4875,9 +4879,9 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
48754879
if (this.navigation.shouldPerformVerticalScroll(rowIndex)) {
48764880
this.verticalScrollContainer.scrollTo(rowIndex);
48774881
this.verticalScrollContainer.onChunkLoad
4878-
.pipe(first()).subscribe(() => {
4879-
this.executeCallback(rowIndex, visibleColIndex, cb);
4880-
});
4882+
.pipe(first()).subscribe(() => {
4883+
this.executeCallback(rowIndex, visibleColIndex, cb);
4884+
});
48814885
} else {
48824886
this.executeCallback(rowIndex, visibleColIndex, cb);
48834887
}
@@ -4886,89 +4890,89 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
48864890
this.parentVirtDir.onChunkLoad
48874891
.pipe(first())
48884892
.subscribe(() => {
4889-
if (this.navigation.shouldPerformVerticalScroll(rowIndex)) {
4890-
this.verticalScrollContainer.scrollTo(rowIndex);
4891-
this.verticalScrollContainer.onChunkLoad
4892-
.pipe(first()).subscribe(() => {
4893+
if (this.navigation.shouldPerformVerticalScroll(rowIndex)) {
4894+
this.verticalScrollContainer.scrollTo(rowIndex);
4895+
this.verticalScrollContainer.onChunkLoad
4896+
.pipe(first()).subscribe(() => {
4897+
this.executeCallback(rowIndex, visibleColIndex, cb);
4898+
});
4899+
} else {
48934900
this.executeCallback(rowIndex, visibleColIndex, cb);
4894-
});
4895-
} else {
4896-
this.executeCallback(rowIndex, visibleColIndex, cb);
4897-
}
4901+
}
48984902

4899-
});
4903+
});
49004904
this.navigation.horizontalScroll(rowIndex).scrollTo(unpinnedIndex);
49014905
}
49024906
}
49034907

4904-
/**
4905-
* Returns `ICellPosition` which defines the next cell,
4906-
* according to the current position, that match specific criteria.
4907-
* You can pass callback function as a third parameter of `getPreviousCell` method.
4908-
* The callback function accepts IgxColumnComponent as a param
4909-
* ```typescript
4910-
* const nextEditableCellPosition = this.grid.getNextCell(0, 3, (column) => column.editable);
4911-
* ```
4912-
* @memberof IgxGridBaseComponent
4913-
*/
4908+
/**
4909+
* Returns `ICellPosition` which defines the next cell,
4910+
* according to the current position, that match specific criteria.
4911+
* You can pass callback function as a third parameter of `getPreviousCell` method.
4912+
* The callback function accepts IgxColumnComponent as a param
4913+
* ```typescript
4914+
* const nextEditableCellPosition = this.grid.getNextCell(0, 3, (column) => column.editable);
4915+
* ```
4916+
* @memberof IgxGridBaseComponent
4917+
*/
49144918
public getNextCell(currRowIndex: number, curVisibleColIndex: number,
4915-
callback: (IgxColumnComponent) => boolean = null): ICellPosition {
4919+
callback: (IgxColumnComponent) => boolean = null): ICellPosition {
49164920
const columns = this.columnList.filter(col => !col.columnGroup && col.visibleIndex >= 0);
49174921

49184922
if (!this.isValidPosition(currRowIndex, curVisibleColIndex)) {
4919-
return {rowIndex: currRowIndex, visibleColumnIndex: curVisibleColIndex};
4923+
return { rowIndex: currRowIndex, visibleColumnIndex: curVisibleColIndex };
49204924
}
49214925
const colIndexes = callback ? columns.filter((col) => callback(col)).map(editCol => editCol.visibleIndex).sort((a, b) => a - b) :
4922-
columns.map(editCol => editCol.visibleIndex).sort((a, b) => a - b);
4926+
columns.map(editCol => editCol.visibleIndex).sort((a, b) => a - b);
49234927
const nextCellIndex = colIndexes.find(index => index > curVisibleColIndex);
49244928
if (this.verticalScrollContainer.igxForOf.slice(currRowIndex, currRowIndex + 1)
4925-
.find(rec => !rec.expression && !rec.summaries && !rec.childGridsData) && nextCellIndex !== undefined) {
4926-
return {rowIndex: currRowIndex, visibleColumnIndex: nextCellIndex};
4929+
.find(rec => !rec.expression && !rec.summaries && !rec.childGridsData) && nextCellIndex !== undefined) {
4930+
return { rowIndex: currRowIndex, visibleColumnIndex: nextCellIndex };
49274931
} else {
49284932
if (colIndexes.length === 0 || this.getNextDataRowIndex(currRowIndex) === currRowIndex) {
4929-
return {rowIndex: currRowIndex, visibleColumnIndex: curVisibleColIndex};
4933+
return { rowIndex: currRowIndex, visibleColumnIndex: curVisibleColIndex };
49304934
} else {
4931-
return {rowIndex: this.getNextDataRowIndex(currRowIndex), visibleColumnIndex: colIndexes[0]};
4935+
return { rowIndex: this.getNextDataRowIndex(currRowIndex), visibleColumnIndex: colIndexes[0] };
49324936
}
49334937
}
49344938
}
49354939

4936-
/**
4937-
* Returns `ICellPosition` which defines the previous cell,
4938-
* according to the current position, that match specific criteria.
4939-
* You can pass callback function as a third parameter of `getPreviousCell` method.
4940-
* The callback function accepts IgxColumnComponent as a param
4941-
* ```typescript
4942-
* const previousEditableCellPosition = this.grid.getPreviousCell(0, 3, (column) => column.editable);
4943-
* ```
4944-
* @memberof IgxGridBaseComponent
4945-
*/
4940+
/**
4941+
* Returns `ICellPosition` which defines the previous cell,
4942+
* according to the current position, that match specific criteria.
4943+
* You can pass callback function as a third parameter of `getPreviousCell` method.
4944+
* The callback function accepts IgxColumnComponent as a param
4945+
* ```typescript
4946+
* const previousEditableCellPosition = this.grid.getPreviousCell(0, 3, (column) => column.editable);
4947+
* ```
4948+
* @memberof IgxGridBaseComponent
4949+
*/
49464950
public getPreviousCell(currRowIndex: number, curVisibleColIndex: number,
4947-
callback: (IgxColumnComponent) => boolean = null): ICellPosition {
4948-
const columns = this.columnList.filter(col => !col.columnGroup && col.visibleIndex >= 0);
4951+
callback: (IgxColumnComponent) => boolean = null): ICellPosition {
4952+
const columns = this.columnList.filter(col => !col.columnGroup && col.visibleIndex >= 0);
49494953

49504954
if (!this.isValidPosition(currRowIndex, curVisibleColIndex)) {
4951-
return {rowIndex: currRowIndex, visibleColumnIndex: curVisibleColIndex};
4955+
return { rowIndex: currRowIndex, visibleColumnIndex: curVisibleColIndex };
49524956
}
49534957
const colIndexes = callback ? columns.filter((col) => callback(col)).map(editCol => editCol.visibleIndex).sort((a, b) => b - a) :
4954-
columns.map(editCol => editCol.visibleIndex).sort((a, b) => b - a);
4958+
columns.map(editCol => editCol.visibleIndex).sort((a, b) => b - a);
49554959
const prevCellIndex = colIndexes.find(index => index < curVisibleColIndex);
49564960
if (this.verticalScrollContainer.igxForOf.slice(currRowIndex, currRowIndex + 1)
4957-
.find(rec => !rec.expression && !rec.summaries && !rec.childGridsData) && prevCellIndex !== undefined) {
4958-
return {rowIndex: currRowIndex, visibleColumnIndex: prevCellIndex};
4961+
.find(rec => !rec.expression && !rec.summaries && !rec.childGridsData) && prevCellIndex !== undefined) {
4962+
return { rowIndex: currRowIndex, visibleColumnIndex: prevCellIndex };
49594963
} else {
49604964
if (colIndexes.length === 0 || this.getPrevDataRowIndex(currRowIndex) === currRowIndex) {
4961-
return {rowIndex: currRowIndex, visibleColumnIndex: curVisibleColIndex};
4965+
return { rowIndex: currRowIndex, visibleColumnIndex: curVisibleColIndex };
49624966
} else {
4963-
return {rowIndex: this.getPrevDataRowIndex(currRowIndex), visibleColumnIndex: colIndexes[0]};
4967+
return { rowIndex: this.getPrevDataRowIndex(currRowIndex), visibleColumnIndex: colIndexes[0] };
49644968
}
49654969
}
49664970
}
49674971

49684972
private executeCallback(rowIndex, visibleColIndex = -1, cb: Function = null) {
49694973
if (!cb) { return; }
49704974
let targetType, target;
4971-
const row = this.summariesRowList.filter(s => s.index !== 0).concat(this.rowList.toArray()).find(r => r.index === rowIndex);
4975+
const row = this.summariesRowList.filter(s => s.index !== 0).concat(this.rowList.toArray()).find(r => r.index === rowIndex);
49724976
if (!row) { return; }
49734977
switch (row.nativeElement.tagName.toLowerCase()) {
49744978
case 'igx-grid-groupby-row':
@@ -5002,7 +5006,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
50025006
}
50035007

50045008
private getNextDataRowIndex(currentRowIndex): number {
5005-
if (currentRowIndex === this.verticalScrollContainer.igxForOf.length) {return currentRowIndex; }
5009+
if (currentRowIndex === this.verticalScrollContainer.igxForOf.length) { return currentRowIndex; }
50065010

50075011
const nextRow = this.verticalScrollContainer.igxForOf.slice(currentRowIndex + 1, this.verticalScrollContainer.igxForOf.length)
50085012
.find(rec => !rec.expression && !rec.summaries && !rec.childGridsData);
@@ -5015,7 +5019,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
50155019
if (rows < 1 || cols < 1) { return false; }
50165020
if (rowIndex > -1 && rowIndex < this.verticalScrollContainer.igxForOf.length &&
50175021
colIndex > - 1 && colIndex <= this.unpinnedColumns[this.unpinnedColumns.length - 1].visibleIndex) {
5018-
return true;
5022+
return true;
50195023
}
50205024
return false;
50215025
}
@@ -5025,10 +5029,10 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
50255029
*/
50265030
public wheelHandler(isScroll = false) {
50275031
if (document.activeElement &&
5028-
// tslint:disable-next-line:no-bitwise
5032+
// tslint:disable-next-line:no-bitwise
50295033
(document.activeElement.compareDocumentPosition(this.tbody.nativeElement) & Node.DOCUMENT_POSITION_CONTAINS ||
5030-
// tslint:disable-next-line:no-bitwise
5031-
(document.activeElement.compareDocumentPosition(this.tfoot.nativeElement) & Node.DOCUMENT_POSITION_CONTAINS && isScroll))) {
5034+
// tslint:disable-next-line:no-bitwise
5035+
(document.activeElement.compareDocumentPosition(this.tfoot.nativeElement) & Node.DOCUMENT_POSITION_CONTAINS && isScroll))) {
50325036
(document.activeElement as HTMLElement).blur();
50335037
}
50345038
}
@@ -5092,7 +5096,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
50925096

50935097
if (this.lastSearchInfo.matchInfoCache.length) {
50945098
const matchInfo = this.lastSearchInfo.matchInfoCache[this.lastSearchInfo.activeMatchIndex];
5095-
this.lastSearchInfo = {...this.lastSearchInfo};
5099+
this.lastSearchInfo = { ...this.lastSearchInfo };
50965100

50975101
if (scroll !== false) {
50985102
this.scrollTo(matchInfo.row, matchInfo.column);
@@ -5196,7 +5200,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
51965200
protected scrollTo(row: any | number, column: any | number): void {
51975201
let delayScrolling = false;
51985202

5199-
if (this.paging && typeof(row) !== 'number') {
5203+
if (this.paging && typeof (row) !== 'number') {
52005204
const rowIndex = this.filteredSortedData.indexOf(row);
52015205
const page = Math.floor(rowIndex / this.perPage);
52025206

@@ -5209,11 +5213,11 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
52095213
if (delayScrolling) {
52105214
this.verticalScrollContainer.onDataChanged.pipe(first()).subscribe(() => {
52115215
this.scrollDirective(this.verticalScrollContainer,
5212-
typeof(row) === 'number' ? row : this.verticalScrollContainer.igxForOf.indexOf(row));
5216+
typeof (row) === 'number' ? row : this.verticalScrollContainer.igxForOf.indexOf(row));
52135217
});
52145218
} else {
52155219
this.scrollDirective(this.verticalScrollContainer,
5216-
typeof(row) === 'number' ? row : this.verticalScrollContainer.igxForOf.indexOf(row));
5220+
typeof (row) === 'number' ? row : this.verticalScrollContainer.igxForOf.indexOf(row));
52175221
}
52185222

52195223
this.scrollToHorizontally(column);
@@ -5480,12 +5484,12 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
54805484
}
54815485

54825486
protected _restoreVirtState(row) {
5483-
// check virtualization state of data record added from cache
5484-
// in case state is no longer valid - update it.
5485-
const rowForOf = row.virtDirRow;
5486-
const gridScrLeft = rowForOf.getHorizontalScroll().scrollLeft;
5487-
const left = -parseInt(rowForOf.dc.instance._viewContainer.element.nativeElement.style.left, 10);
5488-
const actualScrollLeft = left + rowForOf.getColumnScrollLeft(rowForOf.state.startIndex);
5487+
// check virtualization state of data record added from cache
5488+
// in case state is no longer valid - update it.
5489+
const rowForOf = row.virtDirRow;
5490+
const gridScrLeft = rowForOf.getHorizontalScroll().scrollLeft;
5491+
const left = -parseInt(rowForOf.dc.instance._viewContainer.element.nativeElement.style.left, 10);
5492+
const actualScrollLeft = left + rowForOf.getColumnScrollLeft(rowForOf.state.startIndex);
54895493
if (gridScrLeft !== actualScrollLeft) {
54905494
rowForOf.onHScroll(gridScrLeft);
54915495
}

0 commit comments

Comments
 (0)