feat(row-drag): Adding igxRowDragGhostDirective to all grids #6081

IgniteUI · Nov 2, 2019 · 3197c63 · 3197c63
1 parent 7bc8d4d
commit 3197c63
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 31 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
@@ -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;
@@ -1894,6 +1895,25 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     @ContentChildren(IgxRowSelectorDirective, { read: IgxRowSelectorDirective, descendants: false })
     public rowSelectorsTemplates: QueryList<IgxRowSelectorDirective>;
 
+    /**
+     * @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>;
+
     /**
      * @hidden
      */

diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts b/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, IgxRowDragGhost  } from '../row-drag.directive';
+import { IgxDragIndicatorIconDirective } from '../row-drag.directive';
 import { IgxGridMRLNavigationService } from '../grid-mrl-navigation.service';
 import { FilterMode } from '../common/enums';
 import { GridType } from '../common/grid.interface';
@@ -491,27 +491,6 @@ 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(IgxRowDragGhost , { read: TemplateRef, static: false })
-    public dragGhostCustomTemplate: TemplateRef<any> = null;
-
     @ViewChildren(IgxGridGroupByRowComponent, { read: IgxGridGroupByRowComponent })
     private _groupsRowList: QueryList<IgxGridGroupByRowComponent>;
 

diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html b/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.dragGhostCustomTemplate">
             <ng-container *ngTemplateOutlet="this.grid.dragIndicatorIconTemplate ? this.grid.dragIndicatorIconTemplate : this.grid.dragIndicatorIconBase"></ng-container>
     </div>
 </ng-container>

diff --git a/projects/igniteui-angular/src/lib/grids/row-drag.directive.ts b/projects/igniteui-angular/src/lib/grids/row-drag.directive.ts
@@ -1,4 +1,4 @@
-import { Directive, Input, OnDestroy, NgModule } from '@angular/core';
+import { Directive, Input, OnDestroy, NgModule, TemplateRef } from '@angular/core';
 import { IgxDragDirective } from '../directives/drag-drop/drag-drop.directive';
 import { KEYS } from '../core/utils';
 import { fromEvent, Subscription } from 'rxjs';
@@ -164,13 +164,14 @@ export class IgxDragIndicatorIconDirective {
     selector: '[igxRowDragGhost]'
 })
 
-export class IgxRowDragGhost  {
+export class IgxRowDragGhostDirective  {
+    constructor(public templateRef: TemplateRef<any>) { }
 }
 
 @NgModule({
-    declarations: [IgxRowDragDirective, IgxDragIndicatorIconDirective, IgxRowDragGhost ],
+    declarations: [IgxRowDragDirective, IgxDragIndicatorIconDirective, IgxRowDragGhostDirective],
     entryComponents: [],
-    exports: [IgxRowDragDirective, IgxDragIndicatorIconDirective, IgxRowDragGhost ],
+    exports: [IgxRowDragDirective, IgxDragIndicatorIconDirective, IgxRowDragGhostDirective],
     imports: []
 })
 

diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.html b/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()">
+    <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>

diff --git a/src/app/grid-row-draggable/grid-row-draggable.sample.html b/src/app/grid-row-draggable/grid-row-draggable.sample.html
@@ -13,7 +13,7 @@
                 <igx-icon fontSet="material" [igxRowDrag]="cell.row">info</igx-icon>
             </ng-template>
         </igx-column>
-        <ng-template let-data igxDragCustomGhost>
+        <ng-template let-data igxRowDragGhost>
             <div class="dragGhost">
                     <igx-icon fontSet="material"></igx-icon> 
                      Moving {{data.ProductName}}!

diff --git a/src/app/hierarchical-grid/hierarchical-grid.sample.html b/src/app/hierarchical-grid/hierarchical-grid.sample.html
@@ -4,7 +4,7 @@ <h4 class="sample-title">Sample One</h4>
         <igx-buttongroup [values]="displayDensities" (onSelect)="selectDensity($event)" style="display: block; width: 500px"></igx-buttongroup>
     </div>
     <button igxButton="raised" (click)="getState()">Get state</button>
-    <igx-hierarchical-grid [(hierarchicalState)]="hgridState" [showExpandAll]='true' [hasChildrenKey]='"hasChild"' class="hgrid" [allowFiltering]='true' #grid1 [data]="localData" [displayDensity]="density" [rowSelectable]="true" [autoGenerate]="false" [allowFiltering]='true'  [paging]="true"
+    <igx-hierarchical-grid [rowDraggable]="true" [(hierarchicalState)]="hgridState" [showExpandAll]='true' [hasChildrenKey]='"hasChild"' class="hgrid" [allowFiltering]='true' #grid1 [data]="localData" [displayDensity]="density" [rowSelectable]="true" [autoGenerate]="false" [allowFiltering]='true'  [paging]="true"
         [height]="'600px'" [width]="'800px'" [expandChildren]="rootExpanded" #hGrid>
         <igx-column field="ID" [resizable]="true" [pinned]="true" [filterable]='true'></igx-column>
         <igx-column-group header="Information">
@@ -23,7 +23,7 @@ <h4 class="sample-title">Sample One</h4>
         <ng-template igxRowCollapsedIndicator>
             <igx-icon role="button" fontSet="material">add</igx-icon>
         </ng-template>
-        <igx-row-island [showExpandAll]='true' [key]="'childData'" [autoGenerate]="false" [allowFiltering]='false' [rowSelectable]='isRowSelectable' [expandChildren]="firstLevelExpanded" #layout1 >
+        <igx-row-island [rowDraggable]="true" [showExpandAll]='true' [key]="'childData'" [autoGenerate]="false" [allowFiltering]='false' [rowSelectable]='isRowSelectable' [expandChildren]="firstLevelExpanded" #layout1 >
                 <igx-column field="ID" [hasSummary]='true' [dataType]="'number'"></igx-column>
                 <igx-column-group header="Information2">
                     <igx-column field="ChildLevels" [resizable]="true" [groupable]='true'></igx-column>
@@ -53,6 +53,12 @@ <h4 class="sample-title">Sample One</h4>
                 <igx-column field="ChildLevels" [groupable]='true'></igx-column>
                 <igx-column field="ProductName" [groupable]='true'></igx-column>
         </igx-row-island> -->
+        <ng-template let-data igxRowDragGhost>
+            <div class="dragGhost">
+                    <igx-icon fontSet="material"></igx-icon> 
+                     Moving {{data.ProductName}}!
+                </div>
+        </ng-template>
     </igx-hierarchical-grid>
 
     <h4 class="sample-title">Sample two</h4>