Skip to content

Commit a0e9d83

Browse files
astaevgedinakova
astaev
authored and
gedinakova
committed
fix(search): Fix search with grouping #4327 (#4421)
* fix(search): Fix search with grouping #4327 * fix(search): fix scrollTo when search with grouping #4327 * fix(grid): fix scrollTo for various scenarios #4327 * test(treeGrid): fix a test adding setupGridScrollDetection #4327
1 parent 91d5d0b commit a0e9d83

File tree

5 files changed

+97
-23
lines changed

5 files changed

+97
-23
lines changed

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

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4779,13 +4779,11 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
47794779
* @hidden
47804780
*/
47814781
protected scrollTo(row: any | number, column: any | number): void {
4782-
let rowIndex = typeof row === 'number' ? row : this.filteredSortedData.indexOf(row);
4783-
let columnIndex = typeof column === 'number' ? column : this.getColumnByName(column).visibleIndex;
47844782
let delayScrolling = false;
47854783

4786-
if (this.paging) {
4784+
if (this.paging && typeof(row) !== 'number') {
4785+
const rowIndex = this.filteredSortedData.indexOf(row);
47874786
const page = Math.floor(rowIndex / this.perPage);
4788-
rowIndex = rowIndex - page * this.perPage;
47894787

47904788
if (this.page !== page) {
47914789
delayScrolling = true;
@@ -4795,15 +4793,24 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
47954793

47964794
if (delayScrolling) {
47974795
this.verticalScrollContainer.onDataChanged.pipe(first()).subscribe(() => {
4798-
this.scrollDirective(this.verticalScrollContainer, rowIndex);
4796+
this.scrollDirective(this.verticalScrollContainer,
4797+
typeof(row) === 'number' ? row : this.verticalScrollContainer.igxForOf.indexOf(row));
47994798
});
48004799
} else {
4801-
this.scrollDirective(this.verticalScrollContainer, rowIndex);
4800+
this.scrollDirective(this.verticalScrollContainer,
4801+
typeof(row) === 'number' ? row : this.verticalScrollContainer.igxForOf.indexOf(row));
48024802
}
48034803

4804+
this.scrollToHorizontally(column);
4805+
}
4806+
4807+
/**
4808+
* @hidden
4809+
*/
4810+
protected scrollToHorizontally(column: any | number) {
4811+
let columnIndex = typeof column === 'number' ? column : this.getColumnByName(column).visibleIndex;
48044812
const scrollRow = this.rowList.find(r => r.virtDirRow);
48054813
const virtDir = scrollRow ? scrollRow.virtDirRow : null;
4806-
48074814
if (this.pinnedColumns.length) {
48084815
if (columnIndex >= this.pinnedColumns.length) {
48094816
columnIndex -= this.pinnedColumns.length;
@@ -4814,7 +4821,10 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
48144821
}
48154822
}
48164823

4817-
private scrollDirective(directive: IgxGridForOfDirective<any>, goal: number): void {
4824+
/**
4825+
* @hidden
4826+
*/
4827+
protected scrollDirective(directive: IgxGridForOfDirective<any>, goal: number): void {
48184828
if (!directive) {
48194829
return;
48204830
}

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

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1-
import { Component, ChangeDetectionStrategy, Input, Output, EventEmitter, ContentChild, ViewChildren,
1+
import {
2+
Component, ChangeDetectionStrategy, Input, Output, EventEmitter, ContentChild, ViewChildren,
23
QueryList, ViewChild, ElementRef, TemplateRef, DoCheck, NgZone, ChangeDetectorRef, ComponentFactoryResolver,
3-
IterableDiffers, ViewContainerRef, Inject, AfterContentInit, HostBinding, forwardRef, OnInit, Optional } from '@angular/core';
4+
IterableDiffers, ViewContainerRef, Inject, AfterContentInit, HostBinding, forwardRef, OnInit, Optional
5+
} from '@angular/core';
46
import { GridBaseAPIService } from '../api.service';
57
import { IgxGridBaseComponent, IgxGridTransaction, IFocusChangeEventArgs, IGridDataBindable } from '../grid-base.component';
68
import { IgxGridNavigationService } from '../grid-navigation.service';
@@ -71,7 +73,7 @@ export class IgxGridComponent extends IgxGridBaseComponent implements IGridDataB
7173
/**
7274
* @hidden
7375
*/
74-
protected _groupingExpressions: IGroupingExpression [] = [];
76+
protected _groupingExpressions: IGroupingExpression[] = [];
7577
/**
7678
* @hidden
7779
*/
@@ -649,7 +651,7 @@ export class IgxGridComponent extends IgxGridBaseComponent implements IGridDataB
649651
/**
650652
* @hidden
651653
*/
652-
public getContext(rowData, rowIndex): any {
654+
public getContext(rowData, rowIndex): any {
653655
return {
654656
$implicit: rowData,
655657
index: rowIndex,
@@ -660,7 +662,7 @@ export class IgxGridComponent extends IgxGridBaseComponent implements IGridDataB
660662
/**
661663
* @hidden
662664
*/
663-
public get template(): TemplateRef<any> {
665+
public get template(): TemplateRef<any> {
664666
if (this.filteredData && this.filteredData.length === 0) {
665667
return this.emptyGridTemplate ? this.emptyGridTemplate : this.emptyFilteredGridTemplate;
666668
}
@@ -783,8 +785,9 @@ export class IgxGridComponent extends IgxGridBaseComponent implements IGridDataB
783785
/**
784786
* @hidden
785787
*/
786-
protected scrollTo( row: any | number, column: any | number): void {
787-
if (this.groupingExpressions && this.groupingExpressions.length) {
788+
protected scrollTo(row: any | number, column: any | number): void {
789+
if (this.groupingExpressions && this.groupingExpressions.length
790+
&& typeof(row) !== 'number') {
788791
const groupByRecords = this.getGroupByRecords();
789792
const rowIndex = this.filteredSortedData.indexOf(row);
790793
const groupByRecord = groupByRecords[rowIndex];
@@ -831,7 +834,7 @@ export class IgxGridComponent extends IgxGridBaseComponent implements IGridDataB
831834

832835
public ngOnInit() {
833836
super.ngOnInit();
834-
this.onGroupingDone.pipe(takeUntil(this.destroy$)).subscribe((args) => {
837+
this.onGroupingDone.pipe(takeUntil(this.destroy$)).subscribe((args) => {
835838
this.endEdit(true);
836839
this.summaryService.updateSummaryCache(args);
837840
});

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

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1234,6 +1234,41 @@ describe('IgxGrid - search API', () => {
12341234
expect(spans.length).toBe(5);
12351235
});
12361236

1237+
it('Should be able to search when grouping is enabled', async () => {
1238+
grid.height = '400px';
1239+
await wait();
1240+
fix.detectChanges();
1241+
1242+
grid.groupBy({
1243+
fieldName: 'JobTitle',
1244+
dir: SortingDirection.Asc,
1245+
ignoreCase: true,
1246+
strategy: DefaultSortingStrategy.instance()
1247+
});
1248+
grid.findNext('Casey');
1249+
await wait();
1250+
fix.detectChanges();
1251+
1252+
let row = grid.getRowByIndex(17);
1253+
let spans = row.nativeElement.querySelectorAll('.' + component.highlightClass);
1254+
expect(spans.length).toBe(1);
1255+
1256+
grid.toggleAllGroupRows();
1257+
(grid as any).scrollTo(0, 0);
1258+
grid.toggleGroup(grid.groupsRecords[0]);
1259+
grid.toggleGroup(grid.groupsRecords[1]);
1260+
await wait();
1261+
fix.detectChanges();
1262+
1263+
grid.findNext('Casey');
1264+
await wait();
1265+
fix.detectChanges();
1266+
1267+
row = grid.getRowByIndex(11);
1268+
spans = row.nativeElement.querySelectorAll('.' + component.highlightClass);
1269+
expect(spans.length).toBe(1);
1270+
});
1271+
12371272

12381273
it('Should be able to properly handle navigating through collapsed rows with paging', async () => {
12391274
grid.groupBy({

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1576,9 +1576,10 @@ describe('IgxTreeGrid - Summaries', () => {
15761576

15771577
it('should render rows correctly after collapse and expand', async () => {
15781578
const fix = TestBed.createComponent(IgxTreeGridSummariesScrollingComponent);
1579+
const treeGrid = fix.componentInstance.treeGrid;
1580+
setupGridScrollDetection(fix, treeGrid);
15791581
fix.detectChanges();
15801582
await wait(16);
1581-
const treeGrid = fix.componentInstance.treeGrid;
15821583

15831584
(treeGrid as any).scrollTo(23, 0, 0);
15841585
fix.detectChanges();

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

Lines changed: 31 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ import { IgxGridSelectionService, IgxGridCRUDService } from '../../core/grid-sel
3434
import { mergeObjects } from '../../core/utils';
3535
import { IgxOverlayService } from '../../services/index';
3636
import { IgxColumnResizingService } from '../grid-column-resizing.service';
37+
import { first } from 'rxjs/operators';
3738
import { IgxForOfSyncService } from '../../directives/for-of/for_of.sync.service';
3839

3940
let NEXT_ID = 0;
@@ -484,13 +485,37 @@ export class IgxTreeGridComponent extends IgxGridBaseComponent implements IGridD
484485
* @hidden
485486
*/
486487
protected scrollTo(row: any | number, column: any | number): void {
487-
const rowData = typeof row === 'number' ? this.filteredSortedData[row] : row;
488-
const rowID = this._gridAPI.get_row_id(rowData);
489-
const record = this.processedRecords.get(rowID);
490-
this._gridAPI.expand_path_to_record(record);
491-
const rowIndex = this.processedExpandedFlatData.indexOf(rowData);
488+
let delayScrolling = false;
489+
let record: ITreeGridRecord;
490+
491+
if (typeof(row) !== 'number') {
492+
const rowData = row;
493+
const rowID = this._gridAPI.get_row_id(rowData);
494+
record = this.processedRecords.get(rowID);
495+
this._gridAPI.expand_path_to_record(record);
496+
497+
if (this.paging) {
498+
const rowIndex = this.processedExpandedFlatData.indexOf(rowData);
499+
const page = Math.floor(rowIndex / this.perPage);
500+
501+
if (this.page !== page) {
502+
delayScrolling = true;
503+
this.page = page;
504+
}
505+
}
506+
}
507+
508+
if (delayScrolling) {
509+
this.verticalScrollContainer.onDataChanged.pipe(first()).subscribe(() => {
510+
this.scrollDirective(this.verticalScrollContainer,
511+
typeof(row) === 'number' ? row : this.verticalScrollContainer.igxForOf.indexOf(record));
512+
});
513+
} else {
514+
this.scrollDirective(this.verticalScrollContainer,
515+
typeof(row) === 'number' ? row : this.verticalScrollContainer.igxForOf.indexOf(record));
516+
}
492517

493-
super.scrollTo(rowIndex, column);
518+
this.scrollToHorizontally(column);
494519
}
495520

496521
/**

0 commit comments

Comments
 (0)