From 9932af3fce004554300ca035af67ed1badd8e57b Mon Sep 17 00:00:00 2001 From: MPopov Date: Wed, 16 Jan 2019 13:34:35 +0200 Subject: [PATCH 01/14] Adding cursor pointer when the column is sortable --- .../components/grid/_grid-component.scss | 8 ++++ .../styles/components/grid/_grid-theme.scss | 40 ++++++++++++++++++- .../src/lib/grids/grid-header.component.ts | 2 +- 3 files changed, 48 insertions(+), 2 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss index c71aa920e5c..d0a29c1a114 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss @@ -132,6 +132,14 @@ @extend %grid-cell-header !optional; } + @include e(th, $m: sortable) { + @extend %igx-grid__th--sortable !optional; + } + + @include e(th, $m: sorted) { + @extend %igx-grid__th--sorted !optional; + } + @include e(th, $m: number) { @extend %grid-cell-number !optional; } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss index 850282013e2..be038d99fe8 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss @@ -930,6 +930,24 @@ border-right: $grid-header-border; outline-style: none; overflow: hidden; + transition: color 250ms ease-in-out; + cursor: pointer; + + &:hover { + .sort-icon { + opacity: 1; + } + + color: igx-color($palette, 'grays', 900); + } + } + + %igx-grid__th--sortable { + cursor: pointer; + + %grid-cell-header-title { + cursor: pointer; + } } %grid-cell-header--filtering { @@ -984,10 +1002,30 @@ height: rem(15px); min-width: rem(15px); /* yeah IE, it really needs to be 15px wide... */ font-size: rem(15px); - color: igx-color($palette, 'secondary'); + color: igx-color($palette, 'grays', 500); + + &:hover { + color: igx-color($palette, 'secondary', 500); + } + } + } + + %igx-grid__th--sorted { + .sort-icon { + opacity: 1; + color: igx-color($palette, 'secondary', 500); + + &:hover { + color: igx-color($palette, 'secondary', 600); + } } } + .sort-icon { + opacity: 0; + transition: all 250ms ease-in-out; + } + %grid-cell-header-icons--cosy { height: map-get($grid-header-height, 'cosy'); } diff --git a/projects/igniteui-angular/src/lib/grids/grid-header.component.ts b/projects/igniteui-angular/src/lib/grids/grid-header.component.ts index 5a604feafd1..3d7e94d622d 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-header.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-header.component.ts @@ -80,7 +80,7 @@ export class IgxGridHeaderComponent implements DoCheck { // are material icons ligature strings return this.sortDirection === SortingDirection.Asc ? 'arrow_upward' : 'arrow_downward'; } - return 'none'; + return 'arrow_upward'; } get sorted() { From 40adf2341b1f57fe026ccef575d0df725e5f6aeb Mon Sep 17 00:00:00 2001 From: MPopov Date: Wed, 16 Jan 2019 15:28:38 +0200 Subject: [PATCH 02/14] Adding filtrable class styles --- .../components/grid/_grid-component.scss | 4 +++ .../styles/components/grid/_grid-theme.scss | 29 +++++++++++++------ 2 files changed, 24 insertions(+), 9 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss index d0a29c1a114..750257bfa1f 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss @@ -136,6 +136,10 @@ @extend %igx-grid__th--sortable !optional; } + @include e(th, $m: filtrable) { + @extend %igx-grid__th--filtrable !optional; + } + @include e(th, $m: sorted) { @extend %igx-grid__th--sorted !optional; } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss index be038d99fe8..fd1b5104519 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss @@ -931,15 +931,6 @@ outline-style: none; overflow: hidden; transition: color 250ms ease-in-out; - cursor: pointer; - - &:hover { - .sort-icon { - opacity: 1; - } - - color: igx-color($palette, 'grays', 900); - } } %igx-grid__th--sortable { @@ -948,6 +939,14 @@ %grid-cell-header-title { cursor: pointer; } + + &:hover { + color: igx-color($palette, 'grays', 900); + + .sort-icon { + opacity: 1; + } + } } %grid-cell-header--filtering { @@ -956,6 +955,16 @@ z-index: 3; } + %igx-grid__th--filtrable { + cursor: pointer; + + &:hover { + %grid-cell-header-title { + cursor: pointer; + } + } + } + %grid-cell-header--cosy { padding: map-get($grid-header-padding, 'cosy'); min-height: map-get($grid-header-height, 'cosy'); @@ -1011,6 +1020,8 @@ } %igx-grid__th--sorted { + color: igx-color($palette, 'grays', 900); + .sort-icon { opacity: 1; color: igx-color($palette, 'secondary', 500); From bb2a8915c23120b3d9135b2968a03dfd2ea5f89d Mon Sep 17 00:00:00 2001 From: SAndreeva Date: Thu, 17 Jan 2019 18:01:51 +0200 Subject: [PATCH 03/14] feat(sorting): apply class styles to header #3630 --- .../src/lib/grids/grid-header.component.html | 2 +- .../src/lib/grids/grid-header.component.ts | 29 ++++++++++++++----- .../grid-column-moving.sample.html | 11 +++---- .../grid-column-moving.sample.ts | 26 ++++++++--------- 4 files changed, 41 insertions(+), 27 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid-header.component.html b/projects/igniteui-angular/src/lib/grids/grid-header.component.html index 67d857a69a9..a8e9d5885cd 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-header.component.html +++ b/projects/igniteui-angular/src/lib/grids/grid-header.component.html @@ -7,6 +7,6 @@
- {{sortingIcon}} + {{sortingIcon}}
diff --git a/projects/igniteui-angular/src/lib/grids/grid-header.component.ts b/projects/igniteui-angular/src/lib/grids/grid-header.component.ts index 3d7e94d622d..e47d044a719 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-header.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-header.component.ts @@ -47,6 +47,8 @@ export class IgxGridHeaderComponent implements DoCheck { 'asc': this.ascending, 'desc': this.descending, 'igx-grid__th--number': this.column.dataType === DataType.Number, + 'igx-grid__th--sortable': this.column.sortable, + 'igx-grid__th--filtrable': this.column.filterable, 'igx-grid__th--sorted': this.sorted }; @@ -129,14 +131,7 @@ export class IgxGridHeaderComponent implements DoCheck { this.grid.filteringService.filteredColumn = this.column; } } else if (this.column.sortable) { - const groupingExpr = this.grid.groupingExpressions ? - this.grid.groupingExpressions.find((expr) => expr.fieldName === this.column.field) : null; - const sortDir = groupingExpr ? - this.sortDirection + 1 > SortingDirection.Desc ? SortingDirection.Asc : SortingDirection.Desc - : this.sortDirection + 1 > SortingDirection.Desc ? SortingDirection.None : this.sortDirection + 1; - this.sortDirection = sortDir; - this.grid.sort({ fieldName: this.column.field, dir: this.sortDirection, ignoreCase: this.column.sortingIgnoreCase, - strategy: this.column.sortStrategy }); + this.triggerSort(); } } } @@ -149,4 +144,22 @@ export class IgxGridHeaderComponent implements DoCheck { const expr = this.gridAPI.get(this.gridID).sortingExpressions.find((x) => x.fieldName === this.column.field); this.sortDirection = expr ? expr.dir : SortingDirection.None; } + + public onSortingIconClick(event) { + if (this.grid.filteringService.isFilterRowVisible && this.filteringService.filteredColumn === this.column) { + event.stopPropagation(); + this.triggerSort(); + } + } + + private triggerSort() { + const groupingExpr = this.grid.groupingExpressions ? + this.grid.groupingExpressions.find((expr) => expr.fieldName === this.column.field) : null; + const sortDir = groupingExpr ? + this.sortDirection + 1 > SortingDirection.Desc ? SortingDirection.Asc : SortingDirection.Desc + : this.sortDirection + 1 > SortingDirection.Desc ? SortingDirection.None : this.sortDirection + 1; + this.sortDirection = sortDir; + this.grid.sort({ fieldName: this.column.field, dir: this.sortDirection, ignoreCase: this.column.sortingIgnoreCase, + strategy: this.column.sortStrategy }); + } } diff --git a/src/app/grid-column-moving/grid-column-moving.sample.html b/src/app/grid-column-moving/grid-column-moving.sample.html index bd913fad11a..4738448f110 100644 --- a/src/app/grid-column-moving/grid-column-moving.sample.html +++ b/src/app/grid-column-moving/grid-column-moving.sample.html @@ -13,20 +13,21 @@ (onColumnMoving)="onColumnMoving($event)" (onColumnMovingEnd)="onColumnMovingEnd($event)" [rowSelectable]="true" + [rowEditable]="false" [paging]="false" [width]="'900px'" - [height]="'800px'"> + [height]="'600px'"> diff --git a/src/app/grid-column-moving/grid-column-moving.sample.ts b/src/app/grid-column-moving/grid-column-moving.sample.ts index 8b3b04dc2c0..bded11f0a86 100644 --- a/src/app/grid-column-moving/grid-column-moving.sample.ts +++ b/src/app/grid-column-moving/grid-column-moving.sample.ts @@ -18,19 +18,19 @@ export class GridColumnMovingSampleComponent implements OnInit { public ngOnInit(): void { this.columns = [ - { field: 'ID', width: 80, resizable: true, movable: true }, - { field: 'CompanyName', width: 150, resizable: true, movable: true, type: 'string'}, - { field: 'ContactName', width: 150, resizable: true, movable: true, type: 'string' }, - { field: 'ContactTitle', width: 150, resizable: true, movable: true, type: 'string' }, - { field: 'Address', width: 150, resizable: true, movable: true, type: 'string' }, - { field: 'City', width: 150, resizable: true, movable: true, type: 'string' }, - { field: 'Region', width: 150, resizable: true, movable: true, type: 'string' }, - { field: 'PostalCode', width: 150, resizable: true, movable: true, type: 'string' }, - { field: 'Phone', width: 150, resizable: true, movable: true, type: 'string' }, - { field: 'Fax', width: 150, resizable: true, movable: true, type: 'string' }, - { field: 'Employees', width: 150, resizable: true, movable: true, type: 'number' }, - { field: 'DateCreated', width: 150, resizable: true, movable: true, type: 'date' }, - { field: 'Contract', width: 150, resizable: true, movable: true, type: 'boolean' } + { field: 'ID', width: 150, resizable: true, movable: true, sortable: false, filterable: true, groupable: true, summary: true }, + { field: 'CompanyName', width: 150, resizable: true, movable: true, sortable: true, filterable: true, groupable: true, summary: true, type: 'string'}, + { field: 'ContactName', width: 150, resizable: true, movable: true, sortable: true, filterable: true, groupable: true, summary: true, type: 'string' }, + { field: 'ContactTitle', width: 150, resizable: true, movable: true, sortable: true, filterable: true, groupable: true, summary: true, type: 'string' }, + { field: 'Address', width: 150, resizable: true, movable: true, sortable: true, filterable: true, groupable: true, summary: true, type: 'string' }, + { field: 'City', width: 150, resizable: true, movable: true, sortable: false, filterable: false, groupable: true, summary: true, type: 'string' }, + { field: 'Region', width: 150, resizable: true, movable: true, sortable: true, filterable: true, groupable: true, summary: true, type: 'string' }, + { field: 'PostalCode', width: 150, resizable: true, movable: true, sortable: true, filterable: true, groupable: true, summary: true, type: 'string' }, + { field: 'Phone', width: 150, resizable: true, movable: true, sortable: true, filterable: true, groupable: true, summary: true, type: 'string' }, + { field: 'Fax', width: 150, resizable: true, movable: true, sortable: true, filterable: true, groupable: true, summary: true, type: 'string' }, + { field: 'Employees', width: 150, resizable: true, movable: true, sortable: true, filterable: true, groupable: true, summary: false, type: 'number' }, + { field: 'DateCreated', width: 150, resizable: true, movable: true, sortable: true, filterable: true, groupable: true, summary: false, type: 'date' }, + { field: 'Contract', width: 150, resizable: true, movable: true, sortable: true, filterable: false, groupable: true, summary: true, type: 'boolean' } ]; this.data = [ { From 18d1cc224ebf68deb8423361a54dad0c00f5e25e Mon Sep 17 00:00:00 2001 From: SAndreeva Date: Thu, 17 Jan 2019 18:10:29 +0200 Subject: [PATCH 04/14] refactor(*): icon click handler logic #3630 --- .../igniteui-angular/src/lib/grids/grid-header.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid-header.component.ts b/projects/igniteui-angular/src/lib/grids/grid-header.component.ts index e47d044a719..f7f35800d4b 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-header.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-header.component.ts @@ -146,7 +146,7 @@ export class IgxGridHeaderComponent implements DoCheck { } public onSortingIconClick(event) { - if (this.grid.filteringService.isFilterRowVisible && this.filteringService.filteredColumn === this.column) { + if (this.grid.filteringService.isFilterRowVisible) { event.stopPropagation(); this.triggerSort(); } From c493002d325a158cf2f030cf675a7d84d169b6e8 Mon Sep 17 00:00:00 2001 From: SAndreeva Date: Fri, 18 Jan 2019 10:18:43 +0200 Subject: [PATCH 05/14] feat(sorting): apply filterable class correctly #3630 --- .../igniteui-angular/src/lib/grids/grid-header.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid-header.component.ts b/projects/igniteui-angular/src/lib/grids/grid-header.component.ts index f7f35800d4b..b49a8f91214 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-header.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-header.component.ts @@ -48,7 +48,7 @@ export class IgxGridHeaderComponent implements DoCheck { 'desc': this.descending, 'igx-grid__th--number': this.column.dataType === DataType.Number, 'igx-grid__th--sortable': this.column.sortable, - 'igx-grid__th--filtrable': this.column.filterable, + 'igx-grid__th--filtrable': this.column.filterable && this.grid.filteringService.isFilterRowVisible, 'igx-grid__th--sorted': this.sorted }; From 36d413b9d4380faf3064d97c033bd0bb7b969291 Mon Sep 17 00:00:00 2001 From: SAndreeva Date: Fri, 18 Jan 2019 11:19:36 +0200 Subject: [PATCH 06/14] fix(sorting): failing test #3630 --- .../igniteui-angular/src/lib/grids/grid/grid.sorting.spec.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.sorting.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.sorting.spec.ts index c60f18a5f4d..45714064a1f 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.sorting.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.sorting.spec.ts @@ -11,7 +11,6 @@ import { DefaultSortingStrategy, ISortingStrategy } from '../../data-operations/ import { IgxGridCellComponent } from '../cell.component'; import { configureTestSuite } from '../../test-utils/configure-suite'; -const SORTING_ICON_NONE_CONTENT = 'none'; const SORTING_ICON_ASC_CONTENT = 'arrow_upward'; const SORTING_ICON_DESC_CONTENT = 'arrow_downward'; @@ -303,7 +302,7 @@ describe('IgxGrid - Grid Sorting', () => { it('Should have a valid sorting icon when sorting using the API.', () => { const sortingIcon = fixture.debugElement.query(By.css('.sort-icon')); - expect(sortingIcon.nativeElement.textContent.trim()).toEqual(SORTING_ICON_NONE_CONTENT); + expect(sortingIcon.nativeElement.textContent.trim()).toEqual(SORTING_ICON_ASC_CONTENT); grid.sort({ fieldName: 'ID', dir: SortingDirection.Asc, ignoreCase: true}); fixture.detectChanges(); @@ -315,7 +314,7 @@ describe('IgxGrid - Grid Sorting', () => { grid.clearSort(); fixture.detectChanges(); - expect(sortingIcon.nativeElement.textContent.trim()).toEqual(SORTING_ICON_NONE_CONTENT); + expect(sortingIcon.nativeElement.textContent.trim()).toEqual(SORTING_ICON_ASC_CONTENT); }); it(`Should allow sorting using a custom Sorting Strategy.`, () => { From d3cef49c4e90d793dfa5eef0b16de9be9713c179 Mon Sep 17 00:00:00 2001 From: SAndreeva Date: Fri, 18 Jan 2019 15:20:20 +0200 Subject: [PATCH 07/14] test(sorting): integration with filtering ui #3630 --- .../src/lib/grids/grid/grid.sorting.spec.ts | 42 ++++++++++++++++++- 1 file changed, 41 insertions(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.sorting.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.sorting.spec.ts index 45714064a1f..68865a3eb1f 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.sorting.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.sorting.spec.ts @@ -10,6 +10,9 @@ import { SampleTestData } from '../../test-utils/sample-test-data.spec'; import { DefaultSortingStrategy, ISortingStrategy } from '../../data-operations/sorting-strategy'; import { IgxGridCellComponent } from '../cell.component'; import { configureTestSuite } from '../../test-utils/configure-suite'; +import { IgxGridFilteringRowComponent } from '../filtering/grid-filtering-row.component'; +import { IgxChipComponent } from '../../chips/chip.component'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; const SORTING_ICON_ASC_CONTENT = 'arrow_upward'; const SORTING_ICON_DESC_CONTENT = 'arrow_downward'; @@ -25,7 +28,7 @@ describe('IgxGrid - Grid Sorting', () => { GridDeclaredColumnsComponent, SortByParityComponent ], - imports: [IgxGridModule.forRoot()] + imports: [NoopAnimationsModule, IgxGridModule.forRoot()] }) .compileComponents(); })); @@ -340,6 +343,43 @@ describe('IgxGrid - Grid Sorting', () => { expect(isFirstHalfOdd).toEqual(true); expect(isSecondHalfEven).toEqual(true); }); + + it('Should sort grid by clicking on sorting icon when FilterRow is visible.', () => { + const fixture = TestBed.createComponent(GridDeclaredColumnsComponent); + const grid = fixture.componentInstance.grid; + + grid.allowFiltering = true; + fixture.detectChanges(); + + const initialChips = fixture.debugElement.queryAll(By.directive(IgxChipComponent)); + + initialChips[0].nativeElement.click(); + fixture.detectChanges(); + + const filteringRow = fixture.debugElement.query(By.directive(IgxGridFilteringRowComponent)); + expect(filteringRow).toBeDefined(); + + const headers = fixture.debugElement.queryAll(By.css('igx-grid-header')); + headers[0].nativeElement.click(); + + expect(grid.headerGroups.toArray()[0].isFiltered).toBeTruthy(); + + const sortingIcon = fixture.debugElement.query(By.css('.sort-icon')); + expect(sortingIcon.nativeElement.textContent.trim()).toEqual(SORTING_ICON_ASC_CONTENT); + + sortingIcon.nativeElement.click(); + sortingIcon.nativeElement.click(); + fixture.detectChanges(); + + expect(sortingIcon.nativeElement.textContent.trim()).toEqual(SORTING_ICON_DESC_CONTENT); + expect(grid.getCellByColumn(0, 'ID').value).toEqual(7); + + headers[1].nativeElement.click(); + fixture.detectChanges(); + + expect(grid.headerGroups.toArray()[1].isFiltered).toBeTruthy(); + }); + }); @Component({ From f5a6036a7ae12a12b82b64a6f6e796fd3cdd1766 Mon Sep 17 00:00:00 2001 From: SAndreeva Date: Fri, 18 Jan 2019 15:41:23 +0200 Subject: [PATCH 08/14] fix(*): introduced lint errors #3630 --- .../src/lib/grids/grid/grid.sorting.spec.ts | 51 +++++++++---------- 1 file changed, 24 insertions(+), 27 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.sorting.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.sorting.spec.ts index 68865a3eb1f..7ca1b515d41 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.sorting.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.sorting.spec.ts @@ -320,34 +320,7 @@ describe('IgxGrid - Grid Sorting', () => { expect(sortingIcon.nativeElement.textContent.trim()).toEqual(SORTING_ICON_ASC_CONTENT); }); - it(`Should allow sorting using a custom Sorting Strategy.`, () => { - fixture = TestBed.createComponent(SortByParityComponent); - grid = fixture.componentInstance.grid; - fixture.componentInstance.data.push( - { ID: 8, Name: 'Brad', LastName: 'Walker', Region: 'DD' }, - { ID: 9, Name: 'Mary', LastName: 'Smith', Region: 'OC' }, - { ID: 10, Name: 'Brad', LastName: 'Smith', Region: 'BD' }, - ); - fixture.detectChanges(); - grid.sort({ - fieldName: 'ID', - dir: SortingDirection.Desc, - ignoreCase: false, - strategy: new SortByParityComponent() - }); - fixture.detectChanges(); - const oddHalf: IgxGridCellComponent[] = grid.getColumnByName('ID').cells.slice(0, 5); - const evenHalf: IgxGridCellComponent[] = grid.getColumnByName('ID').cells.slice(5); - const isFirstHalfOdd: boolean = oddHalf.every(cell => cell.value % 2 === 1); - const isSecondHalfEven: boolean = evenHalf.every(cell => cell.value % 2 === 0); - expect(isFirstHalfOdd).toEqual(true); - expect(isSecondHalfEven).toEqual(true); - }); - it('Should sort grid by clicking on sorting icon when FilterRow is visible.', () => { - const fixture = TestBed.createComponent(GridDeclaredColumnsComponent); - const grid = fixture.componentInstance.grid; - grid.allowFiltering = true; fixture.detectChanges(); @@ -380,6 +353,30 @@ describe('IgxGrid - Grid Sorting', () => { expect(grid.headerGroups.toArray()[1].isFiltered).toBeTruthy(); }); + + it(`Should allow sorting using a custom Sorting Strategy.`, () => { + fixture = TestBed.createComponent(SortByParityComponent); + grid = fixture.componentInstance.grid; + fixture.componentInstance.data.push( + { ID: 8, Name: 'Brad', LastName: 'Walker', Region: 'DD' }, + { ID: 9, Name: 'Mary', LastName: 'Smith', Region: 'OC' }, + { ID: 10, Name: 'Brad', LastName: 'Smith', Region: 'BD' }, + ); + fixture.detectChanges(); + grid.sort({ + fieldName: 'ID', + dir: SortingDirection.Desc, + ignoreCase: false, + strategy: new SortByParityComponent() + }); + fixture.detectChanges(); + const oddHalf: IgxGridCellComponent[] = grid.getColumnByName('ID').cells.slice(0, 5); + const evenHalf: IgxGridCellComponent[] = grid.getColumnByName('ID').cells.slice(5); + const isFirstHalfOdd: boolean = oddHalf.every(cell => cell.value % 2 === 1); + const isSecondHalfEven: boolean = evenHalf.every(cell => cell.value % 2 === 0); + expect(isFirstHalfOdd).toEqual(true); + expect(isSecondHalfEven).toEqual(true); + }); }); @Component({ From c10ace01e70b4a4b13862c1ea3b5c69196efbd10 Mon Sep 17 00:00:00 2001 From: MartinKamenov Date: Thu, 31 Jan 2019 15:00:23 +0200 Subject: [PATCH 09/14] chore(*): Switched expand/colapse icons to be same as in the hierarchical grid. --- .../igniteui-angular/src/lib/grids/grid/grid.component.html | 2 +- .../src/lib/grids/grid/groupby-row.component.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html index 1594525bc54..551c3054f8e 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html @@ -45,7 +45,7 @@
- reorder + unfold_less
diff --git a/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.html b/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.html index 96e7b7d00fa..25e4bdf61e5 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.html +++ b/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.html @@ -1,6 +1,6 @@
- chevron_right + expand_less expand_more
From 228fdeb44cb2616e47dcb53032963246a60550f0 Mon Sep 17 00:00:00 2001 From: MartinKamenov Date: Fri, 1 Feb 2019 16:34:48 +0200 Subject: [PATCH 10/14] chore(*): Added correct icons for the global expanded state of the grid --- .../igniteui-angular/src/lib/grids/grid/grid.component.html | 3 ++- .../src/lib/grids/grid/groupby-row.component.html | 4 ++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html index 551c3054f8e..e5e3f7f55bd 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html @@ -45,7 +45,8 @@
- unfold_less + unfold_less + unfold_more
diff --git a/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.html b/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.html index 25e4bdf61e5..a2d6d08b854 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.html +++ b/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.html @@ -1,7 +1,7 @@
- expand_less - expand_more + expand_more + expand_less
From 3ee97a81804c579c70db4d26f64506c9520e660f Mon Sep 17 00:00:00 2001 From: Diyan Dimitrov Date: Tue, 5 Feb 2019 11:37:03 +0200 Subject: [PATCH 11/14] test(search): modify test to verify issue #3747 --- .../src/lib/grids/grid/grid.search.spec.ts | 22 +++++++++++-------- 1 file changed, 13 insertions(+), 9 deletions(-) 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 66d8a1f0d28..8905aea8742 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 @@ -351,36 +351,40 @@ describe('IgxGrid - search API', () => { }); it('Should scroll properly when using paging', async () => { + grid.height = '240px'; grid.paging = true; grid.perPage = 7; - const searchString = 'assoc'; fix.detectChanges(); + await wait(16); + const searchString = 'assoc'; grid.findNext(searchString); - grid.findNext(searchString); - await wait(); fix.detectChanges(); + await wait(16); - expect(grid.page).toBe(1); + expect(grid.page).toBe(0); let highlight = grid.nativeElement.querySelector('.' + fix.componentInstance.activeClass); expect(highlight).not.toBeNull(); + expect(grid.nativeElement.querySelectorAll('.' + fix.componentInstance.highlightClass).length).toBe(1); - grid.findPrev(searchString); - await wait(); + grid.findNext(searchString); fix.detectChanges(); + await wait(16); + expect(grid.page).toBe(1); highlight = grid.nativeElement.querySelector('.' + fix.componentInstance.activeClass); expect(highlight).not.toBeNull(); expect(grid.nativeElement.querySelectorAll('.' + fix.componentInstance.highlightClass).length).toBe(1); - expect(grid.page).toBe(0); + grid.findPrev(searchString); - await wait(); + await wait(50); fix.detectChanges(); + await wait(16); + expect(grid.page).toBe(0); highlight = grid.nativeElement.querySelector('.' + fix.componentInstance.activeClass); expect(highlight).not.toBeNull(); expect(grid.nativeElement.querySelectorAll('.' + fix.componentInstance.highlightClass).length).toBe(1); - expect(grid.page).toBe(1); }); it('Hidden columns shouldn\'t be part of the search', () => { From 21ecefb6cc92fc6e5091a758280416c495946cda Mon Sep 17 00:00:00 2001 From: Diyan Dimitrov Date: Tue, 5 Feb 2019 11:40:26 +0200 Subject: [PATCH 12/14] fix(search): delay scrolling on page change #3747 --- .../src/lib/grids/grid-base.component.ts | 20 +++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) 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 da10f3e073f..f8818361ae5 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -26,7 +26,7 @@ import { Optional } from '@angular/core'; import { Subject } from 'rxjs'; -import { takeUntil } from 'rxjs/operators'; +import { takeUntil, first } from 'rxjs/operators'; import { IgxSelectionAPIService } from '../core/selection'; import { cloneArray, isEdge, isNavigationKey, mergeObjects, CancelableEventArgs, flatten } from '../core/utils'; import { DataType, DataUtil } from '../data-operations/data-util'; @@ -4414,13 +4414,25 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements protected scrollTo(row: any | number, column: any | number): void { let rowIndex = typeof row === 'number' ? row : this.filteredSortedData.indexOf(row); let columnIndex = typeof column === 'number' ? column : this.getColumnByName(column).visibleIndex; + let delayScrolling = false; if (this.paging) { - this.page = Math.floor(rowIndex / this.perPage); - rowIndex = rowIndex - this.page * this.perPage; + const page = Math.floor(rowIndex / this.perPage); + rowIndex = rowIndex - page * this.perPage; + + if (this.page !== page) { + delayScrolling = true; + this.page = page; + } } - this.scrollDirective(this.verticalScrollContainer, rowIndex); + if (delayScrolling) { + this.verticalScrollContainer.onDataChanged.pipe(first()).subscribe(() => { + this.scrollDirective(this.verticalScrollContainer, rowIndex); + }); + } else { + this.scrollDirective(this.verticalScrollContainer, rowIndex); + } const scrollRow = this.rowList.find(r => r.virtDirRow); const virtDir = scrollRow ? scrollRow.virtDirRow : null; From 9f76c92862d24b836d56455aca7e059988db4f17 Mon Sep 17 00:00:00 2001 From: Konstantin Dinev Date: Tue, 5 Feb 2019 22:00:42 +0200 Subject: [PATCH 13/14] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index fac975188e7..879d8224728 100644 --- a/README.md +++ b/README.md @@ -150,7 +150,7 @@ npm start You can include Ignite UI for Angular in your project as a dependency using the NPM package. -`npm install igniteui-angular --save-dev` +`npm install igniteui-angular` ## Contributing [Coding Guidelines](../../wiki//Coding-guidelines-for-Ignite-UI-for-Angular) @@ -164,7 +164,7 @@ The [Crypto Portfolio App](https://github.com/IgniteUI/crypto-portfolio-app) is To get started with the Data Grid, use the steps in the [grid walk-through](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid.html). -All help, related API documents and walk-throughs can be found for each control [here](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid.html). +All help, related API documents and walk-throughs can be found for each control [here](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/getting_started.html). ## Roadmap [Roadmap document](https://github.com/IgniteUI/igniteui-angular/blob/master/ROADMAP.md) From 03d62e1e9463f15fa6fa282e06401c0fb1753501 Mon Sep 17 00:00:00 2001 From: Aleksandar Kamenov Date: Wed, 6 Feb 2019 11:30:49 +0200 Subject: [PATCH 14/14] fix(api-dropdown): change option links and diversify the sessionStore Closes #3828, #3834 --- .../assets/js/versioning/tag-versions.req.js | 13 ++++++------- .../assets/js/src/versioning/tag-versions.req.js | 13 ++++++------- 2 files changed, 12 insertions(+), 14 deletions(-) diff --git a/extras/docs/themes/sassdoc/assets/js/versioning/tag-versions.req.js b/extras/docs/themes/sassdoc/assets/js/versioning/tag-versions.req.js index a954d4e5da4..4c1956b8485 100644 --- a/extras/docs/themes/sassdoc/assets/js/versioning/tag-versions.req.js +++ b/extras/docs/themes/sassdoc/assets/js/versioning/tag-versions.req.js @@ -12,26 +12,25 @@ }).done((data) => { let folders = data.folders; const select = $('#versions'); - const lastVersion = folders.slice(-1)[0]; - folders = folders.reverse(); + folders.forEach(f => { select.append($('