feat(row-drag): Adding igxDragCustomGhost directive

Author: dafo

CHANGELOG.md

@@ -30,6 +30,20 @@ All notable changes for each version of this project will be documented in this
     - `setOffset` method added. It offsets the content along the corresponding axis by the provided amount.
 - `IgxToggleDirective`:
     - `setOffset` method added. It offsets the content along the corresponding axis by the provided amount.
+- `IgxRowDragGhost` directive is added. It allows providing a custom template for the drag ghost when dragging a row.
+```html
+    <igx-grid #grid1 [data]="remote | async" primaryKey="ProductID"
+        [rowDraggable]="true">
+        <igx-column field="ProductName"></igx-column>
+        <igx-column field="ProductID"></igx-column>
+        <igx-column field="UnitsInStock"></igx-column>
+        <ng-template let-data igxRowDragGhost>
+            <div>
+                Moving {{data.ProductName}}!
+            </div>
+        </ng-template>
+    </igx-grid>
+```
 
 ## 8.2.6
 

projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.directive.ts

@@ -151,6 +151,8 @@ export class IgxDragLocation {
 })
 export class IgxDragDirective implements AfterContentInit, OnDestroy {
 
+    protected ghostContext: any = null;
+
     /**
      * - Save data inside the `igxDrag` directive. This can be set when instancing `igxDrag` on an element.
      * ```html
@@ -1099,7 +1101,7 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy {
 
         let dynamicGhostRef;
         if (this.ghostTemplate) {
-            dynamicGhostRef = this.viewContainer.createEmbeddedView(this.ghostTemplate);
+            dynamicGhostRef = this.viewContainer.createEmbeddedView(this.ghostTemplate, this.ghostContext);
             this.ghostElement = dynamicGhostRef.rootNodes[0];
         } else {
             this.ghostElement = node ? node.cloneNode(true) : this.element.nativeElement.cloneNode(true);

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

@@ -132,6 +132,7 @@ import { IgxGridToolbarCustomContentDirective } from './toolbar/toolbar.directiv
 import { IgxColumnComponent } from './columns/column.component';
 import { IgxColumnGroupComponent } from './columns/column-group.component';
 import { IGridSortingStrategy } from '../data-operations/sorting-strategy';
+import { IgxRowDragGhostDirective  } from './row-drag.directive';
 
 const MINIMUM_COLUMN_WIDTH = 136;
 const FILTER_ROW_HEIGHT = 50;
@@ -1912,6 +1913,13 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     @ContentChildren(IgxRowSelectorDirective, { read: IgxRowSelectorDirective, descendants: false })
     public rowSelectorsTemplates: QueryList<IgxRowSelectorDirective>;
 
+    /**
+     * @hidden
+     * @internal
+     */
+    @ContentChildren(IgxRowDragGhostDirective, { read: TemplateRef, descendants: false })
+    public dragGhostCustomTemplates: QueryList<TemplateRef<any>>;
+
     /**
      * @hidden
      */
@@ -3167,6 +3175,18 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         }
     }
 
+    /**
+     * @hidden
+     * @internal
+    */
+    public getDragGhostCustomTemplate() {
+        if (this.dragGhostCustomTemplates && this.dragGhostCustomTemplates.first) {
+            return this.dragGhostCustomTemplates.first;
+        }
+
+        return null;
+    }
+
     /**
      * @hidden
      */

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

@@ -2,7 +2,7 @@
     <div class="igx-grid__row-indentation igx-grid__row-indentation--level-{{grid.groupingExpressions.length}}"></div>
 </ng-container>
 <ng-container *ngIf="rowDraggable">
-    <div [class]="resolveDragIndicatorClasses" [igxRowDrag]="this" (click)="$event.stopPropagation()">
+    <div [class]="resolveDragIndicatorClasses" [igxRowDrag]="this" (click)="$event.stopPropagation()" [ghostTemplate]="this.grid.getDragGhostCustomTemplate()">
         <ng-container *ngTemplateOutlet="this.grid.dragIndicatorIconTemplate ? this.grid.dragIndicatorIconTemplate : this.grid.dragIndicatorIconBase"></ng-container>
     </div>
 </ng-container>

projects/igniteui-angular/src/lib/grids/grid/row-drag.directive.spec.ts

