chore(row-drag): Adding a getDragGhostCustomTemplate method #6081

Author: dafo

CHANGELOG.md

@@ -5,11 +5,11 @@ All notable changes for each version of this project will be documented in this
 ### New Features
 - `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'"
+    <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>
+        <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}}!

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

@@ -1942,20 +1942,8 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
      * @hidden
      * @internal
      */
-    public get dragGhostCustomTemplate(): TemplateRef<IgxRowDragGhostDirective> {
-        if (this.dragGhostCustomTemplates && this.dragGhostCustomTemplates.first) {
-            return this.dragGhostCustomTemplates.first.templateRef;
-        }
-
-        return null;
-    }
-
-    /**
-     * @hidden
-     * @internal
-     */
-    @ContentChildren(IgxRowDragGhostDirective, { read: IgxRowDragGhostDirective, descendants: false })
-    public dragGhostCustomTemplates: QueryList<IgxRowDragGhostDirective>;
+    @ContentChildren(IgxRowDragGhostDirective, { read: TemplateRef, descendants: false })
+    public dragGhostCustomTemplates: QueryList<TemplateRef<any>>;
 
     /**
      * @hidden
@@ -3203,6 +3191,18 @@ export abstract class IgxGridBaseComponent 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()" [ghostTemplate]="this.grid.dragGhostCustomTemplate">
+    <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/hierarchical-grid/hierarchical-grid.component.ts

@@ -662,6 +662,17 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseCompone
         }
     }
 
+    /**
+     * @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()" [ghostTemplate]="this.grid.dragGhostCustomTemplate">
+    <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/tree-grid/tree-grid-row.component.html

@@ -1,5 +1,5 @@
 <ng-container *ngIf="rowDraggable">
-    <div [class]="resolveDragIndicatorClasses" [igxRowDrag]="this" (click)="$event.stopPropagation()" [ghostTemplate]="this.grid.dragGhostCustomTemplate">
+    <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>

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

@@ -29,6 +29,12 @@ <h4 class="sample-title">Sample One</h4>
                     <igx-column field="ChildLevels" [resizable]="true" [groupable]='true'></igx-column>
                     <igx-column field="ProductName" [resizable]="true" [groupable]='true'></igx-column>
                 </igx-column-group>
+                <ng-template let-data igxRowDragGhost>
+                    <div class="dragGhost">
+                        <igx-icon fontSet="material"></igx-icon> 
+                        Moving child {{data.ProductName}}!
+                    </div>
+                </ng-template>
             <igx-row-island [key]="'childData'" [autoGenerate]="false" [rowSelectable]='isRowSelectable' [allowFiltering]='true' >
                     <igx-column field="ID" [hasSummary]='true'></igx-column>
                     <igx-column-group header="Information3">
@@ -56,7 +62,7 @@ <h4 class="sample-title">Sample One</h4>
         <ng-template let-data igxRowDragGhost>
             <div class="dragGhost">
                 <igx-icon fontSet="material"></igx-icon> 
-                Moving {{data.ProductName}}!
+                Moving parent {{data.ProductName}}!
             </div>
         </ng-template>
     </igx-hierarchical-grid>