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 index 4517d5cf005..3ab5a759c9f 100644 --- 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 @@ -762,10 +762,7 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy { fromEvent(document.defaultView, 'mouseup').pipe(takeUntil(this._destroy)) .subscribe((res) => this.onPointerUp(res)); } - - this.element.nativeElement.addEventListener('transitionend', (args) => { - this.onTransitionEnd(args); - }); + this.element.nativeElement.addEventListener('transitionend', this.onTransitionEnd.bind(this)); }); // Set transition duration to 0s. This also helps with setting `visibility: hidden` to the base to not lag. @@ -789,6 +786,8 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy { } } + this.element.nativeElement.removeEventListener('transitionend', this.onTransitionEnd); + if (this._containerScrollIntervalId) { clearInterval(this._containerScrollIntervalId); this._containerScrollIntervalId = null; @@ -1194,12 +1193,7 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy { if (ghostDestroyArgs.cancel) { return; } - this.ghostElement.remove(); - this.ghostElement = null; - if (this._dynamicGhostRef) { - this._dynamicGhostRef.destroy(); - this._dynamicGhostRef = null; - } + this.clearGhost(); } else if (!this.ghost) { this.element.nativeElement.style.transitionProperty = ''; this.element.nativeElement.style.transitionDuration = '0.0s'; @@ -1222,6 +1216,20 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy { }); } + protected clearGhost() { + this.ghostElement.removeEventListener('pointermove', this.onPointerMove); + this.ghostElement.removeEventListener('pointerup', this.onPointerUp); + this.ghostElement.removeEventListener('lostpointercapture', this.onPointerLost); + this.ghostElement.removeEventListener('transitionend', this.onTransitionEnd); + this.ghostElement.remove(); + this.ghostElement = null; + + if (this._dynamicGhostRef) { + this._dynamicGhostRef.destroy(); + this._dynamicGhostRef = null; + } + } + /** * @hidden * Create ghost element - if a Node object is provided it creates a clone of that node, @@ -1298,21 +1306,13 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy { if (this._pointerDownId !== null) { this.ghostElement.setPointerCapture(this._pointerDownId); } - this.ghostElement.addEventListener('pointermove', (args) => { - this.onPointerMove(args); - }); - this.ghostElement.addEventListener('pointerup', (args) => { - this.onPointerUp(args); - }); - this.ghostElement.addEventListener('lostpointercapture', (args) => { - this.onPointerLost(args); - }); + this.ghostElement.addEventListener('pointermove', this.onPointerMove.bind(this)); + this.ghostElement.addEventListener('pointerup', this.onPointerUp.bind(this)); + this.ghostElement.addEventListener('lostpointercapture', this.onPointerLost.bind(this)); } // Transition animation when the ghostElement is released and it returns to it's original position. - this.ghostElement.addEventListener('transitionend', (args) => { - this.onTransitionEnd(args); - }); + this.ghostElement.addEventListener('transitionend', this.onTransitionEnd.bind(this)); this.cdr.detectChanges(); } diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index c301b053f4f..36caa19a376 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -4015,7 +4015,7 @@ export abstract class IgxGridBaseDirective implements GridType, this.onPinnedRowsChanged(change); }); - this.addRowSnackbar?.clicked.subscribe(() => { + this.addRowSnackbar?.clicked.pipe(takeUntil(this.destroy$)).subscribe(() => { const rec = this.filteredSortedData[this.lastAddedRowIndex]; this.scrollTo(rec, 0); this.addRowSnackbar.close(); diff --git a/projects/igniteui-angular/src/lib/grids/moving/moving.drag.directive.ts b/projects/igniteui-angular/src/lib/grids/moving/moving.drag.directive.ts index e6e412aadba..2bb587525fe 100644 --- a/projects/igniteui-angular/src/lib/grids/moving/moving.drag.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/moving/moving.drag.directive.ts @@ -1,6 +1,6 @@ import { Directive, OnDestroy, Input, ElementRef, ViewContainerRef, NgZone, ChangeDetectorRef, Renderer2 } from '@angular/core'; import { IgxDragDirective } from '../../directives/drag-drop/drag-drop.directive'; -import { Subscription, fromEvent } from 'rxjs'; +import { Subscription, fromEvent, takeUntil } from 'rxjs'; import { PlatformUtil } from '../../core/utils'; import { IgxColumnMovingService } from './moving.service'; import { ColumnType } from '../common/grid.interface'; @@ -73,8 +73,7 @@ export class IgxColumnMovingDragDirective extends IgxDragDirective implements On source: this.column }; this.column.grid.columnMovingStart.emit(movingStartArgs); - - this.subscription$ = fromEvent(this.column.grid.document.defaultView, 'keydown').subscribe((ev: KeyboardEvent) => { + this.subscription$ = fromEvent(this.column.grid.document.defaultView, 'keydown').pipe(takeUntil(this._destroy)).subscribe((ev: KeyboardEvent) => { if (ev.key === this.platformUtil.KEYMAP.ESCAPE) { this.onEscape(ev); } diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 5f727bf4b8d..b638c22f0a1 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -382,6 +382,11 @@ export class AppComponent implements OnInit { icon: 'view_column', name: 'Grid Toolbar' }, + { + link: '/gridReCreate', + icon: 'view_column', + name: 'Grid ReCreate' + }, { link: '/gridToolbarCustom', icon: 'view_column', diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index 98e5cbb6460..ff6cc827b56 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -141,6 +141,7 @@ import { MonthPickerSampleComponent } from './month-picker/month-picker.sample'; import { GridDocManagerSampleComponent } from './docmanager-grid/docmanager-grid.sample'; import { HoundComponent } from './hound/hound.component'; import { LabelSampleComponent } from "./label/label.sample"; +import { GridRecreateSampleComponent } from './grid-re-create/grid-re-create.sample'; export const appRoutes: Routes = [ { @@ -489,6 +490,10 @@ export const appRoutes: Routes = [ path: 'gridRowDrag', component: GridRowDraggableComponent }, + { + path: 'gridReCreate', + component: GridRecreateSampleComponent + }, { path: 'gridToolbar', component: GridToolbarSampleComponent diff --git a/src/app/grid-re-create/grid-re-create.sample.html b/src/app/grid-re-create/grid-re-create.sample.html new file mode 100644 index 00000000000..d8eb968a9ae --- /dev/null +++ b/src/app/grid-re-create/grid-re-create.sample.html @@ -0,0 +1,8 @@ +
+ + + + +
+ + diff --git a/src/app/grid-re-create/grid-re-create.sample.scss b/src/app/grid-re-create/grid-re-create.sample.scss new file mode 100644 index 00000000000..e69de29bb2d diff --git a/src/app/grid-re-create/grid-re-create.sample.ts b/src/app/grid-re-create/grid-re-create.sample.ts new file mode 100644 index 00000000000..3adc49c2ffe --- /dev/null +++ b/src/app/grid-re-create/grid-re-create.sample.ts @@ -0,0 +1,30 @@ +import { NgFor, NgIf } from '@angular/common'; +import { Component, OnInit } from '@angular/core'; +import { IgxAvatarComponent, IgxColumnComponent, IgxGridComponent, IgxIconComponent, IgxListComponent, IgxListItemComponent, IgxPageNavigationComponent, IgxPageSizeSelectorComponent, IgxPaginatorComponent, IgxPaginatorContentDirective } from 'igniteui-angular'; + + +@Component({ + selector: 'app-grid-sample', + styleUrls: ['grid-re-create.sample.scss'], + templateUrl: 'grid-re-create.sample.html', + standalone: true, + providers: [ + ], + imports: [NgIf, NgFor, IgxGridComponent, IgxColumnComponent,IgxListComponent, IgxListItemComponent, IgxAvatarComponent, IgxIconComponent, + IgxPaginatorComponent, IgxPaginatorContentDirective, IgxPageSizeSelectorComponent, IgxPageNavigationComponent] +}) +export class GridRecreateSampleComponent implements OnInit { + public data = [] as any[]; + public create = false; + + public ngOnInit(): void { + new Array(100).fill({}).forEach((_, i) => { + this.data.push({ + id: i, + columnA: `A ${i}`, + columnB: `B ${i}`, + }); + }); + } + +}