Merge branch 'pivot-grid-master' into skrastev/pivot-grid-resize

Author: skrustev

projects/igniteui-angular/src/lib/combo/combo-item.component.html

@@ -1,4 +1,5 @@
 <ng-container *ngIf="!isHeader && !singleMode">
-    <igx-checkbox [checked]="selected" [disableRipple]="true" [disableTransitions]="disableTransitions" [tabindex]="-1" (click)="disableCheck($event)" class="igx-combo__checkbox"></igx-checkbox>
+    <!-- checkbox should not allow changing its state from UI click (that's why it should be readonly=true), becasue when cancelling the selectionChange event in the combo, then checkbox will still change state.-->
+    <igx-checkbox [checked]="selected" [readonly]="true" [disableRipple]="true" [disableTransitions]="disableTransitions" [tabindex]="-1" (click)="disableCheck($event)" class="igx-combo__checkbox"></igx-checkbox>
 </ng-container>
 <span class="igx-drop-down__inner"><ng-content></ng-content></span>

projects/igniteui-angular/src/lib/combo/combo.component.spec.ts

@@ -65,6 +65,8 @@ const CSS_CLASS_INPUT_COSY = 'igx-input-group--cosy';
 const CSS_CLASS_INPUT_COMPACT = 'igx-input-group--compact';
 const CSS_CLASS_INPUT_COMFORTABLE = 'igx-input-group--comfortable';
 const CSS_CLASS_EMPTY = 'igx-combo__empty';
+const CSS_CLASS_ITEM_CHECKBOX = 'igx-combo__checkbox';
+const CSS_CLASS_ITME_CHECKBOX_CHECKED = 'igx-checkbox--checked';
 const defaultDropdownItemHeight = 40;
 const defaultDropdownItemMaxHeight = 400;
 
@@ -1927,12 +1929,19 @@ describe('igxCombo', () => {
             combo = fixture.componentInstance.combo;
             input = fixture.debugElement.query(By.css(`.${CSS_CLASS_COMBO_INPUTGROUP}`));
         });
-        const simulateComboItemCheckboxClick = (itemIndex: number, isHeader = false) => {
+        const simulateComboItemClick = (itemIndex: number, isHeader = false) => {
             const itemClass = isHeader ? CSS_CLASS_HEADERITEM : CSS_CLASS_DROPDOWNLISTITEM;
             const dropdownItem = fixture.debugElement.queryAll(By.css('.' + itemClass))[itemIndex];
             dropdownItem.triggerEventHandler('click', UIInteractions.getMouseEvent('click'));
             fixture.detectChanges();
         };
+        const simulateComboItemCheckboxClick = (itemIndex: number, isHeader = false) => {
+            const itemClass = isHeader ? CSS_CLASS_HEADERITEM : CSS_CLASS_DROPDOWNLISTITEM;
+            const dropdownItem = fixture.debugElement.queryAll(By.css('.' + itemClass))[itemIndex];
+            const itemCheckbox = dropdownItem.query(By.css('.' + CSS_CLASS_ITEM_CHECKBOX));
+            itemCheckbox.triggerEventHandler('click', UIInteractions.getMouseEvent('click'));
+            fixture.detectChanges();
+        };
         it('should append/remove selected items to the input in their selection order', () => {
             let expectedOutput = 'Illinois';
             combo.select(['Illinois']);
@@ -2028,7 +2037,7 @@ describe('igxCombo', () => {
             fixture.detectChanges();
 
             const selectedItem_1 = dropdown.items[1];
-            simulateComboItemCheckboxClick(1);
+            simulateComboItemClick(1);
             expect(combo.selection[0]).toEqual(selectedItem_1.value.field);
             expect(selectedItem_1.selected).toBeTruthy();
             expect(selectedItem_1.element.nativeElement.classList.contains(CSS_CLASS_SELECTED)).toBeTruthy();
@@ -2046,7 +2055,7 @@ describe('igxCombo', () => {
                 });
 
             const selectedItem_2 = dropdown.items[5];
-            simulateComboItemCheckboxClick(5);
+            simulateComboItemClick(5);
             expect(combo.selection[1]).toEqual(selectedItem_2.value.field);
             expect(selectedItem_2.selected).toBeTruthy();
             expect(selectedItem_2.element.nativeElement.classList.contains(CSS_CLASS_SELECTED)).toBeTruthy();
@@ -2065,7 +2074,7 @@ describe('igxCombo', () => {
 
             // Unselecting an item
             const unselectedItem = dropdown.items[1];
-            simulateComboItemCheckboxClick(1);
+            simulateComboItemClick(1);
             expect(combo.selection.length).toEqual(1);
             expect(unselectedItem.selected).toBeFalsy();
             expect(unselectedItem.element.nativeElement.classList.contains(CSS_CLASS_SELECTED)).toBeFalsy();
@@ -2087,10 +2096,26 @@ describe('igxCombo', () => {
             combo.toggle();
             fixture.detectChanges();
 
-            simulateComboItemCheckboxClick(0, true);
+            simulateComboItemClick(0, true);
             expect(combo.selection.length).toEqual(0);
             expect(combo.selectionChanging.emit).toHaveBeenCalledTimes(0);
         });
+        it('should prevent selection when selectionChanging is cancelled', () => {
+            spyOn(combo.selectionChanging, 'emit').and.callFake((event: IComboSelectionChangingEventArgs) => event.cancel = true);
+            combo.toggle();
+            fixture.detectChanges();
+
+            const dropdownFirstItem = fixture.debugElement.queryAll(By.css(`.${CSS_CLASS_DROPDOWNLISTITEM}`))[0].nativeElement;
+            const itemCheckbox = dropdownFirstItem.querySelectorAll(`.${CSS_CLASS_ITEM_CHECKBOX}`);
+
+            simulateComboItemCheckboxClick(0);
+            expect(combo.selection.length).toEqual(0);
+            expect(itemCheckbox[0].classList.contains(CSS_CLASS_ITME_CHECKBOX_CHECKED)).toBeFalsy();
+
+            simulateComboItemClick(0);
+            expect(combo.selection.length).toEqual(0);
+            expect(itemCheckbox[0].classList.contains(CSS_CLASS_ITME_CHECKBOX_CHECKED)).toBeFalsy();
+        });
     });
     describe('Grouping tests: ', () => {
         configureTestSuite();

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

@@ -6758,7 +6758,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
 
         // eslint-disable-next-line prefer-const
         for (let [row, set] of selectionMap) {
-            row = this.paginator && source === this.filteredSortedData ? row + (this.paginator.perPage * this.paginator.page) : row;
+            row = this.paginator && (this.pagingMode === GridPagingMode.Local && source === this.filteredSortedData) ? row + (this.paginator.perPage * this.paginator.page) : row;
             row = isRemote ? row - this.virtualizationState.startIndex : row;
             if (!source[row] || source[row].detailsData !== undefined) {
                 continue;

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.ts

@@ -275,26 +275,19 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
                 .concat(this.grid.pivotConfiguration.columns)
                 .concat(this.grid.pivotConfiguration.filters);
             // chip moved from external collection
-            const dims = allDims.filter(x => x && x.memberName === dragId);
-            if (dims.length === 0) {
+            const dim = allDims.find(x => x && x.memberName === dragId);
+            if (!dim) {
                 // you have dragged something that is not a dimension
                 return;
             }
-            dims.forEach(element => {
-                element.enabled = false;
-            });
+            const dimType = this.getDimensionsType(dim);
+
+            // Dragged chip from a different dimension to the current one.
+            const prevDimensionCollection = this.getDimensionsByType(dimType);
+            // delete from previous dimension collection and add to current.
+            prevDimensionCollection.splice(prevDimensionCollection.indexOf(dim), 1);
+            currentDim.splice(targetIndex, 0, dim);
 
-            const currentDimChild = currentDim.find(x => x && x.memberName === dragId);
-            if (currentDimChild) {
-                currentDimChild.enabled = true;
-                const dragChipIndex = currentDim.indexOf(currentDimChild);
-                currentDim.splice(dragChipIndex, 1);
-                currentDim.splice(dragChipIndex > chipIndex ? targetIndex : targetIndex - 1, 0, currentDimChild);
-            } else {
-                const newDim = Object.assign({}, dims[0]);
-                newDim.enabled = true;
-                currentDim.splice(targetIndex, 0, newDim);
-            }
             const isDraggedFromColumn = !!this.grid.pivotConfiguration.columns?.find(x => x && x.memberName === dragId);
             if (isDraggedFromColumn) {
                 // columns have changed.
@@ -341,6 +334,12 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
         }
     }
 
+    protected getDimensionsType(dimension: IPivotDimension) {
+        const isColumn = !!this.grid.pivotConfiguration.columns?.find(x => x && x.memberName === dimension.memberName);
+        const isRow = !!this.grid.pivotConfiguration.rows?.find(x => x && x.memberName === dimension.memberName);
+        return isColumn ? PivotDimensionType.Column : isRow ? PivotDimensionType.Row : PivotDimensionType.Filter;
+    }
+
     protected getAggregatorsForValue(value: IPivotValue): IPivotAggregator[] {
         const dataType = value.dataType || this.grid.resolveDataTypes(this.grid.data[0][value.member]);
         switch (dataType) {

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

@@ -1,5 +1,6 @@
 <div class="dark-grid">
-    <igx-grid igxPreventDocumentScroll #grid1 [data]="data | async" width="100%" height="540px">
+    <igx-grid igxPreventDocumentScroll #grid1 [data]="data | async" width="100%" height="540px" [batchEditing]="true"
+              [pagingMode]="mode">
         <igx-column field="ID"></igx-column>
         <igx-column field="ProductName"></igx-column>
         <igx-column field="QuantityPerUnit"></igx-column>

src/app/grid-remote-paging/grid-remote-paging.sample.ts

@@ -1,5 +1,5 @@
 import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
-import { IgxGridComponent } from 'igniteui-angular';
+import { GridPagingMode, IgxGridComponent } from 'igniteui-angular';
 import { RemoteService } from '../shared/remote.service';
 import { Observable } from 'rxjs';
 
@@ -10,6 +10,7 @@ import { Observable } from 'rxjs';
 export class GridRemotePagingSampleComponent implements OnInit, AfterViewInit, OnDestroy {
     @ViewChild('grid1', { static: true }) public grid1: IgxGridComponent;
 
+    public mode: GridPagingMode = GridPagingMode.Remote;
     public page = 0;
     public totalCount = 0;
     public pages = [];

src/app/grid-row-edit/grid-row-edit-sample.component.html

@@ -222,4 +222,4 @@ <h4>Performance grid with transactions and row edit</h4>
             <button igxButton (click)="toggle.close()">Cancel</button>
         </div>
     </div>
-</div>
+</div>