From 7d4e83170064bee6d2cbc71fe87149a2b31b6ad8 Mon Sep 17 00:00:00 2001 From: Diyan Dimitrov Date: Tue, 15 Jan 2019 14:37:30 +0200 Subject: [PATCH] feat(search): refactor search and highlight #3519 --- .../text-highlight.directive.spec.ts | 8 +- .../text-highlight.directive.ts | 42 ++-- .../src/lib/grids/cell.component.html | 2 +- .../src/lib/grids/column.component.ts | 54 ----- .../src/lib/grids/grid-base.component.ts | 196 +++--------------- .../src/lib/grids/grid/grid.component.ts | 95 ++------- .../src/lib/grids/grid/grid.search.spec.ts | 1 + .../grids/tree-grid/tree-cell.component.html | 2 +- .../grids/tree-grid/tree-grid.component.ts | 36 +--- 9 files changed, 66 insertions(+), 370 deletions(-) diff --git a/projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.spec.ts index 28480213f38..25d2dbd4755 100644 --- a/projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.spec.ts @@ -31,7 +31,6 @@ describe('IgxHighlight', () => { expect(component.highlight.value).toBe(component.html); expect(component.highlight.row).toBe(0); expect(component.highlight.column).toBe(0); - expect(component.highlight.page).toBe(0); expect(component.highlight.containerClass).toBe('test'); }); @@ -281,7 +280,7 @@ describe('IgxHighlight', () => { @Component({ template: // tslint:disable-next-line:max-line-length - `
+ `
{{html}}
` }) @@ -310,9 +309,8 @@ class HighlightLoremIpsumComponent { public activate(index: number) { const activeHighlightInfo: IActiveHighlightInfo = { - rowIndex: 0, - columnIndex: 0, - page: 0, + rowID: 0, + columnID: 0, index: index }; IgxTextHighlightDirective.setActiveHighlight(this.groupName, activeHighlightInfo); diff --git a/projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.ts b/projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.ts index 407c086274d..c16f0066eef 100644 --- a/projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.ts @@ -13,6 +13,7 @@ import { } from '@angular/core'; import { takeUntil } from 'rxjs/operators'; import { Subject } from 'rxjs'; +import { DeprecateProperty } from '../../core/deprecateDecorators'; interface ISearchInfo { searchedText: string; @@ -23,9 +24,8 @@ interface ISearchInfo { } export interface IActiveHighlightInfo { - rowIndex: number; - columnIndex: number; - page: number; + rowID?: any; + columnID?: any; index: number; } @@ -123,7 +123,7 @@ export class IgxTextHighlightDirective implements AfterViewInit, OnDestroy, OnCh } /** - * The index of the row on which the directive is currently on. + * The identifier of the row on which the directive is currently on. * * ```html *
- *
- * ``` - */ + @DeprecateProperty(`IgxTextHighlightDirective 'page' input is deprecated. There is no need to set it.`) @Input('page') public page: number; @@ -188,9 +178,8 @@ export class IgxTextHighlightDirective implements AfterViewInit, OnDestroy, OnCh */ public static clearActiveHighlight(groupName) { IgxTextHighlightDirective.highlightGroupsMap.set(groupName, { - rowIndex: -1, - columnIndex: -1, - page: -1, + rowID: null, + columnID: null, index: -1 }); IgxTextHighlightDirective.onActiveElementChanged.emit(groupName); @@ -246,9 +235,8 @@ export class IgxTextHighlightDirective implements AfterViewInit, OnDestroy, OnCh ngAfterViewInit() { if (IgxTextHighlightDirective.highlightGroupsMap.has(this.groupName) === false) { IgxTextHighlightDirective.highlightGroupsMap.set(this.groupName, { - rowIndex: -1, - columnIndex: -1, - page: -1, + rowID: null, + columnID: null, index: -1 }); } @@ -308,7 +296,7 @@ export class IgxTextHighlightDirective implements AfterViewInit, OnDestroy, OnCh */ public activateIfNecessary(): void { const group = IgxTextHighlightDirective.highlightGroupsMap.get(this.groupName); - if (group.columnIndex === this.column && group.rowIndex === this.row && group.page === this.page) { + if (group.columnID === this.column && group.rowID === this.row) { this.activate(group.index); } } @@ -458,7 +446,9 @@ export class IgxTextHighlightDirective implements AfterViewInit, OnDestroy, OnCh private appendDiv() { this._div = this.renderer.createElement('div'); - this.renderer.addClass(this._div, this.containerClass); + if ( this.containerClass) { + this.renderer.addClass(this._div, this.containerClass); + } this.renderer.appendChild(this.parentElement, this._div); } diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.html b/projects/igniteui-angular/src/lib/grids/cell.component.html index 1ec199418fe..78f17fabe4a 100644 --- a/projects/igniteui-angular/src/lib/grids/cell.component.html +++ b/projects/igniteui-angular/src/lib/grids/cell.component.html @@ -1,5 +1,5 @@ + [value]="formatter ? formatter(value) : value" [row]="row.rowData" [column]="this.column.field" [containerClass]="'igx-grid__td-text'">
{{ formatter ? formatter(value) : value }}
 diff --git a/projects/igniteui-angular/src/lib/grids/column.component.ts b/projects/igniteui-angular/src/lib/grids/column.component.ts index 0097d33553c..4c919dde2a9 100644 --- a/projects/igniteui-angular/src/lib/grids/column.component.ts +++ b/projects/igniteui-angular/src/lib/grids/column.component.ts @@ -198,20 +198,6 @@ export class IgxColumnComponent implements AfterContentInit { } this.check(); if (this.grid) { - const activeInfo = IgxTextHighlightDirective.highlightGroupsMap.get(this.grid.id); - if (!activeInfo) { - return; - } - const oldIndex = activeInfo.columnIndex; - - if (this.grid.lastSearchInfo.searchText) { - if (this.index <= oldIndex) { - const newIndex = this.hidden ? oldIndex - 1 : oldIndex + 1; - IgxColumnComponent.updateHighlights(oldIndex, newIndex, this.grid); - } else if (oldIndex === -1 && !this.hidden) { - this.grid.refreshSearch(); - } - } this.grid.summaryService.resetSummaryHeight(); this.grid.reflow(); this.grid.filteringService.refreshExpressions(); @@ -869,21 +855,6 @@ export class IgxColumnComponent implements AfterContentInit { @ContentChild(IgxCellEditorTemplateDirective, { read: IgxCellEditorTemplateDirective }) protected editorTemplate: IgxCellEditorTemplateDirective; - public static updateHighlights(oldIndex: number, newIndex: number, grid: IgxGridBaseComponent) { - const activeInfo = IgxTextHighlightDirective.highlightGroupsMap.get(grid.id); - - if (activeInfo && activeInfo.columnIndex === oldIndex) { - IgxTextHighlightDirective.setActiveHighlight(grid.id, { - columnIndex: newIndex, - rowIndex: activeInfo.rowIndex, - index: activeInfo.index, - page: activeInfo.page, - }); - - grid.refreshSearch(true); - } - } - constructor(public gridAPI: GridBaseAPIService, public cdr: ChangeDetectorRef) { } /** *@hidden @@ -933,27 +904,6 @@ export class IgxColumnComponent implements AfterContentInit { } } } - /** - * Updates the highlights when a column index is changed. - * ```typescript - * this.column.updateHighlights(1, 3); - * ``` - * @memberof IgxColumnComponent - */ - public updateHighlights(oldIndex: number, newIndex: number) { - const activeInfo = IgxTextHighlightDirective.highlightGroupsMap.get(this.grid.id); - - if (activeInfo && activeInfo.columnIndex === oldIndex) { - IgxTextHighlightDirective.setActiveHighlight(this.grid.id, { - columnIndex: newIndex, - rowIndex: activeInfo.rowIndex, - index: activeInfo.index, - page: activeInfo.page, - }); - - this.grid.refreshSearch(true); - } - } /** * Pins the column at the provided index in the pinned area. Defaults to index `0` if not provided. * ```typescript @@ -1014,8 +964,6 @@ export class IgxColumnComponent implements AfterContentInit { grid.cdr.detectChanges(); this.grid.filteringService.refreshExpressions(); - const newIndex = this.visibleIndex; - IgxColumnComponent.updateHighlights(oldIndex, newIndex, grid); return true; } /** @@ -1066,8 +1014,6 @@ export class IgxColumnComponent implements AfterContentInit { grid.cdr.detectChanges(); this.grid.filteringService.refreshExpressions(); - const newIndex = this.visibleIndex; - IgxColumnComponent.updateHighlights(oldIndex, newIndex, grid); return true; } /** 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 57e74f62f97..a111f2e641f 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -320,14 +320,9 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements this.updateHeaderCheckboxStatusOnFilter(this._filteredData); } - this.restoreHighlight(); + this.refreshSearch(true); } - /** - * @hidden - */ - protected collapsedHighlightedItem: any = null; - /** * Returns whether the paging feature is enabled/disabled. * The default state is disabled (false). @@ -413,7 +408,6 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements this._perPage = val; this.page = 0; this.endEdit(true); - this.restoreHighlight(); } /** @@ -1632,7 +1626,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements this._sortingExpressions = cloneArray(value); this.cdr.markForCheck(); - this.restoreHighlight(); + this.refreshSearch(true); } /** @@ -2781,28 +2775,11 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements toIndex++; } - let activeColumn = null; - let activeColumnIndex = -1; - - if (this.lastSearchInfo.searchText) { - const activeInfo = IgxTextHighlightDirective.highlightGroupsMap.get(this.id); - activeColumnIndex = activeInfo.columnIndex; - - if (activeColumnIndex !== -1) { - activeColumn = list[activeColumnIndex]; - } - } - list.splice(toIndex, 0, ...list.splice(fromIndex, 1)); const newList = this._resetColumnList(list); this.columnList.reset(newList); this.columnList.notifyOnChanges(); this._columns = this.columnList.toArray(); - - if (activeColumn !== null && activeColumn !== undefined) { - const newIndex = newList.indexOf(activeColumn); - IgxColumnComponent.updateHighlights(activeColumnIndex, newIndex, this); - } } /** @@ -3410,10 +3387,9 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements if (updateActiveInfo) { const activeInfo = IgxTextHighlightDirective.highlightGroupsMap.get(this.id); this.lastSearchInfo.matchInfoCache.forEach((match, i) => { - if (match.column === activeInfo.columnIndex && - match.row === activeInfo.rowIndex && - match.index === activeInfo.index && - match.page === activeInfo.page) { + if (match.column === activeInfo.columnID && + match.row === activeInfo.rowID && + match.index === activeInfo.index) { this.lastSearchInfo.activeMatchIndex = i; } }); @@ -4136,10 +4112,6 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements this.endEdit(false); } - if (this.collapsedHighlightedItem) { - this.collapsedHighlightedItem = null; - } - if (!text) { this.clearSearch(); return 0; @@ -4186,19 +4158,16 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements if (this.lastSearchInfo.matchInfoCache.length) { const matchInfo = this.lastSearchInfo.matchInfoCache[this.lastSearchInfo.activeMatchIndex]; - if (scroll !== false) { - this.scrollTo(matchInfo.row, matchInfo.column, matchInfo.page, matchInfo.groupByRecord); - } - - const fixedMatchInfo = this.fixMatchInfoIndexes(matchInfo); - IgxTextHighlightDirective.setActiveHighlight(this.id, { - columnIndex: fixedMatchInfo.column, - rowIndex: fixedMatchInfo.row, - index: fixedMatchInfo.index, - page: fixedMatchInfo.page + columnID: matchInfo.column, + rowID: matchInfo.row, + index: matchInfo.index, }); + if (scroll !== false) { + this.scrollTo(matchInfo.row, matchInfo.column); + } + } else { IgxTextHighlightDirective.clearActiveHighlight(this.id); } @@ -4206,13 +4175,6 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements return this.lastSearchInfo.matchInfoCache.length; } - /** - * @hidden - */ - protected fixMatchInfoIndexes(matchInfo: any): any { - return matchInfo; - } - /** * Returns an array containing the filtered data. * ```typescript @@ -4304,23 +4266,26 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements /** * @hidden */ - protected scrollTo(row: number, column: number, page: number, groupByRecord?: IGroupByRecord): void { + protected scrollTo(row: any | number, column: any | number): void { + const rowIndex = typeof row === 'number' ? row : this.filteredSortedData.indexOf(row); + let columnIndex = typeof column === 'number' ? column : this.getColumnByName(column).visibleIndex; + if (this.paging) { - this.page = page; + this.page = Math.floor(rowIndex / this.perPage); } - this.scrollDirective(this.verticalScrollContainer, row); + this.scrollDirective(this.verticalScrollContainer, rowIndex); const scrollRow = this.rowList.find(r => r.virtDirRow); const virtDir = scrollRow ? scrollRow.virtDirRow : null; if (this.pinnedColumns.length) { - if (column >= this.pinnedColumns.length) { - column -= this.pinnedColumns.length; - this.scrollDirective(virtDir, column); + if (columnIndex >= this.pinnedColumns.length) { + columnIndex -= this.pinnedColumns.length; + this.scrollDirective(virtDir, columnIndex); } } else { - this.scrollDirective(virtDir, column); + this.scrollDirective(virtDir, columnIndex); } } @@ -4340,38 +4305,18 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements const data = this.filteredSortedData; const columnItems = this.visibleColumns.filter((c) => !c.columnGroup).sort((c1, c2) => c1.visibleIndex - c2.visibleIndex); - const groupIndexData = this.getGroupIncrementData(); - const groupByRecords = this.getGroupByRecords(); - let collapsedRowsCount = 0; - - data.forEach((dataRow, i) => { - const groupByRecord = groupByRecords ? groupByRecords[i] : null; - const groupByIncrement = groupIndexData ? groupIndexData[i] : 0; - const pagingIncrement = this.getPagingIncrement(groupByIncrement, groupIndexData, Math.floor(i / this.perPage)); - - if (this.paging && i % this.perPage === 0) { - collapsedRowsCount = 0; - } - const rowIndex = this.resolveSearchRowIndex(i, pagingIncrement, groupByIncrement, collapsedRowsCount); - - if (groupByRecord && !this.isExpandedGroup(groupByRecord)) { - collapsedRowsCount++; - } - columnItems.forEach((c, j) => { + data.forEach((dataRow) => { + columnItems.forEach((c) => { const value = c.formatter ? c.formatter(dataRow[c.field]) : dataRow[c.field]; if (value !== undefined && value !== null && c.searchable) { let searchValue = caseSensitive ? String(value) : String(value).toLowerCase(); - const pageIndex = this.paging ? Math.floor(i / this.perPage) : 0; if (exactMatch) { if (searchValue === searchText) { this.lastSearchInfo.matchInfoCache.push({ - row: rowIndex, - column: j, - page: pageIndex, + row: dataRow, + column: c.field, index: 0, - groupByRecord: groupByRecord, - item: dataRow }); } } else { @@ -4380,12 +4325,9 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements while (searchIndex !== -1) { this.lastSearchInfo.matchInfoCache.push({ - row: rowIndex, - column: j, - page: pageIndex, + row: dataRow, + column: c.field, index: occurenceIndex++, - groupByRecord: groupByRecord, - item: dataRow }); searchValue = searchValue.substring(searchIndex + searchText.length); @@ -4397,15 +4339,6 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements }); } - /** - * @hidden - */ - protected resolveSearchRowIndex(index: number, pagingIncrement: number, groupByIncrement: number, collapsedRowsCount: number) { - let rowIndex = this.paging ? (index % this.perPage) + pagingIncrement : index + groupByIncrement; - rowIndex -= collapsedRowsCount; - return rowIndex; - } - /** * @hidden */ @@ -4420,79 +4353,6 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements return null; } - // For paging we need just the increment between the start of the page and the current row - private getPagingIncrement(groupByIncrement: number, groupIndexData: number[], page: number) { - let pagingIncrement = 0; - - if (this.paging && groupByIncrement) { - const lastRowOnPrevPageInrement = page ? groupIndexData[page * this.perPage - 1] : 0; - const firstRowOnThisPageInrement = groupIndexData[page * this.perPage]; - // If the page ends in the middle of the group, on the next page there is - // one additional group by row. We need to account for this. - const additionalPagingIncrement = lastRowOnPrevPageInrement === firstRowOnThisPageInrement ? 1 : 0; - pagingIncrement = groupByIncrement - lastRowOnPrevPageInrement + additionalPagingIncrement; - } - - return pagingIncrement; - } - - /** - * @hidden - */ - protected restoreHighlight(): void { - if (this.lastSearchInfo.searchText) { - const activeInfo = IgxTextHighlightDirective.highlightGroupsMap.get(this.id); - const matchInfo = this.lastSearchInfo.matchInfoCache[this.lastSearchInfo.activeMatchIndex]; - const data = this.filteredSortedData; - const groupByIncrements = this.getGroupIncrementData(); - - const rowIndex = matchInfo ? data.indexOf(matchInfo.item) : -1; - const page = this.paging ? Math.floor(rowIndex / this.perPage) : 0; - let increment = groupByIncrements && rowIndex !== -1 ? groupByIncrements[rowIndex] : 0; - if (this.paging && increment) { - increment = this.getPagingIncrement(increment, groupByIncrements, page); - } - - const row = this.paging ? (rowIndex % this.perPage) + increment : rowIndex + increment; - - this.rebuildMatchCache(); - - if (rowIndex !== -1) { - if (this.collapsedHighlightedItem && groupByIncrements !== null) { - this.collapsedHighlightedItem.info.page = page; - this.collapsedHighlightedItem.info.rowIndex = row; - } else { - IgxTextHighlightDirective.setActiveHighlight(this.id, { - columnIndex: activeInfo.columnIndex, - rowIndex: row, - index: activeInfo.index, - page: page - }); - - this.lastSearchInfo.matchInfoCache.forEach((match, i) => { - if (match.column === activeInfo.columnIndex && - match.row === row && - match.index === activeInfo.index && - match.page === page) { - this.lastSearchInfo.activeMatchIndex = i; - } - }); - } - } else { - this.lastSearchInfo.activeMatchIndex = 0; - this.find(this.lastSearchInfo.searchText, 0, this.lastSearchInfo.caseSensitive, this.lastSearchInfo.exactMatch, false); - } - } - } - - // This method's idea is to get by how much each data row is offset by the group by rows before it. - /** - * @hidden - */ - protected getGroupIncrementData(): number[] { - return null; - } - private checkIfGridIsAdded(node): boolean { if (node === this.nativeElement) { return true; diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts index 57ae8b2cea5..27677555d5c 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts @@ -229,39 +229,7 @@ export class IgxGridComponent extends IgxGridBaseComponent implements OnInit, Do * @memberof IgxGridComponent */ set groupingExpansionState(value) { - const activeInfo = IgxTextHighlightDirective.highlightGroupsMap.get(this.id); - - let highlightItem = null; - if (this.collapsedHighlightedItem) { - highlightItem = this.collapsedHighlightedItem.item; - } else if (this.lastSearchInfo.matchInfoCache.length) { - highlightItem = this.lastSearchInfo.matchInfoCache[this.lastSearchInfo.activeMatchIndex].item; - } - this._groupingExpandState = cloneArray(value); - - this.refreshSearch(); - - if (highlightItem !== null && this.groupingExpressions.length) { - const index = this.filteredSortedData.indexOf(highlightItem); - const groupRow = this.getGroupByRecords()[index]; - - if (!this.isExpandedGroup(groupRow)) { - IgxTextHighlightDirective.clearActiveHighlight(this.id); - this.collapsedHighlightedItem = { - info: activeInfo, - item: highlightItem - }; - } else if (this.collapsedHighlightedItem !== null) { - const collapsedInfo = this.collapsedHighlightedItem.info; - IgxTextHighlightDirective.setActiveHighlight(this.id, { - columnIndex: collapsedInfo.columnIndex, - rowIndex: collapsedInfo.rowIndex, - index: collapsedInfo.index, - page: collapsedInfo.page - }); - } - } this.cdr.detectChanges(); } @@ -502,7 +470,7 @@ export class IgxGridComponent extends IgxGridBaseComponent implements OnInit, Do } this.cdr.detectChanges(); this.calculateGridSizes(); - this.restoreHighlight(); + this.refreshSearch(true); } /** @@ -518,7 +486,7 @@ export class IgxGridComponent extends IgxGridBaseComponent implements OnInit, Do public clearGrouping(name?: string | Array): void { this._gridAPI.clear_groupby(this.id, name); this.calculateGridSizes(); - this.restoreHighlight(); + this.refreshSearch(true); } /** @@ -628,51 +596,6 @@ export class IgxGridComponent extends IgxGridBaseComponent implements OnInit, Do }; } - // This method's idea is to get by how much each data row is offset by the group by rows before it. - /** - * @hidden - */ - protected getGroupIncrementData(): number[] { - if (this.groupingExpressions && this.groupingExpressions.length) { - const groupsRecords = this.getGroupByRecords(); - const groupByIncrements = []; - const values = []; - - let prevHierarchy = null; - let increment = 0; - - groupsRecords.forEach((gbr) => { - if (values.indexOf(gbr) === -1) { - let levelIncrement = 1; - - if (prevHierarchy !== null) { - levelIncrement += this.getLevelIncrement(0, gbr.groupParent, prevHierarchy.groupParent); - } else { - // This is the first level we stumble upon, so we haven't accounted for any of its parents - levelIncrement += gbr.level; - } - - increment += levelIncrement; - prevHierarchy = gbr; - values.push(gbr); - } - - groupByIncrements.push(increment); - }); - return groupByIncrements; - } else { - return null; - } - } - - private getLevelIncrement(currentIncrement, currentHierarchy, prevHierarchy) { - if (currentHierarchy !== prevHierarchy && !!prevHierarchy && !!currentHierarchy) { - return this.getLevelIncrement(++currentIncrement, currentHierarchy.groupParent, prevHierarchy.groupParent); - } else { - return currentIncrement; - } - } - /** * @hidden */ @@ -782,12 +705,18 @@ export class IgxGridComponent extends IgxGridBaseComponent implements OnInit, Do /** * @hidden */ - protected scrollTo(row: number, column: number, page: number, groupByRecord?: IGroupByRecord): void { - if (groupByRecord && !this.isExpandedGroup(groupByRecord)) { - this.toggleGroup(groupByRecord); + protected scrollTo( row: any | number, column: any | number): void { + if (this.groupingExpressions && this.groupingExpressions.length) { + const groupByRecords = this.getGroupByRecords(); + const rowIndex = this.filteredSortedData.indexOf(row); + const groupByRecord = groupByRecords[rowIndex]; + + if (groupByRecord && !this.isExpandedGroup(groupByRecord)) { + this.toggleGroup(groupByRecord); + } } - super.scrollTo(row, column, page, groupByRecord); + super.scrollTo(row, column); } /** diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.search.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.search.spec.ts index a21d32f7431..d786a98f646 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.search.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.search.spec.ts @@ -817,6 +817,7 @@ describe('IgxGrid - search API', () => { grid.perPage = 10; fix.detectChanges(); + await wait(); highlight = grid.nativeElement.querySelector('.' + component.activeClass); expect(highlight).toBeNull(); diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html index 3a86d46045c..01e722b4854 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html @@ -1,5 +1,5 @@
{{ formatter ? formatter(value) : value }}
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts index 4b1dd737a08..fe4dd9768e7 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts @@ -489,41 +489,13 @@ export class IgxTreeGridComponent extends IgxGridBaseComponent { /** * @hidden */ - protected scrollTo(row: number, column: number, page: number): void { - const rowData = this.processedFlatData[row]; - const rowID = this._gridAPI.get_row_id(this.id, rowData); + protected scrollTo(row: any | number, column: any | number): void { + const rowID = this._gridAPI.get_row_id(this.id, row); const record = this.processedRecords.get(rowID); this._gridAPI.expand_path_to_recrod(this.id, record); + const rowIndex = this.processedExpandedFlatData.indexOf(row); - const matchInfo = this.fixMatchInfoIndexes({ - row: row, - column: column, - page: page - }); - - super.scrollTo(matchInfo.row, matchInfo.column, matchInfo.page); - } - - /** - * @hidden - */ - protected resolveSearchRowIndex(index: number, pagingIncrement: number, groupByIncrement: number, collapsedRowsCount: number) { - return index; - } - - /** - * @hidden - */ - protected fixMatchInfoIndexes(matchInfo: any): any { - const fixedMatchInfo: any = {}; - const rowData = this.processedFlatData[matchInfo.row]; - fixedMatchInfo.row = this.processedExpandedFlatData.indexOf(rowData); - fixedMatchInfo.page = this.paging ? Math.floor(fixedMatchInfo.row / this.perPage) : 0; - fixedMatchInfo.row = this.paging ? fixedMatchInfo.row % this.perPage : fixedMatchInfo.row; - fixedMatchInfo.column = matchInfo.column; - fixedMatchInfo.index = matchInfo.index; - - return fixedMatchInfo; + super.scrollTo(rowIndex, column); } /**