Skip to content

Commit 3197c63

Browse files
dafodafo
committed
feat(row-drag): Adding igxRowDragGhostDirective to all grids #6081 
1 parent 7bc8d4d commit 3197c63

File tree

7 files changed

+37
-31
lines changed

7 files changed

+37
-31
lines changed

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

+20
Original file line numberDiff line numberDiff line change
@@ -132,6 +132,7 @@ import { IgxGridToolbarCustomContentDirective } from './toolbar/toolbar.directiv
132132
import { IgxColumnComponent } from './columns/column.component';
133133
import { IgxColumnGroupComponent } from './columns/column-group.component';
134134
import { IGridSortingStrategy } from '../data-operations/sorting-strategy';
135+
import { IgxRowDragGhostDirective } from './row-drag.directive';
135136

136137
const MINIMUM_COLUMN_WIDTH = 136;
137138
const FILTER_ROW_HEIGHT = 50;
@@ -1894,6 +1895,25 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
18941895
@ContentChildren(IgxRowSelectorDirective, { read: IgxRowSelectorDirective, descendants: false })
18951896
public rowSelectorsTemplates: QueryList<IgxRowSelectorDirective>;
18961897

1898+
/**
1899+
* @hidden
1900+
* @internal
1901+
*/
1902+
public get dragGhostCustomTemplate(): TemplateRef<IgxRowDragGhostDirective> {
1903+
if (this.dragGhostCustomTemplates && this.dragGhostCustomTemplates.first) {
1904+
return this.dragGhostCustomTemplates.first.templateRef;
1905+
}
1906+
1907+
return null;
1908+
}
1909+
1910+
/**
1911+
* @hidden
1912+
* @internal
1913+
*/
1914+
@ContentChildren(IgxRowDragGhostDirective, { read: IgxRowDragGhostDirective, descendants: false })
1915+
public dragGhostCustomTemplates: QueryList<IgxRowDragGhostDirective>;
1916+
18971917
/**
18981918
* @hidden
18991919
*/

‎projects/igniteui-angular/src/lib/grids/grid/grid.component.ts

+1-22
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ import { IgxColumnResizingService } from '../resizing/resizing.service';
2222
import { IgxGridSummaryService } from '../summaries/grid-summary.service';
2323
import { IgxGridSelectionService, IgxGridCRUDService } from '../selection/selection.service';
2424
import { IgxForOfSyncService, IgxForOfScrollSyncService } from '../../directives/for-of/for_of.sync.service';
25-
import { IgxDragIndicatorIconDirective, IgxRowDragGhost } from '../row-drag.directive';
25+
import { IgxDragIndicatorIconDirective } from '../row-drag.directive';
2626
import { IgxGridMRLNavigationService } from '../grid-mrl-navigation.service';
2727
import { FilterMode } from '../common/enums';
2828
import { GridType } from '../common/grid.interface';
@@ -491,27 +491,6 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
491491
@ContentChild(IgxDragIndicatorIconDirective, { read: TemplateRef, static: false })
492492
public dragIndicatorIconTemplate: TemplateRef<any> = null;
493493

494-
/**
495-
* The custom drag ghost, if any, that should be used when rendering the drag ghost
496-
*
497-
* ```typescript
498-
* // Set in typescript
499-
* const myCustomGhostTemplate: TemplateRef<any> = myComponent.customGhostTemplate;
500-
* myComponent.dragGhostCustomTemplate = myCustomGhostTemplate;
501-
* ```
502-
* ```html
503-
* <!-- Set in markup -->
504-
* <igx-grid #grid>
505-
* ...
506-
* <ng-template igxDragCustomGhost>
507-
* <div class="dragGhost">Custom drag ghost!</div>
508-
* </ng-template>
509-
* </igx-grid>
510-
* ```
511-
*/
512-
@ContentChild(IgxRowDragGhost , { read: TemplateRef, static: false })
513-
public dragGhostCustomTemplate: TemplateRef<any> = null;
514-
515494
@ViewChildren(IgxGridGroupByRowComponent, { read: IgxGridGroupByRowComponent })
516495
private _groupsRowList: QueryList<IgxGridGroupByRowComponent>;
517496

‎projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
</ng-template>
1616

