chore(row-drag): HGrid row island custom ghost support #6081

IgniteUI · Nov 5, 2019 · ac52df1 · ac52df1
1 parent 3973e89
commit ac52df1
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 5 deletions.
diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
@@ -1899,9 +1899,9 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      * @hidden
      * @internal
      */
-    public get dragGhostCustomTemplate(): TemplateRef<IgxRowDragGhostDirective> {
+    public get dragGhostCustomTemplate(): TemplateRef<any> {
         if (this.dragGhostCustomTemplates && this.dragGhostCustomTemplates.first) {
-            return this.dragGhostCustomTemplates.first.templateRef;
+            return this.dragGhostCustomTemplates.first;
         }
 
         return null;
@@ -1911,8 +1911,8 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      * @hidden
      * @internal
      */
-    @ContentChildren(IgxRowDragGhostDirective, { read: IgxRowDragGhostDirective, descendants: false })
-    public dragGhostCustomTemplates: QueryList<IgxRowDragGhostDirective>;
+    @ContentChildren(IgxRowDragGhostDirective, { read: TemplateRef, descendants: false })
+    public dragGhostCustomTemplates: QueryList<TemplateRef<any>>;
 
     /**
      * @hidden

diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts
@@ -663,6 +663,16 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti
         }
     }
 
+    /**
+     * @hidden
+    */
+   public get dragGhostCustomTemplate(): TemplateRef<any> {
+        if (this.parentIsland) {
+            return this.parentIsland.dragGhostCustomTemplate;
+        }
+        return super.dragGhostCustomTemplate;
+    }
+
     /**
      * @hidden
     */

diff --git a/src/app/hierarchical-grid/hierarchical-grid.sample.html b/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>