Skip to content

Commit 8a064db

Browse files
ddinchevaddincheva
committed
Merge branch 'ddincheva/gridPaging12.1' of https://github.com/IgniteUI/igniteui-angular into ddincheva/gridPaging12.1
2 parents 18010d9 + ae6ddaa commit 8a064db

File tree

22 files changed

+149
-45
lines changed

22 files changed

+149
-45
lines changed

‎projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
<ng-template #defTemplate>
2727
<igx-input-group [type]="this.type" [displayDensity]="this.displayDensity" (click)="this.open()">
2828
<!-- only set mask placeholder when empty, otherwise input group might use it as label if none is set -->
29-
<input #singleInput igxInput type="text" readonly [placeholder]="this.value ? '' : singleInputFormat"
29+
<input #singleInput igxInput type="text" readonly [disabled]="this.disabled" [placeholder]="this.value ? '' : singleInputFormat"
3030
role="combobox" aria-haspopup="grid" [attr.aria-expanded]="!this.collapsed"
3131
[attr.aria-labelledby]="this.label?.id"
3232
[value]="this.value | dateRange: this.appliedFormat : this.locale : this.formatter" />

‎projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts

Lines changed: 88 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { ComponentFixture, TestBed, fakeAsync, tick, waitForAsync, flush } from '@angular/core/testing';
2-
import { Component, OnInit, ViewChild, DebugElement } from '@angular/core';
2+
import { Component, OnInit, ViewChild, DebugElement, ChangeDetectionStrategy } from '@angular/core';
33
import { IgxInputGroupModule } from '../input-group/public_api';
44
import { PickerInteractionMode } from '../date-common/types';
55
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -21,6 +21,8 @@ import { AnimationMetadata, AnimationOptions } from '@angular/animations';
2121
import { IgxPickersCommonModule } from '../date-common/public_api';
2222
import { IgxCalendarContainerComponent, IgxCalendarContainerModule } from '../date-common/calendar-container/calendar-container.component';
2323
import { IgxCalendarComponent } from '../calendar/public_api';
24+
import { Subject } from 'rxjs';
25+
import { CommonModule } from '@angular/common';
2426

2527
// The number of milliseconds in one day
2628
const ONE_DAY = 1000 * 60 * 60 * 24;
@@ -224,7 +226,7 @@ describe('IgxDateRangePicker', () => {
224226
});
225227

