fix(pivot): Fix errors thrown when dragging chips or elements between pivot data selector and grid. Fix sample

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-data-selector.component.html

@@ -77,7 +77,7 @@ <h6 class="igx-pivot-data-selector__header-title">
             >
                 <igx-list-item
                     igxDrop
-                    [igxDrag]="panel.dragChannels"
+                    [igxDrag]="{ gridID: grid.id, selectorChannels: panel.dragChannels }"
                     [ghostTemplate]="itemGhost"
                     (ghostCreate)="ghostCreated($event, item[panel.itemKey])"
                     (over)="onItemDragOver($event)"

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-data-selector.component.ts

@@ -499,7 +499,7 @@ export class IgxPivotDataSelectorComponent {
      * @internal
      */
     public onPanelEntry(event: IDropBaseEventArgs, panel: string) {
-        this.dropAllowed = event.dragData.some(
+        this.dropAllowed = event.dragData.gridID === this.grid.id && event.dragData.selectorChannels?.some(
             (channel: string) => channel === panel
         );
     }

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

@@ -938,7 +938,8 @@ describe('IgxPivotGrid #pivotGrid', () => {
                 // move first chip over the second one
                 headerRow.onDimDragOver({
                     dragChip: {
-                        id: 'ProductCategory'
+                        id: 'ProductCategory',
+                        data: { pivotArea: 'row' }
                     },
                     owner: rowChip2,
                     originalEvent: {
@@ -953,7 +954,8 @@ describe('IgxPivotGrid #pivotGrid', () => {
                 // drop chip
                 headerRow.onDimDrop({
                     dragChip: {
-                        id: 'ProductCategory'
+                        id: 'ProductCategory',
+                        data: { pivotArea: 'row' }
                     },
                     owner: rowChip2
                 }, rowChipArea, PivotDimensionType.Row);
@@ -988,7 +990,8 @@ describe('IgxPivotGrid #pivotGrid', () => {
                 // move first chip over the second one
                 headerRow.onDimDragOver({
                     dragChip: {
-                        id: 'Country'
+                        id: 'Country',
+                        data: { pivotArea: 'column' }
                     },
                     owner: colChip2,
                     originalEvent: {
@@ -1003,7 +1006,8 @@ describe('IgxPivotGrid #pivotGrid', () => {
                 // drop chip
                 headerRow.onDimDrop({
                     dragChip: {
-                        id: 'Country'
+                        id: 'Country',
+                        data: { pivotArea: 'column' }
                     },
                     owner: colChip2
                 }, colChipArea, PivotDimensionType.Column);
@@ -1029,7 +1033,8 @@ describe('IgxPivotGrid #pivotGrid', () => {
                 // move first chip over the second one
                 headerRow.onDimDragOver({
                     dragChip: {
-                        id: 'UnitsSold'
+                        id: 'UnitsSold',
+                        data: { pivotArea: 'value' }
                     },
                     owner: valChip2,
                     originalEvent: {

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

@@ -14,7 +14,7 @@
                         <ng-container *ngFor="let filter of this.filterAreaDimensions; let last = last;">
                         <span [style.visibility]='"hidden"' class="igx-grid__tr-pivot--chip_drop_indicator"
                               [style.height.px]='getAreaHeight(filterArea)'></span>
-                            <igx-chip [id]="filter.memberName" [draggable]="true" [displayDensity]="grid.displayDensity"
+                            <igx-chip [id]="filter.memberName" [draggable]="true" [displayDensity]="grid.displayDensity" [data]="{ pivotArea: 'filter' }"
                                       [removable]="true" (remove)="filterRemoved($event)" (dragOver)="onDimDragOver($event, 2)"
                                       (dragLeave)="onDimDragLeave($event)" (dragDrop)="onDimDrop($event, filterArea, 2)"
                                       (moveStart)='onDimDragStart($event, filterArea)' (moveEnd)='onDimDragEnd()'>
@@ -53,7 +53,7 @@
                         <ng-container *ngFor="let col of grid.columnDimensions; let last = last;">
                         <span [style.visibility]='"hidden"' class="igx-grid__tr-pivot--chip_drop_indicator"
                               [style.height.px]='getAreaHeight(colArea)'></span>
-                            <igx-chip [draggable]="true" [id]="col.memberName" [displayDensity]="grid.displayDensity"
+                            <igx-chip [draggable]="true" [id]="col.memberName" [displayDensity]="grid.displayDensity" [data]="{ pivotArea: 'column' }"
                                       [removable]="true" (remove)="columnRemoved($event)" (dragOver)="onDimDragOver($event, 1)"
                                       (dragLeave)="onDimDragLeave($event)" (dragDrop)="onDimDrop($event, colArea, 1)"
                                       (moveStart)='onDimDragStart($event, colArea)' (moveEnd)='onDimDragEnd()'
@@ -87,7 +87,7 @@
                     <ng-container *ngFor="let value of grid.values; let last = last;">
                         <span [style.visibility]='"hidden"' class="igx-grid__tr-pivot--chip_drop_indicator"
                               [style.height.px]='getAreaHeight(valueArea)'></span>
-                            <igx-chip #currChip [draggable]="true" [id]="value.displayName || value.member"
+                            <igx-chip #currChip [draggable]="true" [id]="value.displayName || value.member" [data]="{ pivotArea: 'value' }"
                                       [displayDensity]="grid.displayDensity" [removable]="true" (remove)="valueRemoved($event)"
                                       (dragLeave)="onDimDragLeave($event)" (dragOver)="onDimDragOver($event)"
                                       (dragDrop)="onValueDrop($event, valueArea)">
@@ -130,7 +130,7 @@
                     <ng-container *ngFor="let row of grid.rowDimensions; let last = last;">
                         <span [style.visibility]='"hidden"' class="igx-grid__tr-pivot--chip_drop_indicator"
                               [style.height.px]='getAreaHeight(rowArea)'></span>
-                            <igx-chip [draggable]="true" [id]="row.memberName" [displayDensity]="grid.displayDensity"
+                            <igx-chip [draggable]="true" [id]="row.memberName" [displayDensity]="grid.displayDensity" [data]="{ pivotArea: 'row' }"
                                       [removable]="true" (remove)="rowRemoved($event)" (dragLeave)="onDimDragLeave($event)"
                                       (dragDrop)="onDimDrop($event, rowArea, 0)" (dragOver)="onDimDragOver($event, 0)"
                                       (moveStart)='onDimDragStart($event, rowArea)' (moveEnd)='onDimDragEnd()'

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

@@ -481,6 +481,7 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent implem
     * @internal
     */
     public onDimDragOver(event, dimension?: PivotDimensionType) {
+        if (!event.dragChip || !event.dragChip.data?.pivotArea) return;
         const typeMismatch = dimension !== undefined ? this.grid.pivotConfiguration.values.find(x => x.member === event.dragChip.id
             || x.displayName === event.dragChip.id) :
             !this.grid.pivotConfiguration.values.find(x => x.member === event.dragChip.id || x.displayName === event.dragChip.id);
@@ -534,6 +535,7 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent implem
     * @internal
     */
     public onValueDrop(event, area) {
+        if (!(event.dragChip && event.dragChip.data?.pivotArea) && !(event.dragData?.chip && !!event.dragData.chip.data.pivotArea)) return;
         //values can only be reordered
         const values = this.grid.pivotConfiguration.values;
         const dragId = event.dragChip?.id || event.dragData?.chip.id;
@@ -552,6 +554,7 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent implem
     * @internal
     */
     public onDimDrop(event, area, dimensionType: PivotDimensionType) {
+        if (!(event.dragChip && event.dragChip.data?.pivotArea) && !(event.dragData?.chip && !!event.dragData.chip.data.pivotArea)) return;
         const dragId = event.dragChip?.id || event.dragData?.chip.id;
         const currentDim = this.grid.getDimensionsByType(dimensionType);
         const chipsArray = area.chipsList.toArray();

src/app/pivot-grid/pivot-grid.sample.html

@@ -15,25 +15,32 @@
         <igx-buttongroup>
             <button
                 igxButton
-                [disabled]="grid1.displayDensity === comfortable"
+                [disabled]="gridDensity === 'comfortable'"
                 (click)="setDensity('comfortable')"
             >
                 Comfortable
             </button>
             <button
                 igxButton
-                [disabled]="grid1.displayDensity === cosy"
+                [disabled]="gridDensity === 'cosy'"
                 (click)="setDensity('cosy')"
             >
                 Cosy
             </button>
             <button
                 igxButton
-                [disabled]="grid1.displayDensity === compact"
+                [disabled]="gridDensity === 'compact'"
                 (click)="setDensity('compact')"
             >
                 Compact
             </button>
+            <button
+                igxButton
+                [disabled]="gridDensity === 'superCompact'"
+                (click)="setDensity('superCompact')"
+            >
+                SCompact
+            </button>
         </igx-buttongroup>
     </div>
     <button igxButton (click)="setRowDimWidth(0, '400px')">ResizeRowDim</button>
@@ -48,17 +55,19 @@
     <button (click)="insertVal()">Insert</button>
 </div>
 <div class="pivot-container">
-    <igx-pivot-grid
-        #grid1
-        [data]="origData"
-        [width]="'100%'"
-        [height]="'100%'"
-        [defaultExpandState]="true"
-        [superCompactMode]="true"
-        [rowSelection]='"single"'
-        [pivotConfiguration]="pivotConfigHierarchy"
-        (dimensionsChange)="dimensionChange($event)"
-    >
-    </igx-pivot-grid>
+    <div>
+        <igx-pivot-grid
+            #grid1
+            [data]="origData"
+            [width]="'100%'"
+            [height]="'100%'"
+            [displayDensity]="gridDensity"
+            [superCompactMode]="gridDensity === 'superCompact'"
+            [defaultExpandState]="true"
+            [rowSelection]='"single"'
+            [pivotConfiguration]="pivotConfigHierarchy"
+            (dimensionsChange)="dimensionChange($event)"
+        ></igx-pivot-grid>
+    </div>
     <igx-pivot-data-selector [grid]="grid1"></igx-pivot-data-selector>
 </div>

src/app/pivot-grid/pivot-grid.sample.scss

@@ -52,4 +52,5 @@ igx-pivot-grid {
     align-items: flex-start;
     flex: 1 1 auto;
     order: 0;
+    align-items: stretch;
 }

src/app/pivot-grid/pivot-grid.sample.ts

@@ -51,9 +51,7 @@ export class IgxTotalSaleAggregate {
 })
 export class PivotGridSampleComponent {
     @ViewChild('grid1', { static: true }) public grid1: IgxPivotGridComponent;
-    public comfortable: DisplayDensity = DisplayDensity.comfortable;
-    public cosy: DisplayDensity = DisplayDensity.cosy;
-    public compact: DisplayDensity = DisplayDensity.compact;
+    public gridDensity = 'superCompact';
 
     public filterExpTree = new FilteringExpressionsTree(FilteringLogic.And);
 
@@ -274,7 +272,7 @@ export class PivotGridSampleComponent {
     }
 
     public setDensity(density: DisplayDensity) {
-        this.grid1.displayDensity = density;
+        this.gridDensity = density;
     }
 
     public autoSizeRow(ind) {