Skip to content

Commit

Permalink
Fix empty space in treeGrid after expand/collapse (#3554)
Browse files Browse the repository at this point in the history 
* test(tree-grid): add test for issue #3409

* fix(grid): call recalcUpdateSizes in requestAnimationFrame #3409

* fix(grid): add a row only when less than maxItemSize #3409
  • Loading branch information
@DiyanDimitrov @rkaraivanov
DiyanDimitrov authored and rkaraivanov committed Jan 14, 2019
1 parent fe95cdb commit 8c60579
Show file tree
Hide file tree
Showing 4 changed files with 88 additions and 8 deletions.
17 changes: 11 additions & 6 deletions projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -961,9 +961,12 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
} else {
arr.push(item);
length = dimension === this.igxForSizePropName ? arr.length + 1 : arr.length;
if (dimension === 'height' && sum - availableSize < parseInt(this.igxForItemSize, 10)) {
// add one more for vertical smooth scroll
length++;
if (dimension === 'height') {
const maxItemSize = arr.reduce((pr, c) => Math.max(pr, this._getItemSize(c, dimension)), 0);
if (sum - availableSize < maxItemSize) {
// add one more for vertical smooth scroll
length++;
}
}
arr.splice(0, 1);
}
Expand Down Expand Up @@ -1217,9 +1220,11 @@ export class IgxGridForOfDirective<T> extends IgxForOfDirective<T> implements On
// if data has been changed while container is scrolled
// should update scroll top/left according to change so that same startIndex is in view
if (Math.abs(diff) > 0 && scr.scrollTop > 0) {
this.recalcUpdateSizes();
const offset = parseInt(this.dc.instance._viewContainer.element.nativeElement.style.top, 10);
scr.scrollTop = this.sizesCache[this.state.startIndex] - offset;
requestAnimationFrame(() => {
this.recalcUpdateSizes();
const offset = parseInt(this.dc.instance._viewContainer.element.nativeElement.style.top, 10);
scr.scrollTop = this.sizesCache[this.state.startIndex] - offset;
});
}
}

Expand Down
30 changes: 28 additions & 2 deletions projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-summaries.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,14 @@ import { IgxTreeGridModule } from './index';
import {
IgxTreeGridSummariesComponent,
IgxTreeGridSummariesKeyComponent,
IgxTreeGridCustomSummariesComponent
IgxTreeGridCustomSummariesComponent,
IgxTreeGridSummariesScrollingComponent
} from '../../test-utils/tree-grid-components.spec';
import { configureTestSuite } from '../../test-utils/configure-suite';
import { HelperUtils } from '../../test-utils/helper-utils.spec';
import { wait } from '../../test-utils/ui-interactions.spec';
import { IgxNumberFilteringOperand } from 'igniteui-angular';
import { IgxTreeGridRowComponent } from './tree-grid-row.component';