226228
it('should validate correctly minValue and maxValue', () => {
227-
const dateRange = new IgxDateRangePickerComponent(elementRef, null, platform, mockInjector, null, null);
229+
const dateRange = new IgxDateRangePickerComponent(elementRef, null, platform, mockInjector, null, null, null);
228230
dateRange.ngOnInit();
229231

230232
// dateRange.calendar = calendar;
@@ -249,7 +251,7 @@ describe('IgxDateRangePicker', () => {
249251
});
250252

251253
it('should disable calendar dates when min and/or max values as dates are provided', () => {
252-
const dateRange = new IgxDateRangePickerComponent(elementRef, 'en-US', platform, mockInjector, ngModuleRef, overlay);
254+
const dateRange = new IgxDateRangePickerComponent(elementRef, 'en-US', platform, mockInjector, ngModuleRef, null, overlay);
253255
dateRange.ngOnInit();
254256

255257
spyOnProperty((dateRange as any), 'calendar').and.returnValue(mockCalendar);
@@ -275,7 +277,7 @@ describe('IgxDateRangePicker', () => {
275277
});
276278

277279
it('should disable calendar dates when min and/or max values as strings are provided', fakeAsync(() => {
278-
const dateRange = new IgxDateRangePickerComponent(elementRef, null, platform, mockInjector, null, null);
280+
const dateRange = new IgxDateRangePickerComponent(elementRef, null, platform, mockInjector, null, null, null);
279281
dateRange.ngOnInit();
280282

281283
spyOnProperty((dateRange as any), 'calendar').and.returnValue(mockCalendar);
@@ -332,17 +334,19 @@ describe('IgxDateRangePicker', () => {
332334
TestBed.configureTestingModule({
333335
declarations: [
334336
DateRangeTestComponent,
335-
DateRangeDefaultComponent
337+
DateRangeDefaultComponent,
338+
DateRangeDisabledComponent
336339
],
337340
imports: [
341+
CommonModule,
338342
IgxDateRangePickerModule,
339343
IgxDateTimeEditorModule,
340344
IgxInputGroupModule,
341345
IgxIconModule,
342346
FormsModule,
343347
NoopAnimationsModule,
344348
IgxPickersCommonModule,
345-
IgxCalendarContainerModule,
349+
IgxCalendarContainerModule
346350
]
347351
})
348352
.compileComponents();
@@ -732,6 +736,28 @@ describe('IgxDateRangePicker', () => {
732736
fixture.detectChanges();
733737
expect(fixture.componentInstance.dateRange.collapsed).toBeTruthy();
734738
}));
739+
740+
it('should properly set/update disabled when ChangeDetectionStrategy.OnPush is used', fakeAsync(() => {
741+
const testFixture = TestBed
742+
.createComponent(DateRangeDisabledComponent) as ComponentFixture<DateRangeDisabledComponent>;
743+
testFixture.detectChanges();
744+
dateRange = testFixture.componentInstance.dateRange;
745+
const disabled$ = testFixture.componentInstance.disabled$;
746+
747+
disabled$.next(true);
748+
testFixture.detectChanges();
749+
expect(dateRange.inputDirective.disabled).toBeTrue();
750+
751+
disabled$.next(false);
752+
testFixture.detectChanges();
753+
expect(dateRange.inputDirective.disabled).toBeFalse();
754+
755+
disabled$.next(true);
756+
testFixture.detectChanges();
757+
expect(dateRange.inputDirective.disabled).toBeTrue();
758+
759+
disabled$.complete();
760+
}));
735761
});
736762

737763
describe('Two Inputs', () => {
@@ -743,9 +769,12 @@ describe('IgxDateRangePicker', () => {
743769
declarations: [
744770
DateRangeTestComponent,
745771
DateRangeTwoInputsTestComponent,
746-
DateRangeTwoInputsNgModelTestComponent
772+
DateRangeTwoInputsNgModelTestComponent,
773+
DateRangeDisabledComponent,
774+
DateRangeTwoInputsDisabledComponent
747775
],
748776
imports: [
777+
CommonModule,
749778
IgxDateRangePickerModule,
750779
IgxDateTimeEditorModule,
751780
IgxPickersCommonModule,
@@ -1116,6 +1145,31 @@ describe('IgxDateRangePicker', () => {
11161145
expect(fixture.componentInstance.dateRange.collapsed).toBeTruthy();
11171146
}));
11181147

1148+
it('should properly set/update disabled when ChangeDetectionStrategy.OnPush is used', fakeAsync(() => {
1149+
const testFixture = TestBed
1150+
.createComponent(DateRangeTwoInputsDisabledComponent) as ComponentFixture<DateRangeTwoInputsDisabledComponent>;
1151+
testFixture.detectChanges();
1152+
dateRange = testFixture.componentInstance.dateRange;
1153+
const disabled$ = testFixture.componentInstance.disabled$;
1154+
1155+
disabled$.next(true);
1156+
testFixture.detectChanges();
1157+
expect(dateRange.projectedInputs.first.inputDirective.disabled).toBeTrue();
1158+
expect(dateRange.projectedInputs.last.inputDirective.disabled).toBeTrue();
1159+
1160+
disabled$.next(false);
1161+
testFixture.detectChanges();
1162+
expect(dateRange.projectedInputs.first.inputDirective.disabled).toBeFalse();
1163+
expect(dateRange.projectedInputs.last.disabled).toBeFalse();
1164+
1165+
disabled$.next(true);
1166+
testFixture.detectChanges();
1167+
expect(dateRange.projectedInputs.first.inputDirective.disabled).toBeTrue();
1168+
expect(dateRange.projectedInputs.last.inputDirective.disabled).toBeTrue();
1169+
1170+
disabled$.complete();
1171+
}));
1172+
11191173
describe('Data binding', () => {
11201174
it('should properly update component value with ngModel bound to projected inputs - #7353', fakeAsync(() => {
11211175
fixture = TestBed.createComponent(DateRangeTwoInputsNgModelTestComponent);
@@ -1417,3 +1471,30 @@ export class DateRangeCustomComponent extends DateRangeTestComponent {
14171471
export class DateRangeTemplatesComponent extends DateRangeTestComponent {
14181472
public range;
14191473
}
1474+
1475+
@Component({
1476+
template: `<igx-date-range-picker [disabled]="(disabled$ | async) === true"></igx-date-range-picker>`,
1477+
changeDetection: ChangeDetectionStrategy.OnPush
1478+
})
1479+
export class DateRangeDisabledComponent extends DateRangeTestComponent {
1480+
public disabled$ = new Subject<boolean>();
1481+
1482+
constructor() {
1483+
super();
1484+
this.disabled$.subscribe({ next: (v) => v });
1485+
}
1486+
}
1487+
1488+
@Component({
1489+
template: `
1490+
<igx-date-range-picker [disabled]="(disabled$ | async) === true">
1491+
<igx-date-range-start>
1492+
<input igxInput igxDateTimeEditor>
1493+
</igx-date-range-start>
1494+
<igx-date-range-end>
1495+
<input igxInput igxDateTimeEditor>
1496+
</igx-date-range-end>
1497+
</igx-date-range-picker>`,
1498+
changeDetection: ChangeDetectionStrategy.OnPush
1499+
})
1500+
export class DateRangeTwoInputsDisabledComponent extends DateRangeDisabledComponent { }

‎projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {
2-
AfterViewInit, Component, ContentChild, ContentChildren, ElementRef,
2+
AfterViewInit, ChangeDetectorRef, Component, ContentChild, ContentChildren, ElementRef,
33
EventEmitter, HostBinding, HostListener, Inject, Injector, Input, LOCALE_ID,
44
NgModuleRef,
55
OnChanges, OnDestroy, OnInit, Optional, Output, QueryList,
@@ -447,6 +447,7 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
447447
protected platform: PlatformUtil,
448448
private _injector: Injector,
449449
private _moduleRef: NgModuleRef<any>,
450+
private _cdr: ChangeDetectorRef,
450451
@Inject(IgxOverlayService) private _overlayService: IgxOverlayService,
451452
@Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions?: IDisplayDensityOptions,
452453
@Optional() @Inject(IGX_INPUT_GROUP_TYPE) protected _inputGroupType?: IgxInputGroupType) {
@@ -632,6 +633,14 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
632633
this.updateDisabledState();
633634
this.initialSetValue();
634635
this.updateInputs();
636+
// B.P. 07 July 2021 - IgxDateRangePicker not showing initial disabled state with ChangeDetectionStrategy.OnPush #9776
637+
/**
638+
* if disabled is placed on the range picker element and there are projected inputs
639+
* run change detection since igxInput will initially set the projected inputs' disabled to false
640+
*/
641+
if (this.hasProjectedInputs && this.disabled) {
642+
this._cdr.markForCheck();
643+
}
635644
});
636645
this.updateDisplayFormat();
637646
this.updateInputFormat();
@@ -791,9 +800,6 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
791800
end.inputDirective.disabled = this.disabled;
792801
return;
793802
}
794-
if (this.inputDirective) {
795-
this.inputDirective.disabled = this.disabled;
796-
}
797803
}
798804

799805
private getInputState(focused: boolean): IgxInputState {

‎projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1493,6 +1493,10 @@ export class IgxGridForOfDirective<T> extends IgxForOfDirective<T> implements On
14931493
NgFor only supports binding to Iterables such as Arrays.`);
14941494
}
14951495
}
1496+
if (this.igxForScrollOrientation === 'horizontal') {
1497+
// in case collection has changes, reset sync service
1498+
this.syncService.setMaster(this, true);
1499+
}
14961500
}
14971501
const defaultItemSize = 'igxForItemSize';
14981502
if (defaultItemSize in changes && !changes[defaultItemSize].firstChange &&

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -975,6 +975,29 @@ describe('IgxGrid - GroupBy #grid', () => {
975975
expect(rect.top).toEqual(origRect.top);
976976
});
977977

978+
it('should obtain correct virtualization state after all groups are collapsed and column is resized.', () => {
979+
const fix = TestBed.createComponent(DefaultGridComponent);
980+
const grid = fix.componentInstance.instance;
981+
grid.groupsExpanded = false;
982+
grid.columnWidth = '200px';
983+
fix.detectChanges();
984+
985+
let fDataRow = grid.dataRowList.toArray()[0];
986+
expect(fDataRow.virtDirRow.sizesCache[1]).toBe(200);
987+
988+
grid.groupBy({ fieldName: 'Released', dir: SortingDirection.Desc, ignoreCase: false });
989+
fix.detectChanges();
990+
991+
grid.columns[0].width = '500px';
992+
fix.detectChanges();
993+
const groupRows = grid.groupsRowList.toArray();
994+
groupRows[0].toggle();
995+
fix.detectChanges();
996+
997+
fDataRow = grid.dataRowList.toArray()[0];
998+
expect(fDataRow.virtDirRow.sizesCache[1]).toBe(500);
999+
});
1000+
9781001
// GroupBy + Filtering
9791002
it('should filters by the data records and renders their related groups.', fakeAsync(() => {
9801003
const fix = TestBed.createComponent(DefaultGridComponent);

‎src/app/grid-add-row/grid-add-row.sample.html

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,6 @@
33
#grid
44
[data]="data"
55
[width]="'800px'"
6-
[paging]="paging"
7-
[perPage]="perPage"
86
[height]="'500px'"
97
[primaryKey]="'ID'"
108
(mouseleave)="onMouseLeave(actionstrip)"
@@ -29,6 +27,10 @@
2927
<igx-grid-pinning-actions></igx-grid-pinning-actions>
3028
<igx-grid-editing-actions [addRow]="true"></igx-grid-editing-actions>
3129
</igx-action-strip>
30+
<igx-paginator
31+
*ngIf="paging"
32+
[perPage]="perPage">
33+
</igx-paginator>
3234
</igx-grid>
3335

3436
<igx-card style="width: 360px; margin-top: 12px">

‎src/app/grid-auto-size/grid-auto-size.sample.html

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@
2727
[allowFiltering]="true"
2828
[rowSelection]="selectionMode"
2929
[filterMode]="'excelStyleFilter'"
30-
[paging]="false"
3130
[width]="'100%'"
3231
[height]="height">
3332
<igx-grid-toolbar [displayDensity]="grid1.displayDensity">

‎src/app/grid-column-selection/grid-column-selection.sample.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
<igx-buttongroup [values]="displayDensities" (selected)="selectDensity($event)"></igx-buttongroup>
1616
</div>
1717
<igx-grid #grid1 [data]="data" [displayDensity]="density" [columnSelection]="'multiple'" [allowFiltering]="true"
18-
[rowSelection]="'multiple'" [filterMode]="'excelStyleFilter'" [paging]="false" [width]="'900px'"
18+
[rowSelection]="'multiple'" [filterMode]="'excelStyleFilter'" [width]="'900px'"
1919
[height]="'800px'" (columnSelected)="onColumnSelection($event)">
2020
<igx-grid-toolbar [displayDensity]="grid.displayDensity">
2121
<igx-grid-toolbar-actions>

‎src/app/grid-external-filtering/grid-external-filtering.sample.html

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@
2525
[filterMode]="'excelStyleFilter'"
2626
[allowAdvancedFiltering]="false"
2727
[rowSelection]="selectionMode"
28-
[paging]="false"
2928
[width]="'100%'"
3029
[height]="'450px'">
3130
<igx-grid-toolbar [displayDensity]="grid1.displayDensity">

‎src/app/grid-filter-template/grid-filter-template.sample.html

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
[data]="data"
77
[allowFiltering]="true"
88
[rowSelection]="selectionMode"
9-
[paging]="false"
109
[width]="'900px'"
1110
[height]="'800px'">
1211
<igx-column *ngFor="let c of columns" [field]="c.field"

‎src/app/grid-filtering/grid-filtering.sample.html

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@
1313
[filterMode]="'excelStyleFilter'"
1414
[allowAdvancedFiltering]="true"
1515
[rowSelection]="selectionMode"
16-
[paging]="false"
1716
[width]="'980px'"
1817
[height]="'600px'"
1918
[columnSelection]="'single'">
@@ -68,7 +67,6 @@ <h3 style="margin-top: 150px;">ESF Templates</h3>
6867
[filterMode]="'excelStyleFilter'"
6968
[allowAdvancedFiltering]="true"
7069
[rowSelection]="selectionMode"
71-
[paging]="false"
7270
[width]="'980px'"
7371
[height]="'600px'"
7472
[columnSelection]="'single'">

‎src/app/grid-flex-layout/grid-flex.sample.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div igxFlex igxLayout igxLayoutDir="column">
33
<div igxFlex igxLayout igxLayoutDir="column">
44
<h4 class="sample-title">Grid1</h4>
5-
<igx-grid #grid1 [paging]='true' [data]="localData" [autoGenerate]="false">
5+
<igx-grid #grid1 [data]="localData" [autoGenerate]="false">
66
<igx-grid-toolbar [displayDensity]="grid1.displayDensity">
77
<igx-grid-toolbar-actions>
88
<igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>
@@ -18,6 +18,8 @@ <h4 class="sample-title">Grid1</h4>
1818
[minWidth]="c.minWidth"
1919
[maxWidth]="c.maxWidth" [editable]='true'>
2020
</igx-column>
21+
<igx-paginator>
22+
</igx-paginator>
2123
</igx-grid>
2224
</div>
2325
<div igxFlex igxLayout igxLayoutDir="column">

‎src/app/grid-remote-paging/grid-remote-paging.sample.html

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,15 @@
11
<div class="dark-grid">
2-
<igx-grid igxPreventDocumentScroll #grid1 [data]="data | async" width="100%" height="540px" [paging]="paging" [paginationTemplate]="customPager">
2+
<igx-grid igxPreventDocumentScroll #grid1 [data]="data | async" width="100%" height="540px">
33
<igx-column field="ID"></igx-column>
44
<igx-column field="ProductName"></igx-column>
55
<igx-column field="QuantityPerUnit"></igx-column>
66
<igx-column field="SupplierName"></igx-column>
77
<igx-column field="UnitsInStock"></igx-column>
88
<igx-column field="Rating"></igx-column>
9-
</igx-grid>
10-
<ng-template #customPager let-api>
11-
<igx-paginator #paginator
12-
[totalRecords]="totalCount"
13-
[(page)]="page"
14-
[(perPage)]="perPage"
15-
[selectOptions]="selectOptions"
16-
[displayDensity]="grid1.displayDensity"
17-
(pageChange)="paginate($event)"
18-
(perPageChange)="perPageChange($event)">
9+
<igx-paginator #paginator *ngIf="paging" [totalRecords]="totalCount" [selectOptions]="selectOptions" [(page)]="page"
10+
[(perPage)]="perPage" (pageChange)="paginate($event)" (perPageChange)="perPageChange($event)">
1911
</igx-paginator>
20-
</ng-template>
12+
</igx-grid>
2113

2214
<igx-card style="width: 360px; margin-top: 12px">
2315
<igx-card-header>

0 commit comments

Comments
 (0)