Merge pull request #12198 from IgniteUI/mkirova/expose-rowdrag-template-inputs

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

Author: dkamburov

CHANGELOG.md

@@ -2,11 +2,12 @@
 
 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.
     - `detailTemplate` - Gets/Sets the master-detail template.
 
 ## 14.2.0

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

@@ -1227,6 +1227,33 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     @ContentChildren(IgxRowDragGhostDirective, { read: TemplateRef, descendants: false })
     public dragGhostCustomTemplates: QueryList<TemplateRef<IgxGridRowDragGhostContext>>;
 
+
+    /**
+     * Gets the custom template, if any, used for row drag ghost.
+     */
+    @Input()
+    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<IgxGridRowDragGhostContext>) {
+        this._dragGhostCustomTemplate = template;
+    }
+
+
     /**
      * @hidden @internal
      */
@@ -2399,10 +2426,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<IgxGridEmptyTemplateContext> {
         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<IgxGridEmptyTemplateContext>) {
         this._customDragIndicatorIconTemplate = val;
     }
@@ -2873,6 +2914,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     private _filteredSortedData = null;
 
     private _customDragIndicatorIconTemplate: TemplateRef<IgxGridEmptyTemplateContext>;
+    private _dragGhostCustomTemplate: TemplateRef<IgxGridRowDragGhostContext>;
     private _cdrRequests = false;
     private _resourceStrings;
     private _emptyGridMessage = null;
@@ -3763,11 +3805,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';
@@ -420,10 +420,12 @@ describe('Row Drag Tests #grid', () => {
                     ]
                 });
             }));
-            it('should correctly create custom ghost element', () => {
+            beforeEach(fakeAsync(() => {
                 fixture = TestBed.createComponent(IgxGridRowCustomGhostDraggableComponent);
                 grid = fixture.componentInstance.instance;
                 fixture.detectChanges();
+            }));
+            it('should correctly create custom ghost element', () => {
                 dropAreaElement = fixture.debugElement.query(By.css(CSS_CLASS_DROPPABLE_AREA)).nativeElement;
                 rows = grid.rowList.toArray();
                 dragIndicatorElements = fixture.debugElement.queryAll(By.css(CSS_CLASS_DRAG_INDICATOR));
@@ -449,6 +451,42 @@ describe('Row Drag Tests #grid', () => {
 
                 const ghostText = document.getElementsByClassName(CSS_CLASS_GHOST_ROW)[0].textContent;
                 expect(ghostText).toEqual(' Moving a row! ');
+                pointerUpEvent = UIInteractions.createPointerEvent('pointerup', dropPoint);
+                rowDragDirective.onPointerUp(pointerUpEvent);
+            });
+
+            it('should allow setting custom drag icon and ghost element via Input.', () => {
+                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');
+
+                pointerUpEvent = UIInteractions.createPointerEvent('pointerup', dropPoint);
+                rowDragDirective.onPointerUp(pointerUpEvent);
+
             });
         });
     });
@@ -751,7 +789,7 @@ describe('Row Drag Tests #grid', () => {
 
             const ghostElements = document.getElementsByClassName(CSS_CLASS_GHOST_ROW);
             const ghostElement = ghostElements[0];
-            expect(ghostElements.length).toEqual(2);
+            expect(ghostElements.length).toEqual(1);
             expect(ghostElement.classList.contains(CSS_CLASS_SELECTED_ROW)).toBeFalsy();
 
             pointerMoveEvent = UIInteractions.createPointerEvent('pointermove', dropPoint);
@@ -1228,12 +1266,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;