Skip to content

Commit aaf3662

Browse files
nrobakovanrobakova
committed
fix(grid): Reset chips area when resizing the window #4906 
1 parent adac702 commit aaf3662

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

Lines changed: 11 additions & 0 deletions
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

Lines changed: 90 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1510,10 +1510,10 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
15101510
@Output()
15111511
public onGridKeydown = new EventEmitter<IGridKeydownEventArgs>();
15121512

1513-
/**
1514-
* Emitted when start dragging a row.
1515-
* Return the dragged row.
1516-
*/
1513+
/**
1514+
* Emitted when start dragging a row.
1515+
* Return the dragged row.
1516+
*/
15171517
@Output()
15181518
public onRowDragStart = new EventEmitter<IRowDragStartEventArgs>();
15191519

@@ -1714,9 +1714,9 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
17141714
@ViewChild('verticalScrollContainer', { read: IgxGridForOfDirective })
17151715
public verticalScrollContainer: IgxGridForOfDirective<any>;
17161716

1717-
/**
1718-
* @hidden
1719-
*/
1717+
/**
1718+
* @hidden
1719+
*/
17201720
@ViewChild('verticalScrollHolder', { read: IgxGridForOfDirective })
17211721
public verticalScroll: IgxGridForOfDirective<any>;
17221722

@@ -2712,8 +2712,8 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
27122712
this._derivePossibleHeight();
27132713

27142714
this.columnList.changes
2715-
.pipe(takeUntil(this.destroy$))
2716-
.subscribe((change: QueryList<IgxColumnComponent>) => { this.onColumnsChanged(change); });
2715+
.pipe(takeUntil(this.destroy$))
2716+
.subscribe((change: QueryList<IgxColumnComponent>) => { this.onColumnsChanged(change); });
27172717
}
27182718

27192719
/**
@@ -4096,7 +4096,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
40964096

40974097
if (this.isPercentHeight) {
40984098
/*height in %*/
4099-
if (computed.getPropertyValue('height').indexOf('%') === -1 ) {
4099+
if (computed.getPropertyValue('height').indexOf('%') === -1) {
41004100
gridHeight = parseInt(computed.getPropertyValue('height'), 10);
41014101
} else {
41024102
return this.defaultTargetBodyHeight;
@@ -4105,10 +4105,10 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
41054105
gridHeight = parseInt(this._height, 10);
41064106
}
41074107
const height = Math.abs(gridHeight - toolbarHeight -
4108-
this.theadRow.nativeElement.offsetHeight -
4109-
this.summariesHeight - pagingHeight -
4110-
groupAreaHeight - footerBordersAndScrollbars -
4111-
this.scr.nativeElement.clientHeight);
4108+
this.theadRow.nativeElement.offsetHeight -
4109+
this.summariesHeight - pagingHeight -
4110+
groupAreaHeight - footerBordersAndScrollbars -
4111+
this.scr.nativeElement.clientHeight);
41124112

41134113
if (height === 0 || isNaN(gridHeight)) {
41144114
const bodyHeight = this.defaultTargetBodyHeight;
@@ -4209,7 +4209,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
42094209

42104210

42114211
if (!width) {
4212-
width = this.columnList.reduce((sum, item) => sum + parseInt((item.width || item.defaultWidth), 10), 0);
4212+
width = this.columnList.reduce((sum, item) => sum + parseInt((item.width || item.defaultWidth), 10), 0);
42134213
}
42144214

42154215
if (this.hasVerticalSroll()) {
@@ -4226,8 +4226,8 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
42264226
if (!this._ngAfterViewInitPassed) { return false; }
42274227
const isScrollable = this.verticalScrollContainer.isScrollable();
42284228
return !!(this.calcWidth && this.verticalScrollContainer.igxForOf &&
4229-
this.verticalScrollContainer.igxForOf.length > 0 &&
4230-
isScrollable);
4229+
this.verticalScrollContainer.igxForOf.length > 0 &&
4230+
isScrollable);
42314231
}
42324232