1717
<ng-container *ngIf="rowDraggable">
18-
<div [class]="resolveDragIndicatorClasses" [igxRowDrag]="this" (click)="$event.stopPropagation()">
18+
<div [class]="resolveDragIndicatorClasses" [igxRowDrag]="this" (click)="$event.stopPropagation()" [ghostTemplate]="this.grid.dragGhostCustomTemplate">
1919
<ng-container *ngTemplateOutlet="this.grid.dragIndicatorIconTemplate ? this.grid.dragIndicatorIconTemplate : this.grid.dragIndicatorIconBase"></ng-container>
2020
</div>
2121
</ng-container>

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

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Directive, Input, OnDestroy, NgModule } from '@angular/core';
1+
import { Directive, Input, OnDestroy, NgModule, TemplateRef } from '@angular/core';
22
import { IgxDragDirective } from '../directives/drag-drop/drag-drop.directive';
33
import { KEYS } from '../core/utils';
44
import { fromEvent, Subscription } from 'rxjs';
@@ -164,13 +164,14 @@ export class IgxDragIndicatorIconDirective {
164164
selector: '[igxRowDragGhost]'
165165
})
166166

167-
export class IgxRowDragGhost {
167+
export class IgxRowDragGhostDirective {
168+
constructor(public templateRef: TemplateRef<any>) { }
168169
}
169170

170171
@NgModule({
171-
declarations: [IgxRowDragDirective, IgxDragIndicatorIconDirective, IgxRowDragGhost ],
172+
declarations: [IgxRowDragDirective, IgxDragIndicatorIconDirective, IgxRowDragGhostDirective],
172173
entryComponents: [],
173-
exports: [IgxRowDragDirective, IgxDragIndicatorIconDirective, IgxRowDragGhost ],
174+
exports: [IgxRowDragDirective, IgxDragIndicatorIconDirective, IgxRowDragGhostDirective],
174175
imports: []
175176
})
176177

‎projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<ng-container *ngIf="rowDraggable">
2-
<div [class]="resolveDragIndicatorClasses" [igxRowDrag]="this" (click)="$event.stopPropagation()">
2+
<div [class]="resolveDragIndicatorClasses" [igxRowDrag]="this" (click)="$event.stopPropagation()" [ghostTemplate]="this.grid.dragGhostCustomTemplate">
33
<ng-container *ngTemplateOutlet="this.grid.dragIndicatorIconTemplate ? this.grid.dragIndicatorIconTemplate : this.grid.dragIndicatorIconBase"></ng-container>
44
</div>
55
</ng-container>

‎src/app/grid-row-draggable/grid-row-draggable.sample.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
<igx-icon fontSet="material" [igxRowDrag]="cell.row">info</igx-icon>
1414
</ng-template>
1515
</igx-column>
16-
<ng-template let-data igxDragCustomGhost>
16+
<ng-template let-data igxRowDragGhost>
1717
<div class="dragGhost">
1818
<igx-icon fontSet="material"></igx-icon>
1919
Moving {{data.ProductName}}!

‎src/app/hierarchical-grid/hierarchical-grid.sample.html

+8-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ <h4 class="sample-title">Sample One</h4>
44
<igx-buttongroup [values]="displayDensities" (onSelect)="selectDensity($event)" style="display: block; width: 500px"></igx-buttongroup>
55
</div>
66
<button igxButton="raised" (click)="getState()">Get state</button>
7-
<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"
7+
<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"
88
[height]="'600px'" [width]="'800px'" [expandChildren]="rootExpanded" #hGrid>
99
<igx-column field="ID" [resizable]="true" [pinned]="true" [filterable]='true'></igx-column>
1010
<igx-column-group header="Information">
@@ -23,7 +23,7 @@ <h4 class="sample-title">Sample One</h4>
2323
<ng-template igxRowCollapsedIndicator>
2424
<igx-icon role="button" fontSet="material">add</igx-icon>
2525
</ng-template>
26-
<igx-row-island [showExpandAll]='true' [key]="'childData'" [autoGenerate]="false" [allowFiltering]='false' [rowSelectable]='isRowSelectable' [expandChildren]="firstLevelExpanded" #layout1 >
26+
<igx-row-island [rowDraggable]="true" [showExpandAll]='true' [key]="'childData'" [autoGenerate]="false" [allowFiltering]='false' [rowSelectable]='isRowSelectable' [expandChildren]="firstLevelExpanded" #layout1 >
2727
<igx-column field="ID" [hasSummary]='true' [dataType]="'number'"></igx-column>
2828
<igx-column-group header="Information2">
2929
<igx-column field="ChildLevels" [resizable]="true" [groupable]='true'></igx-column>
@@ -53,6 +53,12 @@ <h4 class="sample-title">Sample One</h4>
5353
<igx-column field="ChildLevels" [groupable]='true'></igx-column>
5454
<igx-column field="ProductName" [groupable]='true'></igx-column>
5555
</igx-row-island> -->
56+
<ng-template let-data igxRowDragGhost>
57+
<div class="dragGhost">
58+
<igx-icon fontSet="material"></igx-icon>
59+
Moving {{data.ProductName}}!
60+
</div>
61+
</ng-template>
5662
</igx-hierarchical-grid>
5763

5864
<h4 class="sample-title">Sample two</h4>

0 commit comments

Comments
 (0)