feat(row-drag): Adding igxDragCustomGhost directive #6081

Author: dafo

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/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.dragGhostCustomTemplate">
         <ng-container *ngTemplateOutlet="this.grid.dragIndicatorIconTemplate ? this.grid.dragIndicatorIconTemplate : this.grid.dragIndicatorIconBase"></ng-container>
     </div>
 </ng-container>

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

@@ -22,7 +22,7 @@ import { IgxColumnResizingService } from '../resizing/resizing.service';
 import { IgxGridSummaryService } from '../summaries/grid-summary.service';
 import { IgxGridSelectionService, IgxGridCRUDService } from '../selection/selection.service';
 import { IgxForOfSyncService, IgxForOfScrollSyncService } from '../../directives/for-of/for_of.sync.service';
-import { IgxDragIndicatorIconDirective } from '../row-drag.directive';
+import { IgxDragIndicatorIconDirective, IgxDragCustomGhostDirective } from '../row-drag.directive';
 import { IgxGridMRLNavigationService } from '../grid-mrl-navigation.service';
 import { FilterMode } from '../common/enums';
 import { GridType } from '../common/grid.interface';
@@ -491,6 +491,27 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
     @ContentChild(IgxDragIndicatorIconDirective, { read: TemplateRef, static: false })
     public dragIndicatorIconTemplate: TemplateRef<any> = null;
 
+    /**
+     * The custom drag ghost, if any, that should be used when rendering the drag ghost
+     *
+     * ```typescript
+     * // Set in typescript
+     * const myCustomGhostTemplate: TemplateRef<any> = myComponent.customGhostTemplate;
+     * myComponent.dragGhostCustomTemplate = myCustomGhostTemplate;
+     * ```
+     * ```html
+     * <!-- Set in markup -->
+     *  <igx-grid #grid>
+     *      ...
+     *      <ng-template igxDragCustomGhost>
+     *          <div class="dragGhost">Custom drag ghost!</div>
+     *      </ng-template>
+     *  </igx-grid>
+     * ```
+     */
+    @ContentChild(IgxDragCustomGhostDirective, { read: TemplateRef, static: false })
+    public dragGhostCustomTemplate: TemplateRef<any> = null;
+
     @ViewChildren(IgxGridGroupByRowComponent, { read: IgxGridGroupByRowComponent })
     private _groupsRowList: QueryList<IgxGridGroupByRowComponent>;
 

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

@@ -100,6 +100,11 @@ export class IgxRowDragDirective extends IgxDragDirective implements OnDestroy {
     protected createGhost(pageX, pageY) {
         this.row.grid.endEdit(true);
         this.row.grid.markForCheck();
+        this.ghostContext = {
+            $implicit: this.row.rowData,
+            data: this.row.rowData,
+            grid: this.row.grid
+        };
         super.createGhost(pageX, pageY, this.row.nativeElement);
 
         const ghost = this.ghostElement;
@@ -152,10 +157,20 @@ export class IgxRowDragDirective extends IgxDragDirective implements OnDestroy {
 export class IgxDragIndicatorIconDirective {
 }
 
+/**
+ * @hidden
+ */
+@Directive({
+    selector: '[igxDragCustomGhost]'
+})
+
+export class IgxDragCustomGhostDirective {
+}
+
 @NgModule({
-    declarations: [IgxRowDragDirective, IgxDragIndicatorIconDirective],
+    declarations: [IgxRowDragDirective, IgxDragIndicatorIconDirective, IgxDragCustomGhostDirective],
     entryComponents: [],
-    exports: [IgxRowDragDirective, IgxDragIndicatorIconDirective],
+    exports: [IgxRowDragDirective, IgxDragIndicatorIconDirective, IgxDragCustomGhostDirective],
     imports: []
 })
 

src/app/grid-row-draggable/grid-row-draggable.sample.html

@@ -13,6 +13,12 @@
                 <igx-icon fontSet="material" [igxRowDrag]="cell.row">info</igx-icon>
             </ng-template>
         </igx-column>
+        <ng-template let-data igxDragCustomGhost>
+            <div class="dragGhost">
+                    <igx-icon fontSet="material"></igx-icon> 
+                     Moving {{data.ProductName}}!
+                </div>
+        </ng-template>
     </igx-grid>
     <igx-grid #grid2 igxDrop [data]="newData" [primaryKey]="'ProductID'"
         [displayDensity]="density" [width]="'500px'" [height]="'600px'" [emptyGridTemplate]="dragHereTemplate"