fix(drag): Fix ghost template not detecting changes automatically. #1…

…3346
IgniteUI · Aug 4, 2023 · 19184ce · 19184ce
1 parent d4550ff
commit 19184ce
Show file tree

Hide file tree

Showing 4 changed files with 112 additions and 2 deletions.
diff --git a/projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.directive.ts b/projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.directive.ts
@@ -1200,7 +1200,10 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy {
         }
 
         if (this.ghostTemplate) {
-            this._dynamicGhostRef = this.viewContainer.createEmbeddedView(this.ghostTemplate, this.ghostContext);
+            this.zone.run(() => {
+                // Create template in zone, so it gets updated by it automatically.
+                this._dynamicGhostRef = this.viewContainer.createEmbeddedView(this.ghostTemplate, this.ghostContext);
+            });
             if (this._dynamicGhostRef.rootNodes[0].style.display === 'contents') {
                 // Change the display to default since display contents does not position the element absolutely.
                 this._dynamicGhostRef.rootNodes[0].style.display = 'block';

diff --git a/src/app/drag-drop/drag-drop.sample.html b/src/app/drag-drop/drag-drop.sample.html
@@ -226,6 +226,41 @@ <h4 class="sample-title">Wishlist reorder with transitions:</h4>
     </article>
 </section>
 <hr [style.width]="'100%'">
+<section>
+    <div>
+        <h4 class="sample-title">Multi selection row drag with custom ghost:</h4>
+        <span>From</span><br/>
+        <div id="fromDiv" class="rowsContainer scrollContainer">
+            <div igxDrag
+                *ngFor="let item of sourceRows"
+                [id]="item.name"
+                [ngClass]="{'lightblue' : item.selected, 'white': !item.selected}"
+                (click)="rowClicked($event)"
+                (dragStart)="dragStartHandler($event)"
+                [ghostTemplate]="customGhost">
+                    <span>{{ item.name }}</span>
+            </div>
+        </div>
+    </div>
+
+    <div>
+        <span>To</span><br/>
+        <div id="toDiv" class="rowsContainer scrollContainer" igxDrop (dropped)="onSelectRowDropped()">
+            <div *ngFor="let item of targetRows">
+                <span>{{ item.name }}</span>
+            </div>
+        </div>
+    </div>
+
+    <ng-template #customGhost>
+        <div class="dragGhost">
+            <span *ngFor="let row of selectedRows">
+                {{ row.name }}
+            </span>
+        </div>
+    </ng-template>
+</section>
+<hr [style.width]="'100%'">
 <section class="sample-content">
     <article class="sample-column">
         <div [style.width]="'70%'" >

diff --git a/src/app/drag-drop/drag-drop.sample.scss b/src/app/drag-drop/drag-drop.sample.scss
@@ -164,3 +164,37 @@
     box-shadow: 0 2px 6px 0 gray;
     background-color: rgba(232, 232, 232, .5);
 }
+
+.white {
+    background-color: white;
+}
+
+.lightblue {
+    background-color: lightblue;
+}
+
+.rowsContainer {
+    margin: 1em;
+    height: 100px;
+    width: 50%;
+    border: 1px solid gray;
+}
+
+.scrollContainer{
+    overflow: auto;
+}
+
+.dragGhost {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    width: rem(180px);
+    color: black;
+    background-color: yellow;
+    /*border-color: gray;*/
+    border: 1px solid gray;
+    font-size: rem(13px);
+    padding: rem(8px);
+    border-radius: rem(4px);
+}
diff --git a/src/app/drag-drop/drag-drop.sample.ts b/src/app/drag-drop/drag-drop.sample.ts
@@ -9,7 +9,8 @@ import {
     IDragBaseEventArgs,
     IgxDragLocation,
     DragDirection,
-    IDropDroppedEventArgs
+    IDropDroppedEventArgs,
+    IDragStartEventArgs
 } from 'igniteui-angular';
 
 @Component({
@@ -100,6 +101,11 @@ export class DragDropSampleComponent {
     public toggleStartPageX;
     public toggleStartPageY;
 
+    // Multi selection row drag
+    public sourceRows: any[] = Array.from(Array(10)).map((e, i) => { return {name: "Item " + i, selected: false}});
+    public targetRows: any[] = [];
+    public selectedRows: any[] = [];
+
     /** List drag properties */
     public draggedDir = null;
     public draggedIndex = null;
@@ -443,4 +449,36 @@ export class DragDropSampleComponent {
     public getCategoryMovies(inCategory: string){
         return this.listNotes.filter(item => item.category === inCategory);
     }
+
+
+    // Multi selection row drag
+    public rowClicked(event: MouseEvent): void {
+        const target = event.target as Element;
+        const clickedCardId = target?.id;
+        const index = this.sourceRows.findIndex((item) => item.name === clickedCardId);
+        if(index < 0) return;
+        this.sourceRows[index].selected = !this.sourceRows[index].selected;
+    }
+
+    public dragStartHandler(event: IDragStartEventArgs) {
+        const dragItemId = event.owner.element.nativeElement.id;
+        if(dragItemId !== undefined){
+          const index = this.sourceRows.findIndex((item) => item.name === dragItemId);
+          if(index >= 0) this.sourceRows[index].selected = true;
+        }
+
+        this.selectedRows = this.sourceRows.filter(item => item.selected).map((item) => { return {name: item.name, selected: false}});
+    }
+
+    public onSelectRowDropped() {
+        if(this.selectedRows.length === 0) return;
+        this.selectedRows.forEach(clickedCard => {
+          const dragItemIndexInFromArray = this.sourceRows.findIndex((item) => item.name === clickedCard.name);
+          this.sourceRows.splice(dragItemIndexInFromArray, 1);
+        });
+        this.targetRows.push(...this.selectedRows);
+        console.log(this.targetRows);
+
+        this.selectedRows = [];
+    }
 }