42334233
/**
@@ -4289,6 +4289,10 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
42894289
this.repositionRowEditingOverlay(this.rowInEditMode);
42904290
}
42914291

4292+
if (this.filteringService.isFilterRowVisible) {
4293+
this.filteringRow.resetChipsArea();
4294+
}
4295+
42924296
this.cdr.detectChanges();
42934297
this.resetCaches();
42944298
// in case scrollbar has appeared recalc to size correctly.
@@ -4460,9 +4464,9 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
44604464
this.columnList.forEach((col) => {
44614465
if (col.columnLayout) {
44624466
const layoutSize = col.children ?
4463-
col.children.reduce((acc, val) => Math.max(val.rowStart + val.gridRowSpan - 1, acc), 1) :
4464-
1;
4465-
this._multiRowLayoutRowSize = Math.max(layoutSize, this._multiRowLayoutRowSize);
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);
44664470
}
44674471
});
44684472
}
@@ -4767,8 +4771,8 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
47674771

47684772

47694773
setSelection(range: GridSelectionRange): void {
4770-
const startNode = { row: range.rowStart, column: this.columnToVisibleIndex(range.columnStart) };
4771-
const endNode = { row: range.rowEnd, column: this.columnToVisibleIndex(range.columnEnd) };
4774+
const startNode = { row: range.rowStart, column: this.columnToVisibleIndex(range.columnStart) };
4775+
const endNode = { row: range.rowEnd, column: this.columnToVisibleIndex(range.columnEnd) };
47724776

47734777
this.selectionService.pointerState.node = startNode;
47744778
this.selectionService.selectRange(endNode, this.selectionService.pointerState);
@@ -4859,7 +4863,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
48594863
*/
48604864
public navigateTo(rowIndex: number, visibleColIndex = -1, cb: Function = null) {
48614865
if (rowIndex < 0 || rowIndex > this.verticalScrollContainer.igxForOf.length - 1
4862-
|| (visibleColIndex !== -1 && this.columnList.map(col => col.visibleIndex).indexOf(visibleColIndex) === -1)) {
4866+
|| (visibleColIndex !== -1 && this.columnList.map(col => col.visibleIndex).indexOf(visibleColIndex) === -1)) {
48634867
return;
48644868
}
48654869
this.wheelHandler();
@@ -4871,9 +4875,9 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
48714875
if (this.navigation.shouldPerformVerticalScroll(rowIndex)) {
48724876
this.verticalScrollContainer.scrollTo(rowIndex);
48734877
this.verticalScrollContainer.onChunkLoad
4874-
.pipe(first()).subscribe(() => {
4875-
this.executeCallback(rowIndex, visibleColIndex, cb);
4876-
});
4878+
.pipe(first()).subscribe(() => {
4879+
this.executeCallback(rowIndex, visibleColIndex, cb);
4880+
});
48774881
} else {
48784882
this.executeCallback(rowIndex, visibleColIndex, cb);
48794883
}
@@ -4882,89 +4886,89 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
48824886
this.parentVirtDir.onChunkLoad
48834887
.pipe(first())
48844888
.subscribe(() => {
4885-
if (this.navigation.shouldPerformVerticalScroll(rowIndex)) {
4886-
this.verticalScrollContainer.scrollTo(rowIndex);
4887-
this.verticalScrollContainer.onChunkLoad
4888-
.pipe(first()).subscribe(() => {
4889+
if (this.navigation.shouldPerformVerticalScroll(rowIndex)) {
4890+
this.verticalScrollContainer.scrollTo(rowIndex);
4891+
this.verticalScrollContainer.onChunkLoad
4892+
.pipe(first()).subscribe(() => {
4893+
this.executeCallback(rowIndex, visibleColIndex, cb);
4894+
});
4895+
} else {
48894896
this.executeCallback(rowIndex, visibleColIndex, cb);
4890-
});
4891-
} else {
4892-
this.executeCallback(rowIndex, visibleColIndex, cb);
4893-
}
4897+
}
48944898

4895-
});
4899+
});
48964900
this.navigation.horizontalScroll(rowIndex).scrollTo(unpinnedIndex);
48974901
}
48984902
}
48994903

