feat(igxGrid): Add template Inputs for row drag templates.

Author: MKirova

CHANGELOG.md

@@ -1,6 +1,13 @@
 # Ignite UI for Angular Change Log
 
 All notable changes for each version of this project will be documented in this file.
+
+## 15.0.0
+
+### New Features
+- `igxGrid` - exposing new Input properties:
+    - `dragGhostCustomTemplate` - Gets/Sets the custom template used for row drag.
+    - `dragIndicatorIconTemplate` - Gets/Sets the custom template used for row drag indicator.
 ## 14.2.0
 
 ### New Features

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

@@ -1208,6 +1208,32 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     @ContentChildren(IgxRowDragGhostDirective, { read: TemplateRef, descendants: false })
     public dragGhostCustomTemplates: QueryList<TemplateRef<any>>;
 
+
+    /**
+     * Gets the custom template, if any, used for row drag ghost.
+     */
+    public get dragGhostCustomTemplate() {
+        return this._dragGhostCustomTemplate || this.dragGhostCustomTemplates.first;
+    }
+
+    /**
+     * Sets a custom template for the row drag ghost.
+     * * ```html
+     * <ng-template #template igxRowDragGhost>
+     *    <igx-icon>menu</igx-icon>
+     * </ng-template>
+     * ```
+     * ```typescript
+     * @ViewChild("'template'", {read: TemplateRef })
+     * public template: TemplateRef<any>;
+     * this.grid.dragGhostCustomTemplate = this.template;
+     * ```
+     */
+    public set dragGhostCustomTemplate(template: TemplateRef<any>) {
+        this._dragGhostCustomTemplate = template;
+    }
+
+
     /**
      * @hidden @internal
      */
@@ -2380,10 +2406,24 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     /**
      * The custom template, if any, that should be used when rendering the row drag indicator icon
      */
+    @Input()
     public get dragIndicatorIconTemplate(): TemplateRef<any> {
         return this._customDragIndicatorIconTemplate || this.dragIndicatorIconTemplates.first;
     }
 
+    /**
+     * Sets a custom template that should be used when rendering the row drag indicator icon.
+     * * ```html
+     * <ng-template #template igxDragIndicatorIcon>
+     *    <igx-icon>expand_less</igx-icon>
+     * </ng-template>
+     * ```
+     * ```typescript
+     * @ViewChild("'template'", {read: TemplateRef })
+     * public template: TemplateRef<any>;
+     * this.grid.dragIndicatorIconTemplate = this.template;
+     * ```
+     */
     public set dragIndicatorIconTemplate(val: TemplateRef<any>) {
         this._customDragIndicatorIconTemplate = val;
     }
@@ -2854,6 +2894,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     private _filteredSortedData = null;
 
     private _customDragIndicatorIconTemplate: TemplateRef<any>;
+    private _dragGhostCustomTemplate: TemplateRef<any>;
     private _cdrRequests = false;
     private _resourceStrings;
     private _emptyGridMessage = null;
@@ -3744,11 +3785,8 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      * @internal
      */
     public getDragGhostCustomTemplate() {
-        if (this.dragGhostCustomTemplates && this.dragGhostCustomTemplates.first) {
-            return this.dragGhostCustomTemplates.first;
-        }
 
-        return null;
+        return this.dragGhostCustomTemplate;
     }
 
     /**

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

@@ -1,4 +1,4 @@
-import { Component, ViewChild, DebugElement, QueryList } from '@angular/core';
+import { Component, ViewChild, DebugElement, QueryList, TemplateRef } from '@angular/core';
 import { TestBed, ComponentFixture, fakeAsync, tick } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
@@ -450,6 +450,40 @@ describe('Row Drag Tests #grid', () => {
                 const ghostText = document.getElementsByClassName(CSS_CLASS_GHOST_ROW)[0].textContent;
                 expect(ghostText).toEqual(' Moving a row! ');
             });
+
+            it('should allow setting custom drag icon and ghost element via Input.', () => {
+                fixture = TestBed.createComponent(IgxGridRowCustomGhostDraggableComponent);
+                grid = fixture.componentInstance.instance as IgxGridComponent;
+                fixture.detectChanges();
+                dropAreaElement = fixture.debugElement.query(By.css(CSS_CLASS_DROPPABLE_AREA)).nativeElement;
+                grid.dragIndicatorIconTemplate = fixture.componentInstance.rowDragTemplate;
+                grid.dragGhostCustomTemplate = fixture.componentInstance.rowDragGhostTemplate;
+                fixture.detectChanges();
+                rows = grid.rowList.toArray();
+                dragIndicatorElements = fixture.debugElement.queryAll(By.css(CSS_CLASS_DRAG_INDICATOR));
+                dragIndicatorElement = dragIndicatorElements[2].nativeElement;
+                dragRows = fixture.debugElement.queryAll(By.directive(IgxRowDragDirective));
+                rowDragDirective = dragRows[1].injector.get(IgxRowDragDirective);
+
+                expect(dragIndicatorElement.textContent.trim()).toBe('expand_less');
+
+                startPoint = UIInteractions.getPointFromElement(dragIndicatorElement);
+                movePoint = UIInteractions.getPointFromElement(rows[4].nativeElement);
+                dropPoint = UIInteractions.getPointFromElement(dropAreaElement);
+                pointerDownEvent = UIInteractions.createPointerEvent('pointerdown', startPoint);
+                pointerMoveEvent = UIInteractions.createPointerEvent('pointermove', movePoint);
+
+                rowDragDirective.onPointerDown(pointerDownEvent);
+                rowDragDirective.onPointerMove(pointerMoveEvent);
+                pointerMoveEvent = UIInteractions.createPointerEvent('pointermove', dropPoint);
+                rowDragDirective.onPointerMove(pointerMoveEvent);
+                const ghostElements: HTMLCollection = document.getElementsByClassName(CSS_CLASS_GHOST_ROW);
+                expect(ghostElements.length).toEqual(1);
+
+                const ghostText = document.getElementsByClassName(CSS_CLASS_GHOST_ROW)[0].textContent;
+                expect(ghostText.trim()).toEqual('CUSTOM');
+
+            });
         });
     });
 
@@ -1228,12 +1262,27 @@ export class IgxGridRowDraggableComponent extends DataParent {
         <div #nonDroppableArea class="non-droppable-area"
         [ngStyle]="{width:'100px', height:'100px', backgroundColor:'yellow'}">
         </div>
+
+        <ng-template #rowDragGhostTemplate let-data igxRowDragGhost>
+                <div class="dragGhost">
+                        CUSTOM
+                </div>
+        </ng-template>
+        <ng-template #rowDragTemplate let-data igxDragIndicatorIcon>
+            <igx-icon>expand_less</igx-icon>
+        </ng-template>
     `
 })
 export class IgxGridRowCustomGhostDraggableComponent extends DataParent {
     @ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true })
     public instance: IgxGridComponent;
 
+    @ViewChild('rowDragGhostTemplate', {read: TemplateRef, static: true })
+    public rowDragGhostTemplate: TemplateRef<any>;
+
+    @ViewChild('rowDragTemplate', {read: TemplateRef, static: true })
+    public rowDragTemplate: TemplateRef<any>;
+
     @ViewChild('dropArea', { read: IgxDropDirective, static: true })
     public dropArea: IgxDropDirective;