Merge branch '9.1.x' into mvenkov/call_notifychanges_correctly

Author: Lipata

CHANGELOG.md

@@ -129,6 +129,9 @@ All notable changes for each version of this project will be documented in this
     ```typescript
     public pinningConfiguration: IPinningConfig = { columns: ColumnPinningPosition.End };
     ```
+    - Added new properties for paging:
+     - `totalRecords` set to alter the pages count based on total remote records. Keep in mind that If you are using paging and all the data is passed to the grid, the value of totalRecords property will be set by default to the length of the provided data source. If totalRecords is set, it will take precedent over the default length based on the data source.
+     - `pagingMode` - accepts `GridPagingMode` enumeration. If the paging mode is set to remote the grid will not paginate the passed data source, if the paging mode is set to local (which is the default value) the grid will paginate the data source based on the page, perPage and totalRecords values.
     - Added functionality for column selection.
      - `columnSelection` property has been added. It accepts GridSelection mode enumeration. Grid selection mode could be none, single or multiple.
     - `selected` property has been added to the IgxColumnComponent; Allows you to set whether the column is selected.

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

@@ -957,7 +957,6 @@
         width: 100%;
         background: --var($theme, 'header-background');
         z-index: 10001;
-        overflow: hidden;
     }
 
     %grid-thead-thumb {

projects/igniteui-angular/src/lib/data-operations/data-util.ts

@@ -72,17 +72,17 @@ export class DataUtil {
         return grouping.groupBy(data, state, grid, groupsRecords, fullResult);
     }
 
-    public static page<T>(data: T[], state: IPagingState): T[] {
+    public static page<T>(data: T[], state: IPagingState, dataLength?: number): T[] {
         if (!state) {
             return data;
         }
-        const len = data.length;
+        const len = dataLength !== undefined ? dataLength : data.length;
         const index = state.index;
         const res = [];
-        const recordsPerPage = state.recordsPerPage;
+        const recordsPerPage = dataLength !== undefined && state.recordsPerPage > dataLength ? dataLength : state.recordsPerPage;
         state.metadata = {
             countPages: 0,
-            countRecords: data.length,
+            countRecords: len,
             error: PagingError.None
         };
         if (index < 0 || isNaN(index)) {

projects/igniteui-angular/src/lib/directives/for-of/base.helper.component.ts

@@ -52,4 +52,19 @@ export class VirtualHelperBaseDirective implements OnDestroy, AfterViewInit {
     public get size() {
         return this._size;
     }
+
+    public get scrollNativeSize() {
+        const div = document.createElement('div');
+        const style = div.style;
+        style.width = '100px';
+        style.height = '100px';
+        style.position = 'absolute';
+        style.top = '-10000px';
+        style.top = '-10000px';
+        style.overflow = 'scroll';
+        document.body.appendChild(div);
+        const scrollWidth = div.offsetWidth - div.clientWidth;
+        document.body.removeChild(div);
+        return scrollWidth ? scrollWidth + 1 : 1;
+    }
 }

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

@@ -709,8 +709,12 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
         return this.sizesCache[index + 1] - this.sizesCache[index];
     }
 
-    public getScrollbarWidth() {
-        return this.scrollComponent ? (this.scrollComponent as VirtualHelperComponent).scrollWidth : 0;
+    /**
+     * @hidden
+     * Function that is called to get the native scrollbar size that the browsers renders.
+     */
+    public getScrollNativeSize() {
+        return this.scrollComponent ? this.scrollComponent.scrollNativeSize : 0;
     }
 
     /**

projects/igniteui-angular/src/lib/directives/for-of/virtual.helper.component.ts

@@ -25,22 +25,6 @@ export class VirtualHelperComponent extends VirtualHelperBaseDirective implement
     }
 
     ngOnInit() {
-        this.scrollWidth = this.getScrollWidth();
+        this.scrollWidth = this.scrollNativeSize;
     }
-
-    private getScrollWidth() {
-        const div = document.createElement('div');
-        const style = div.style;
-        style.width = '100px';
-        style.height = '100px';
-        style.position = 'absolute';
-        style.top = '-10000px';
-        style.top = '-10000px';
-        style.overflow = 'scroll';
-        document.body.appendChild(div);
-        const scrollWidth = div.offsetWidth - div.clientWidth;
-        document.body.removeChild(div);
-        return scrollWidth ? scrollWidth + 1 : 0;
-    }
-
 }

projects/igniteui-angular/src/lib/grids/common/enums.ts

@@ -42,3 +42,8 @@ export enum RowPinningPosition {
     Top,
     Bottom
 }
+
+export enum GridPagingMode {
+    local,
+    remote
+}

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

@@ -113,7 +113,8 @@ import {
     GridSummaryCalculationMode,
     FilterMode,
     ColumnPinningPosition,
-    RowPinningPosition
+    RowPinningPosition,
+    GridPagingMode
 } from './common/enums';
 import {
     IGridCellEventArgs,
@@ -173,8 +174,11 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     private _cdrRequests = false;
     protected _cdrRequestRepaint = false;
 
-    public get scrollWidth() {
-        return this.verticalScrollContainer.getScrollbarWidth();
+    /**
+     * @hidden @internal
+     */
+    public get scrollSize() {
+        return this.verticalScrollContainer.getScrollNativeSize();
     }
 
     private _resourceStrings = CurrentResourceStrings.GridResStrings;
@@ -409,6 +413,17 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         this._locale = value;
     }
 
+    @Input()
+    get pagingMode() {
+        return this._pagingMode;
+    }
+
+    set pagingMode(val: GridPagingMode) {
+        this._pagingMode = val;
+        this._pipeTrigger++;
+        this.notifyChanges(true);
+    }
+
     /**
      * Gets/Sets whether the paging feature is enabled.
      * @remarks
@@ -2489,6 +2504,14 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      * @hidden
      */
     protected _paging = false;
+    /**
+     * @hidden
+     */
+    protected _pagingMode = GridPagingMode.local;
+    /**
+     * @hidden @internal
+     */
+    public _totalRecords = -1;
     /**
      * @hidden
      */
@@ -3614,7 +3637,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         if (this.pagingState) {
             return this.pagingState.metadata.countPages;
         }
-        return -1;
+        return this._totalRecords >= 0 ? Math.ceil(this._totalRecords / this.perPage) : -1;
     }
 
     /**
@@ -3663,9 +3686,16 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      * const totalRecords = this.grid.totalRecords;
      * ```
      */
+    @Input()
     get totalRecords(): number {
-        if (this.pagingState) {
-            return this.pagingState.metadata.countRecords;
+        return this._totalRecords >= 0 ? this._totalRecords : this.pagingState?.metadata.countRecords;
+    }
+
+    set totalRecords(total: number) {
+        if (total >= 0) {
+            this._totalRecords = total;
+            this._pipeTrigger++;
+            this.notifyChanges();
         }
     }
 
@@ -4713,7 +4743,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      * @hidden @internal
      */
     public get outerWidth() {
-        return this.hasVerticalScroll() ? this.calcWidth + this.scrollWidth : this.calcWidth;
+        return this.hasVerticalScroll() ? this.calcWidth + this.scrollSize : this.calcWidth;
     }
 
     /**
@@ -4807,7 +4837,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         }
 
         if (this.hasVerticalScroll() && this.width !== null) {
-            width -= this.scrollWidth;
+            width -= this.scrollSize;
         }
         if ((Number.isFinite(width) || width === null) && width !== this.calcWidth) {
             this.calcWidth = width;
@@ -4978,7 +5008,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         if (width === null) {
             let currentWidth = this.calcWidth;
             if (this.hasVerticalScroll()) {
-                currentWidth += this.scrollWidth;
+                currentWidth += this.scrollSize;
             }
             width = currentWidth + 'px';
             this.resetCaches();
@@ -5020,7 +5050,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
             this.calcWidth :
             parseInt(this.width, 10) || parseInt(this.hostWidth, 10) || this.calcWidth;
         if (this.hasVerticalScroll() && !this.isPercentWidth) {
-            width -= this.scrollWidth;
+            width -= this.scrollSize;
         }
         if (this.pinning.columns === ColumnPinningPosition.End) {
             width -= this.featureColumnsWidth();
@@ -5422,15 +5452,17 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         let record = {};
         const selectedData = [];
         const activeEl = this.selectionService.activeElement;
-
-        const selectionMap = Array.from(this.selectionService.selection)
-            .filter((tuple) => tuple[0] < source.length);
+        const totalItems = (this as any).totalItemCount ?? 0;
+        const isRemote = totalItems && totalItems > this.dataView.length;
+        const selectionMap = isRemote ? Array.from(this.selectionService.selection) :
+            Array.from(this.selectionService.selection).filter((tuple) => tuple[0] < source.length);
 
         if (this.cellSelection === GridSelectionMode.single && activeEl) {
             selectionMap.push([activeEl.row, new Set<number>().add(activeEl.column)]);
         }
 
-        for (const [row, set] of selectionMap) {
+        for (let [row, set] of selectionMap) {
+            row = isRemote ? row - this.virtualizationState.startIndex : row;
             if (!source[row] || source[row].detailsData !== undefined) {
                 continue;
             }

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

@@ -201,7 +201,7 @@ describe('IgxGrid - Cell component #grid', () => {
             // Calculate where the end of the cell is. Relative left position should equal the grid calculated width
             expect(lastCell.nativeElement.getBoundingClientRect().left +
                 lastCell.nativeElement.offsetWidth +
-                grid.scrollWidth).toEqual(parseInt(grid.width, 10));
+                grid.scrollSize).toEqual(parseInt(grid.width, 10));
         }));
 
         it('should not reduce the width of last pinned cell when there is vertical scroll.', () => {

projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts

@@ -191,9 +191,9 @@ describe('IgxGrid - multi-column headers #grid', () => {
         tick();
 
         const locationColGroup = getColGroup(grid, 'Location');
-        expect(parseInt(locationColGroup.width, 10) + grid.scrollWidth).toBe(parseInt(componentInstance.gridWrapperWidthPx, 10));
+        expect(parseInt(locationColGroup.width, 10) + grid.scrollSize).toBe(parseInt(componentInstance.gridWrapperWidthPx, 10));
         const cityColumn = grid.getColumnByName('City');
-        expect(parseInt(cityColumn.width, 10) + grid.scrollWidth).toBe(parseInt(componentInstance.gridWrapperWidthPx, 10));
+        expect(parseInt(cityColumn.width, 10) + grid.scrollSize).toBe(parseInt(componentInstance.gridWrapperWidthPx, 10));
     }));
 
     it('Width should be correct. Column group with column. Width in px.', fakeAsync(() => {
@@ -208,9 +208,9 @@ describe('IgxGrid - multi-column headers #grid', () => {
         fixture.detectChanges();
 
         const locationColGroup = getColGroup(grid, 'Location');
-        expect(parseInt(locationColGroup.width, 10) + grid.scrollWidth).toBe(gridWidthPx);
+        expect(parseInt(locationColGroup.width, 10) + grid.scrollSize).toBe(gridWidthPx);
         const cityColumn = grid.getColumnByName('City');
-        expect(parseInt(cityColumn.width, 10) + grid.scrollWidth).toBe(gridWidthPx);
+        expect(parseInt(cityColumn.width, 10) + grid.scrollSize).toBe(gridWidthPx);
     }));
 
     it('Width should be correct. Column group with column. Width in percent.', fakeAsync(() => {
@@ -226,7 +226,7 @@ describe('IgxGrid - multi-column headers #grid', () => {
 
         const locationColGroup = getColGroup(grid, 'Location');
         const gridWidthInPx = ((parseInt(gridWidth, 10) / 100) *
-            parseInt(componentInstance.gridWrapperWidthPx, 10) - grid.scrollWidth) + 'px';
+            parseInt(componentInstance.gridWrapperWidthPx, 10) - grid.scrollSize) + 'px';
         expect(locationColGroup.width).toBe(gridWidthInPx);
         const cityColumn = grid.getColumnByName('City');
         expect(cityColumn.width).toBe(gridWidthInPx);