describe('IgxTreeGrid - Summaries', () => {
configureTestSuite();
Expand All @@ -18,7 +20,8 @@ describe('IgxTreeGrid - Summaries', () => {
declarations: [
IgxTreeGridSummariesComponent,
IgxTreeGridSummariesKeyComponent,
IgxTreeGridCustomSummariesComponent
IgxTreeGridCustomSummariesComponent,
IgxTreeGridSummariesScrollingComponent
],
imports: [
BrowserAnimationsModule,
Expand Down Expand Up @@ -685,6 +688,29 @@ describe('IgxTreeGrid - Summaries', () => {
verifySummaryForRow847(fix, 6);
});

it('should render rows correctly after collapse and expand', async() => {
const fix = TestBed.createComponent(IgxTreeGridSummariesScrollingComponent);
fix.detectChanges();
await wait(16);
const treeGrid = fix.componentInstance.treeGrid;

(treeGrid as any).scrollTo(23, 0, 0);
fix.detectChanges();
await wait(16);

let row = treeGrid.getRowByKey(15);
(row as IgxTreeGridRowComponent).expanded = false;
fix.detectChanges();
await wait(16);

row = treeGrid.getRowByKey(15);
(row as IgxTreeGridRowComponent).expanded = true;
fix.detectChanges();
await wait(16);

expect(treeGrid.dataRowList.length).toEqual(9);
});

function verifySummaryForRow147(fixture, vissibleIndex) {
const summaryRow = HelperUtils.getSummaryRowByDataRowIndex(fixture, vissibleIndex);
HelperUtils.verifyColumnSummaries(summaryRow, 0, [], []);
Expand Down
34 changes: 34 additions & 0 deletions projects/igniteui-angular/src/lib/test-utils/sample-test-data.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -945,6 +945,40 @@ export class SampleTestData {
}
])

public static employeeScrollingData = () => ([
{ 'Salary': 2500, 'employeeID': 0, 'PID': -1, 'firstName': 'Andrew', 'lastName': 'Fuller', 'Title': 'Vice President, Sales' },
{ 'Salary': 3500, 'employeeID': 1, 'PID': -1, 'firstName': 'Jonathan', 'lastName': 'Smith', 'Title': 'Human resources' },
{ 'Salary': 1500, 'employeeID': 2, 'PID': -1, 'firstName': 'Nancy', 'lastName': 'Davolio', 'Title': 'CFO' },
{ 'Salary': 2500, 'employeeID': 3, 'PID': -1, 'firstName': 'Steven', 'lastName': 'Buchanan', 'Title': 'CTO' },
// sub of ID 0
{ 'Salary': 2500, 'employeeID': 4, 'PID': 0, 'firstName': 'Janet', 'lastName': 'Leverling', 'Title': 'Sales Manager' },
{ 'Salary': 3500, 'employeeID': 5, 'PID': 0, 'firstName': 'Laura', 'lastName': 'Callahan', 'Title': 'Inside Sales Coordinator' },
{ 'Salary': 1500, 'employeeID': 6, 'PID': 0, 'firstName': 'Margaret', 'lastName': 'Peacock', 'Title': 'Sales Representative' },
{ 'Salary': 2500, 'employeeID': 7, 'PID': 0, 'firstName': 'Michael', 'lastName': 'Suyama', 'Title': 'Sales Representative' },
// sub of ID 4
{ 'Salary': 2500, 'employeeID': 8, 'PID': 4, 'firstName': 'Anne', 'lastName': 'Dodsworth', 'Title': 'Sales Representative' },
{ 'Salary': 3500, 'employeeID': 9, 'PID': 4, 'firstName': 'Danielle', 'lastName': 'Davis', 'Title': 'Sales Representative' },
{ 'Salary': 1500, 'employeeID': 10, 'PID': 4, 'firstName': 'Robert', 'lastName': 'King', 'Title': 'Sales Representative' },
// sub of ID 2
{ 'Salary': 2500, 'employeeID': 11, 'PID': 2, 'firstName': 'Peter', 'lastName': 'Lewis', 'Title': 'Chief Accountant' },
{ 'Salary': 3500, 'employeeID': 12, 'PID': 2, 'firstName': 'Ryder', 'lastName': 'Zenaida', 'Title': 'Accountant' },
{ 'Salary': 1500, 'employeeID': 13, 'PID': 2, 'firstName': 'Wang', 'lastName': 'Mercedes', 'Title': 'Accountant' },
// sub of ID 3
{ 'Salary': 1500, 'employeeID': 14, 'PID': 3, 'firstName': 'Theodore', 'lastName': 'Zia', 'Title': 'Software Architect' },
{ 'Salary': 4500, 'employeeID': 15, 'PID': 3, 'firstName': 'Lacota', 'lastName': 'Mufutau', 'Title': 'Product Manager' },
// sub of ID 16
{ 'Salary': 2500, 'employeeID': 16, 'PID': 15, 'firstName': 'Jin', 'lastName': 'Elliott', 'Title': 'Product Owner' },
{ 'Salary': 3500, 'employeeID': 17, 'PID': 15, 'firstName': 'Armand', 'lastName': 'Ross', 'Title': 'Product Owner' },
{ 'Salary': 1500, 'employeeID': 18, 'PID': 15, 'firstName': 'Dane', 'lastName': 'Rodriquez', 'Title': 'Team Leader' },
// sub of ID 19
{ 'Salary': 2500, 'employeeID': 19, 'PID': 18, 'firstName': 'Declan', 'lastName': 'Lester', 'Title': 'Senior Software Developer' },
{ 'Salary': 3500, 'employeeID': 20, 'PID': 18, 'firstName': 'Bernard', 'lastName': 'Jarvis', 'Title': 'Senior Software Developer' },
{ 'Salary': 1500, 'employeeID': 21, 'PID': 18, 'firstName': 'Jason', 'lastName': 'Clark', 'Title': 'QA' },
{ 'Salary': 1500, 'employeeID': 22, 'PID': 18, 'firstName': 'Mark', 'lastName': 'Young', 'Title': 'QA' },
// sub of ID 20
{ 'Salary': 1500, 'employeeID': 23, 'PID': 20, 'firstName': 'Jeremy', 'lastName': 'Donaldson', 'Title': 'Software Developer' }
])

/* Small tree data: Every employee node has ID, Name, HireDate, Age and Employees */
public static employeeSmallTreeData = () => ([
{
Expand Down
15 changes: 15 additions & 0 deletions projects/igniteui-angular/src/lib/test-utils/tree-grid-components.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -441,3 +441,18 @@ export class IgxTreeGridWrappedInContComponent {
}

}

@Component({
template: `
<igx-tree-grid #treeGrid [data]="data" primaryKey="employeeID" foreignKey="PID" width="900px" height="800px">
<igx-column [field]="'employeeID'" dataType="number"></igx-column>
<igx-column [field]="'firstName'"></igx-column>
<igx-column [field]="'lastName'"></igx-column>
<igx-column [field]="'Salary'" dataType="number" [hasSummary]="true" ></igx-column>
</igx-tree-grid>
`
})
export class IgxTreeGridSummariesScrollingComponent {
@ViewChild(IgxTreeGridComponent) public treeGrid: IgxTreeGridComponent;
public data = SampleTestData.employeeScrollingData();
}

0 comments on commit 8c60579

Please sign in to comment.