4900-
/**
4901-
* Returns `ICellPosition` which defines the next cell,
4902-
* according to the current position, that match specific criteria.
4903-
* You can pass callback function as a third parameter of `getPreviousCell` method.
4904-
* The callback function accepts IgxColumnComponent as a param
4905-
* ```typescript
4906-
* const nextEditableCellPosition = this.grid.getNextCell(0, 3, (column) => column.editable);
4907-
* ```
4908-
* @memberof IgxGridBaseComponent
4909-
*/
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+
*/
49104914
public getNextCell(currRowIndex: number, curVisibleColIndex: number,
4911-
callback: (IgxColumnComponent) => boolean = null): ICellPosition {
4915+
callback: (IgxColumnComponent) => boolean = null): ICellPosition {
49124916
const columns = this.columnList.filter(col => !col.columnGroup && col.visibleIndex >= 0);
49134917

49144918
if (!this.isValidPosition(currRowIndex, curVisibleColIndex)) {
4915-
return {rowIndex: currRowIndex, visibleColumnIndex: curVisibleColIndex};
4919+
return { rowIndex: currRowIndex, visibleColumnIndex: curVisibleColIndex };
49164920
}
49174921
const colIndexes = callback ? columns.filter((col) => callback(col)).map(editCol => editCol.visibleIndex).sort((a, b) => a - b) :
4918-
columns.map(editCol => editCol.visibleIndex).sort((a, b) => a - b);
4922+
columns.map(editCol => editCol.visibleIndex).sort((a, b) => a - b);
49194923
const nextCellIndex = colIndexes.find(index => index > curVisibleColIndex);
49204924
if (this.verticalScrollContainer.igxForOf.slice(currRowIndex, currRowIndex + 1)
4921-
.find(rec => !rec.expression && !rec.summaries && !rec.childGridsData) && nextCellIndex !== undefined) {
4922-
return {rowIndex: currRowIndex, visibleColumnIndex: nextCellIndex};
4925+
.find(rec => !rec.expression && !rec.summaries && !rec.childGridsData) && nextCellIndex !== undefined) {
4926+
return { rowIndex: currRowIndex, visibleColumnIndex: nextCellIndex };
49234927
} else {
49244928
if (colIndexes.length === 0 || this.getNextDataRowIndex(currRowIndex) === currRowIndex) {
4925-
return {rowIndex: currRowIndex, visibleColumnIndex: curVisibleColIndex};
4929+
return { rowIndex: currRowIndex, visibleColumnIndex: curVisibleColIndex };
49264930
} else {
4927-
return {rowIndex: this.getNextDataRowIndex(currRowIndex), visibleColumnIndex: colIndexes[0]};
4931+
return { rowIndex: this.getNextDataRowIndex(currRowIndex), visibleColumnIndex: colIndexes[0] };
49284932
}
49294933
}
49304934
}
49314935

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

49464950
if (!this.isValidPosition(currRowIndex, curVisibleColIndex)) {
4947-
return {rowIndex: currRowIndex, visibleColumnIndex: curVisibleColIndex};
4951+
return { rowIndex: currRowIndex, visibleColumnIndex: curVisibleColIndex };
49484952
}
49494953
const colIndexes = callback ? columns.filter((col) => callback(col)).map(editCol => editCol.visibleIndex).sort((a, b) => b - a) :
4950-
columns.map(editCol => editCol.visibleIndex).sort((a, b) => b - a);
4954+
columns.map(editCol => editCol.visibleIndex).sort((a, b) => b - a);
49514955
const prevCellIndex = colIndexes.find(index => index < curVisibleColIndex);
49524956
if (this.verticalScrollContainer.igxForOf.slice(currRowIndex, currRowIndex + 1)
4953-
.find(rec => !rec.expression && !rec.summaries && !rec.childGridsData) && prevCellIndex !== undefined) {
4954-
return {rowIndex: currRowIndex, visibleColumnIndex: prevCellIndex};
4957+
.find(rec => !rec.expression && !rec.summaries && !rec.childGridsData) && prevCellIndex !== undefined) {
4958+
return { rowIndex: currRowIndex, visibleColumnIndex: prevCellIndex };
49554959
} else {
49564960
if (colIndexes.length === 0 || this.getPrevDataRowIndex(currRowIndex) === currRowIndex) {
4957-
return {rowIndex: currRowIndex, visibleColumnIndex: curVisibleColIndex};
4961+
return { rowIndex: currRowIndex, visibleColumnIndex: curVisibleColIndex };
49584962
} else {
4959-
return {rowIndex: this.getPrevDataRowIndex(currRowIndex), visibleColumnIndex: colIndexes[0]};
4963+
return { rowIndex: this.getPrevDataRowIndex(currRowIndex), visibleColumnIndex: colIndexes[0] };
49604964
}
49614965
}
49624966
}
49634967

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