@@ -44,8 +44,10 @@ describe('IgxGrid - Row Drag Tests #grid', () => {
         TestBed.configureTestingModule({
             declarations: [
                 IgxGridRowDraggableComponent,
+                IgxGridRowCustomGhostDraggableComponent,
                 IgxGridFeaturesRowDragComponent,
                 IgxHierarchicalGridTestComponent,
+                IgxHierarchicalGridCustomGhostTestComponent,
                 IgxTreeGridTestComponent
             ],
             imports: [
@@ -384,6 +386,33 @@ describe('IgxGrid - Row Drag Tests #grid', () => {
             const ghostElements = document.getElementsByClassName(CSS_CLASS_GHOST_ROW);
             expect(ghostElements.length).toEqual(0);
         }));
+
+        it('should correctly create custom ghost element', (async () => {
+            fixture = TestBed.createComponent(IgxGridRowCustomGhostDraggableComponent);
+            grid = fixture.componentInstance.instance;
+            fixture.detectChanges();
+            dragIndicatorElements = fixture.debugElement.queryAll(By.css('.' + CSS_CLASS_DRAG_INDICATOR));
+            dragRows = fixture.debugElement.queryAll(By.directive(IgxRowDragDirective));
+            const rowDragDirective = dragRows[1].injector.get(IgxRowDragDirective) as any;
+            const dragIndicatorElement = dragIndicatorElements[2].nativeElement;
+            const startPoint: Point = UIInteractions.getPointFromElement(dragIndicatorElement);
+            const movePoint: Point = UIInteractions.getPointFromElement(rows[4].nativeElement);
+            const dropPoint: Point = UIInteractions.getPointFromElement(dropAreaElement);
+            let ghostElements: HTMLCollection;
+
+            await pointerDown(dragIndicatorElement, startPoint, fixture);
+            await pointerMove(dragIndicatorElement, movePoint, fixture);
+            await pointerMove(dragIndicatorElement, dropPoint, fixture);
+            ghostElements = document.getElementsByClassName(CSS_CLASS_GHOST_ROW);
+            expect(ghostElements.length).toEqual(1);
+
+            expect(rowDragDirective.ghostContext.data.ProductName).toEqual('NetAdvantage');
+            expect(rowDragDirective.ghostContext.data.ID).toEqual(2);
+            expect(rowDragDirective.ghostContext.grid).toEqual(grid);
+
+            const ghostText = document.getElementsByClassName(CSS_CLASS_GHOST_ROW)[0].textContent;
+            expect(ghostText).toEqual(' Moving a row! ');
+        }));
     });
     describe('Grid Features Integration Tests', () => {
         let dragGrid: IgxGridComponent;
@@ -635,8 +664,8 @@ describe('IgxGrid - Row Drag Tests #grid', () => {
             expect(row.grid.rowDragging).toBeTruthy();
 
             const ghostElements = document.getElementsByClassName(CSS_CLASS_GHOST_ROW);
-            const ghostElement = ghostElements[0];
-            expect(ghostElements.length).toEqual(1);
+            const ghostElement = ghostElements[1];
+            expect(ghostElements.length).toEqual(2);
             expect(ghostElement.classList.contains(CSS_CLASS_SELECTED_ROW)).toBeFalsy();
 
             await pointerMove(dragIndicatorElement, dropPoint, fixture);
@@ -787,7 +816,7 @@ describe('IgxGrid - Row Drag Tests #grid', () => {
             dragRows = fixture.debugElement.queryAll(By.directive(IgxRowDragDirective));
         }));
 
-        it('should be able to drag row on every hiearchical level', (async () => {
+        it('should be able to drag row on every hierarchical level', (async () => {
             // first level row
             let dragIndicatorElement: Element = dragIndicatorElements[1].nativeElement;
             let rowToDrag = dragGrid.getRowByIndex(0);
@@ -841,6 +870,47 @@ describe('IgxGrid - Row Drag Tests #grid', () => {
             await pointerUp(dragIndicatorElement, dropPoint, fixture);
             verifyRowDragEndEvent(nestedChildGrid, rowToDrag, rowDragDirective, false, 1);
         }));
+
+        it('should correctly create custom ghost element', (async () => {
+            fixture = TestBed.createComponent(IgxHierarchicalGridCustomGhostTestComponent );
+            dragGrid = fixture.componentInstance.hDragGrid;
+            fixture.detectChanges();
+            dragIndicatorElements = fixture.debugElement.queryAll(By.css('.' + CSS_CLASS_DRAG_INDICATOR));
+            dragRows = fixture.debugElement.queryAll(By.directive(IgxRowDragDirective));
+
+            // first level row
+            let dragIndicatorElement: Element = dragIndicatorElements[1].nativeElement;
+            let rowToDrag = dragGrid.getRowByIndex(0);
+            let rowDragDirective = dragRows[0].injector.get(IgxRowDragDirective) as any;
+
+            let startPoint: Point = UIInteractions.getPointFromElement(dragIndicatorElement);
+            const movePoint: Point = UIInteractions.getPointFromElement(dragGrid.getRowByIndex(3).nativeElement);
+            const dropPoint: Point = UIInteractions.getPointFromElement(dropAreaElement);
+
+            await pointerDown(dragIndicatorElement, startPoint, fixture);
+            await pointerMove(dragIndicatorElement, movePoint, fixture);
+            await pointerMove(dragIndicatorElement, dropPoint, fixture);
+            await pointerUp(dragIndicatorElement, dropPoint, fixture);
+
+            expect(rowDragDirective.ghostContext.data.ProductName).toEqual('Product: A0');
+            expect(rowDragDirective.ghostContext.grid).toEqual(dragGrid);
+
+            // second level row
+            dragIndicatorElement = dragIndicatorElements[8].nativeElement;
+            const childGrid = dragGrid.hgridAPI.getChildGrids(false)[0];
+            rowToDrag = childGrid.getRowByIndex(0);
+            rowDragDirective = dragRows[4].injector.get(IgxRowDragDirective);
+            startPoint = UIInteractions.getPointFromElement(dragIndicatorElement);
+
+            await pointerDown(dragIndicatorElement, startPoint, fixture);
+            await pointerMove(dragIndicatorElement, movePoint, fixture);
+            await pointerMove(dragIndicatorElement, dropPoint, fixture);
+            await pointerUp(dragIndicatorElement, dropPoint, fixture);
+
+            expect(rowDragDirective.ghostContext.data.ProductName).toEqual('Product: A0');
+            expect(rowDragDirective.ghostContext.data.ChildLevels).toEqual(2);
+            expect(rowDragDirective.ghostContext.grid).toEqual(childGrid);
+        }));
     });
     describe('Tree Grid Tests', () => {
         let dragGrid: IgxTreeGridComponent;
@@ -857,7 +927,7 @@ describe('IgxGrid - Row Drag Tests #grid', () => {
             dragRows = fixture.debugElement.queryAll(By.directive(IgxRowDragDirective));
         }));
 
-        it('should be able to drag row on every hiearchical level', (async () => {
+        it('should be able to drag row on every hierarchical level', (async () => {
             // first level row
             let dragIndicatorElement: Element = dragIndicatorElements[1].nativeElement;
             let rowToDrag = dragGrid.getRowByIndex(0);
@@ -960,6 +1030,65 @@ export class IgxGridRowDraggableComponent extends DataParent {
     }
 }
 
+@Component({
+    template: `
+        <igx-grid #grid
+            [width]='width'
+            [height]='height'
+            primaryKey="ID"
+            [data]="data"
+            [autoGenerate]="true" (onColumnInit)="columnsCreated($event)" (onGroupingDone)="onGroupingDoneHandler($event)"
+            [rowEditable]="true" [rowDraggable]="enableRowDraggable"
+            >
+            <ng-template let-data igxRowDragGhost>
+                <div class="dragGhost">
+                    <igx-icon fontSet="material"></igx-icon>
+                        Moving a row!
+                </div>
+            </ng-template>
+        </igx-grid>
+        <div #dropArea class="droppable-area" igxDrop (dropped)="onRowDrop($event)"
+        [ngStyle]="{width:'100px', height:'100px', backgroundColor:'red'}">
+        </div>
+        <div #nonDroppableArea class="non-droppable-area"
+        [ngStyle]="{width:'100px', height:'100px', backgroundColor:'yellow'}">
+        </div>
+    `
+})
+export class IgxGridRowCustomGhostDraggableComponent extends DataParent {
+    public width = '800px';
+    public height = null;
+
+    @ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true })
+    public instance: IgxGridComponent;
+
+    @ViewChild('dropArea', { read: IgxDropDirective, static: true })
+    public dropArea: IgxDropDirective;
+
+    public enableSorting = false;
+    public enableFiltering = false;
+    public enableResizing = false;
+    public enableEditing = true;
+    public enableGrouping = true;
+    public enableRowEditing = true;
+    public enableRowDraggable = true;
+    public currentSortExpressions;
+
+    public columnsCreated(column: IgxColumnComponent) {
+        column.sortable = this.enableSorting;
+        column.filterable = this.enableFiltering;
+        column.resizable = this.enableResizing;
+        column.editable = this.enableEditing;
+        column.groupable = this.enableGrouping;
+    }
+    public onGroupingDoneHandler(sortExpr) {
+        this.currentSortExpressions = sortExpr;
+    }
+    public onRowDrop(args) {
+        args.cancel = true;
+    }
+}
+
 @Component({
     template: `
         <igx-grid #dragGrid
@@ -1056,6 +1185,57 @@ export class IgxHierarchicalGridTestComponent {
     }
 }
 
+@Component({
+    template: `
+    <igx-hierarchical-grid #hierarchicalDragGrid [data]="data"
+     [autoGenerate]="true" [height]="'500px'" [width]="'1500px'"
+      primaryKey="ID" [expandChildren]='true' [rowDraggable]="true">
+        <igx-row-island [key]="'childData'" [expandChildren]='true' [autoGenerate]="true" [rowDraggable]="true" #rowIsland>
+            <igx-row-island [key]="'childData2'" [autoGenerate]="true" [rowDraggable]="true" #rowIsland2 >
+            </igx-row-island>
+            <ng-template let-data igxRowDragGhost>
+            <div>
+                Moving {{data.ProductName}}!
+            </div>
+        </ng-template>
+        </igx-row-island>
+        <ng-template let-data igxRowDragGhost>
+            <div>
+                Moving {{data.ProductName}}!
+            </div>
+        </ng-template>
+    </igx-hierarchical-grid>`
+})
+export class IgxHierarchicalGridCustomGhostTestComponent {
+    public data;
+    newData = [];
+    @ViewChild('hierarchicalDragGrid', { read: IgxHierarchicalGridComponent, static: true }) public hDragGrid: IgxHierarchicalGridComponent;
+    @ViewChild('rowIsland', { read: IgxRowIslandComponent, static: true }) public rowIsland: IgxRowIslandComponent;
+    @ViewChild('rowIsland2', { read: IgxRowIslandComponent, static: true }) public rowIsland2: IgxRowIslandComponent;
+
+    constructor() {
+        this.data = this.generateData(2, 3);
+    }
+    generateData(count: number, level: number) {
+        const prods = [];
+        const currLevel = level;
+        let children;
+        for (let i = 0; i < count; i++) {
+            const item = {
+                ID: i, ChildLevels: currLevel, ProductName: 'Product: A' + i, 'Col1': i,
+                'Col2': i, 'Col3': i
+            };
+            if (currLevel > 1) {
+                children = this.generateData(count / 2, currLevel - 1);
+                const childProp = currLevel === 3 ? 'childData' : 'childData2';
+                item[childProp] = children;
+            }
+            prods.push(item);
+        }
+        return prods;
+    }
+}
+
 @Component({
     template: `
     <igx-tree-grid #treeGrid [data]="data" primaryKey="employeeID" foreignKey="PID" width="900px" height="500px" [rowDraggable]="true">

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts

@@ -663,6 +663,17 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti
         }
     }
 
+    /**
+     * @hidden
+     * @internal
+     */
+    public getDragGhostCustomTemplate(): TemplateRef<any> {
+        if (this.parentIsland) {
+            return this.parentIsland.getDragGhostCustomTemplate();
+        }
+        return super.getDragGhostCustomTemplate();
+    }
+
     /**
      * @hidden
     */

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

@@ -15,7 +15,7 @@
 </ng-template>
 
 <ng-container *ngIf="rowDraggable">
-    <div [class]="resolveDragIndicatorClasses" [igxRowDrag]="this" (click)="$event.stopPropagation()">
+    <div [class]="resolveDragIndicatorClasses" [igxRowDrag]="this" (click)="$event.stopPropagation()" [ghostTemplate]="this.grid.getDragGhostCustomTemplate()">
             <ng-container *ngTemplateOutlet="this.grid.dragIndicatorIconTemplate ? this.grid.dragIndicatorIconTemplate : this.grid.dragIndicatorIconBase"></ng-container>
     </div>
 </ng-container>