50005004
private getNextDataRowIndex(currentRowIndex): number {
5001-
if (currentRowIndex === this.verticalScrollContainer.igxForOf.length) {return currentRowIndex; }
5005+
if (currentRowIndex === this.verticalScrollContainer.igxForOf.length) { return currentRowIndex; }
50025006

50035007
const nextRow = this.verticalScrollContainer.igxForOf.slice(currentRowIndex + 1, this.verticalScrollContainer.igxForOf.length)
50045008
.find(rec => !rec.expression && !rec.summaries && !rec.childGridsData);
@@ -5011,7 +5015,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
50115015
if (rows < 1 || cols < 1) { return false; }
50125016
if (rowIndex > -1 && rowIndex < this.verticalScrollContainer.igxForOf.length &&
50135017
colIndex > - 1 && colIndex <= this.unpinnedColumns[this.unpinnedColumns.length - 1].visibleIndex) {
5014-
return true;
5018+
return true;
50155019
}
50165020
return false;
50175021
}
@@ -5021,10 +5025,10 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
50215025
*/
50225026
public wheelHandler(isScroll = false) {
50235027
if (document.activeElement &&
5024-
// tslint:disable-next-line:no-bitwise
5028+
// tslint:disable-next-line:no-bitwise
50255029
(document.activeElement.compareDocumentPosition(this.tbody.nativeElement) & Node.DOCUMENT_POSITION_CONTAINS ||
5026-
// tslint:disable-next-line:no-bitwise
5027-
(document.activeElement.compareDocumentPosition(this.tfoot.nativeElement) & Node.DOCUMENT_POSITION_CONTAINS && isScroll))) {
5030+
// tslint:disable-next-line:no-bitwise
5031+
(document.activeElement.compareDocumentPosition(this.tfoot.nativeElement) & Node.DOCUMENT_POSITION_CONTAINS && isScroll))) {
50285032
(document.activeElement as HTMLElement).blur();
50295033
}
50305034
}
@@ -5088,7 +5092,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
50885092

50895093
if (this.lastSearchInfo.matchInfoCache.length) {
50905094
const matchInfo = this.lastSearchInfo.matchInfoCache[this.lastSearchInfo.activeMatchIndex];
5091-
this.lastSearchInfo = {...this.lastSearchInfo};
5095+
this.lastSearchInfo = { ...this.lastSearchInfo };
50925096

50935097
if (scroll !== false) {
50945098
this.scrollTo(matchInfo.row, matchInfo.column);
@@ -5192,7 +5196,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
51925196
protected scrollTo(row: any | number, column: any | number): void {
51935197
let delayScrolling = false;
51945198

5195-
if (this.paging && typeof(row) !== 'number') {
5199+
if (this.paging && typeof (row) !== 'number') {
51965200
const rowIndex = this.filteredSortedData.indexOf(row);
51975201
const page = Math.floor(rowIndex / this.perPage);
51985202

@@ -5205,11 +5209,11 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
52055209
if (delayScrolling) {
52065210
this.verticalScrollContainer.onDataChanged.pipe(first()).subscribe(() => {
52075211
this.scrollDirective(this.verticalScrollContainer,
5208-
typeof(row) === 'number' ? row : this.verticalScrollContainer.igxForOf.indexOf(row));
5212+
typeof (row) === 'number' ? row : this.verticalScrollContainer.igxForOf.indexOf(row));
52095213
});
52105214
} else {
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

52155219
this.scrollToHorizontally(column);
@@ -5476,12 +5480,12 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
54765480
}
54775481

54785482
protected _restoreVirtState(row) {
5479-
// check virtualization state of data record added from cache
5480-
// in case state is no longer valid - update it.
5481-
const rowForOf = row.virtDirRow;
5482-
const gridScrLeft = rowForOf.getHorizontalScroll().scrollLeft;
5483-
const left = -parseInt(rowForOf.dc.instance._viewContainer.element.nativeElement.style.left, 10);
5484-
const actualScrollLeft = left + rowForOf.getColumnScrollLeft(rowForOf.state.startIndex);
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);
54855489
if (gridScrLeft !== actualScrollLeft) {
54865490
rowForOf.onHScroll(gridScrLeft);
54875491
}

0 commit comments

Comments
 (0)