Merge branch 'vNext' into mvenkov/add-row-selector-template-samples

IgniteUI · Sep 10, 2019 · d03973c · d03973c
2 parents c012c0c + 8b9c131
commit d03973c
Show file tree

Hide file tree

Showing 20 changed files with 28 additions and 39 deletions.
diff --git a/src/app/grid/grid-row-drag-base/grid-row-drag-base.component.html b/src/app/grid/grid-row-drag-base/grid-row-drag-base.component.html
@@ -12,7 +12,7 @@
         <igx-column [field]="'Fax'" [header]="'Fax'" width="100px"></igx-column>
     </igx-grid>
     <igx-grid #targetGrid igxDrop [data]="data2" [height]="'480px'" [width]="'640px'" [autoGenerate]="false" [emptyGridTemplate]="dragHereTemplate"
-        (onEnter)="onEnterAllowed($event)" (onLeave)="onLeaveAllowed($event)" (onDrop)="onDropAllowed($event)" [primaryKey]="'ID'">
+        (enter)="onEnterAllowed($event)" (leave)="onLeaveAllowed($event)" (dropped)="onDropAllowed($event)" [primaryKey]="'ID'">
         <igx-column [field]="'ID'" [header]="'ID'" width="100px"></igx-column>
         <igx-column [field]="'CompanyName'" [header]="'Company Name'" width="100px"></igx-column>
         <igx-column [field]="'ContactName'" [header]="'Contact Name'" width="100px" [minWidth]="'60px'" [maxWidth]="'230px'"></igx-column>

diff --git a/src/app/grid/grid-row-drag-base/grid-row-drag-base.component.ts b/src/app/grid/grid-row-drag-base/grid-row-drag-base.component.ts
@@ -28,17 +28,16 @@ export class GridDragBaseSampleComponent {
     }
 
     public onDropAllowed(args) {
-        args.cancel = true;
         this.targetGrid.addRow(args.dragData.rowData);
         this.sourceGrid.deleteRow(args.dragData.rowID);
     }
 
     public onEnterAllowed(args) {
-        this.changeGhostIcon(args.drag.dragGhost, DragIcon.ALLOW);
+        this.changeGhostIcon(args.drag.ghostElement, DragIcon.ALLOW);
     }
 
     public onLeaveAllowed(args) {
-        this.changeGhostIcon(args.drag.dragGhost, DragIcon.DEFAULT);
+        this.changeGhostIcon(args.drag.ghostElement, DragIcon.DEFAULT);
     }
 
     private changeGhostIcon(ghost, icon: string) {

diff --git a/src/app/grid/grid-row-drag-to-grid/grid-row-drag-to-grid.component.html b/src/app/grid/grid-row-drag-to-grid/grid-row-drag-to-grid.component.html
@@ -15,7 +15,7 @@
         </ng-template>
     </igx-grid>
     <igx-grid #targetGrid igxDrop [data]="data2" [height]="'480px'" [width]="'640px'" [autoGenerate]="false" [emptyGridTemplate]="dragHereTemplate"
-        (onEnter)="onEnterAllowed($event)" (onLeave)="onLeaveAllowed($event)" (onDrop)="onDropAllowed($event)" [primaryKey]="'ID'">
+        (enter)="onEnterAllowed($event)" (leave)="onLeaveAllowed($event)" (dropped)="onDropAllowed($event)" [primaryKey]="'ID'">
         <igx-column [field]="'ID'" [header]="'ID'" width="100px"></igx-column>
         <igx-column [field]="'CompanyName'" [header]="'Company Name'" width="100px"></igx-column>
         <igx-column [field]="'ContactName'" [header]="'Contact Name'" width="100px" [minWidth]="'60px'" [maxWidth]="'230px'"></igx-column>

diff --git a/src/app/grid/grid-row-drag-to-grid/grid-row-drag-to-grid.component.ts b/src/app/grid/grid-row-drag-to-grid/grid-row-drag-to-grid.component.ts
@@ -28,17 +28,16 @@ export class GridDragToGridSampleComponent {
     }
 
     public onDropAllowed(args) {
-        args.cancel = true;
         this.targetGrid.addRow(args.dragData.rowData);
         this.sourceGrid.deleteRow(args.dragData.rowID);
     }
 
     public onEnterAllowed(args) {
-        this.changeGhostIcon(args.drag.dragGhost, DragIcon.ALLOW);
+        this.changeGhostIcon(args.drag.ghostElement, DragIcon.ALLOW);
     }
 
     public onLeaveAllowed(args) {
-        this.changeGhostIcon(args.drag.dragGhost, DragIcon.DEFAULT);
+        this.changeGhostIcon(args.drag.ghostElement, DragIcon.DEFAULT);
     }
 
     private changeGhostIcon(ghost, icon: string) {

diff --git a/src/app/grid/grid-row-drag/grid-row-drag.component.html b/src/app/grid/grid-row-drag/grid-row-drag.component.html
@@ -11,7 +11,7 @@
     <div class="solar-system">
         <div class="planets">
             <planet #planet *ngFor="let data of planetData" [data]="data"
-                igxDrop (onEnter)="onEnter($event, planet)" (onLeave)="onLeave($event)" (onDrop)="onDrop($event, planet)"></planet>
+                igxDrop (enter)="onEnter($event, planet)" (leave)="onLeave($event)" (dropped)="onDrop($event, planet)"></planet>
         </div>
         <div class="sun-wrapper">
             <div class="sun">

diff --git a/src/app/grid/grid-row-drag/grid-row-drag.component.ts b/src/app/grid/grid-row-drag/grid-row-drag.component.ts
@@ -35,12 +35,12 @@ export class GridDragSampleComponent {
     }
 
     public onEnter(args, planet: PlanetComponent) {
-        args.drag.dragGhost.classList.add(
+        args.drag.ghostElement.classList.add(
             this.isDropAllowed(args.dragData.rowData.name, planet.name) ? HoverClassList.ALLOW : HoverClassList.DENY);
     }
 
     public onLeave(args) {
-        const dragGhost: HTMLElement =  args.drag.dragGhost;
+        const dragGhost: HTMLElement =  args.drag.ghostElement;
 
         if (dragGhost) {
             dragGhost.classList.remove(HoverClassList.ALLOW);
@@ -49,8 +49,6 @@ export class GridDragSampleComponent {
     }
 
     public onDrop(args, planet: PlanetComponent) {
-        args.cancel = true;
-
         const row: IgxRowComponent<IgxGridBaseComponent & IGridDataBindable> = args.dragData;
         if (this.isDropAllowed(row.rowData.name, planet.name)) {
             row.rowData.planet = planet.name;

diff --git a/src/app/grid/grid-row-reorder-sample/grid-row-reorder.html b/src/app/grid/grid-row-reorder-sample/grid-row-reorder.html
@@ -1,6 +1,6 @@
 <div class="grid-container">
     <igx-grid #grid [data]="data" [height]="'800px'" [width]="'1000px'" [autoGenerate]="false" [rowDraggable]="true"
-        [primaryKey]="'ID'" igxDrop (onDrop)="onDropAllowed($event)">
+        [primaryKey]="'ID'" igxDrop (dropped)="onDropAllowed($event)">
         <igx-column [field]="'ID'" [header]="'ID'" width="100px"></igx-column>
         <igx-column [field]="'CompanyName'" [header]="'Company Name'" width="100px"></igx-column>
         <igx-column [field]="'ContactName'" [header]="'Contact Name'" width="100px" [minWidth]="'60px'"

diff --git a/src/app/grid/grid-row-reorder-sample/grid-row-reorder.ts b/src/app/grid/grid-row-reorder-sample/grid-row-reorder.ts
@@ -17,7 +17,6 @@ export class GridRowReorderComponent {
     }
 
     public onDropAllowed(args) {
-        args.cancel = true;
         const event = args.originalEvent;
         const currRowIndex = this.getCurrentRowIndex(this.grid.rowList.toArray(),
             { x: event.pageX, y: event.pageY });

diff --git a/...erarchical-grid/hierarchical-grid-row-drag-base/hierarchical-row-drag-base.component.html b/...erarchical-grid/hierarchical-grid-row-drag-base/hierarchical-row-drag-base.component.html
@@ -1,5 +1,5 @@
-<div class="drop-area" igxDrop (onEnter)="onEnterAllowed($event)" (onLeave)="onLeaveAllowed($event)"
-    (onDrop)="onDropAllowed($event)">
+<div class="drop-area" igxDrop (enter)="onEnterAllowed($event)" (leave)="onLeaveAllowed($event)"
+    (dropped)="onDropAllowed($event)">
     <igx-icon>delete</igx-icon>
     <div>Drag a row here to delete it</div>
 </div>

diff --git a/...hierarchical-grid/hierarchical-grid-row-drag-base/hierarchical-row-drag-base.component.ts b/...hierarchical-grid/hierarchical-grid-row-drag-base/hierarchical-row-drag-base.component.ts
@@ -26,17 +26,16 @@ export class HGridRowDragBaseComponent {
     }
 
     public onDropAllowed(args: IDropDroppedEventArgs) {
-        args.cancel = true;
         const draggedRow: IgxHierarchicalRowComponent = args.dragData;
         draggedRow.delete();
     }
 
     public onEnterAllowed(args) {
-        this.changeGhostIcon(args.drag.dragGhost, DragIcon.ALLOW);
+        this.changeGhostIcon(args.drag.ghostElement, DragIcon.ALLOW);
     }
 
     public onLeaveAllowed(args) {
-        this.changeGhostIcon(args.drag.dragGhost, DragIcon.DEFAULT);
+        this.changeGhostIcon(args.drag.ghostElement, DragIcon.DEFAULT);
     }
 
     private changeGhostIcon(ghost, icon: string) {

diff --git a/...pp/hierarchical-grid/hierarchical-grid-row-drag/hierarchical-grid-row-drag.component.html b/...pp/hierarchical-grid/hierarchical-grid-row-drag/hierarchical-grid-row-drag.component.html
@@ -1,5 +1,5 @@
-<div class="drop-area" igxDrop (onEnter)="onEnterAllowed($event)" (onLeave)="onLeaveAllowed($event)"
-    (onDrop)="onDropAllowed($event)">
+<div class="drop-area" igxDrop (enter)="onEnterAllowed($event)" (leave)="onLeaveAllowed($event)"
+    (dropped)="onDropAllowed($event)">
     <igx-icon>delete</igx-icon>
     <div>Drag a row here to delete it</div>
 </div>

diff --git a/src/app/hierarchical-grid/hierarchical-grid-row-drag/hierarchical-grid-row-drag.component.ts b/src/app/hierarchical-grid/hierarchical-grid-row-drag/hierarchical-grid-row-drag.component.ts
@@ -26,17 +26,16 @@ export class HGridDragSampleComponent {
     }
 
     public onDropAllowed(args: IDropDroppedEventArgs) {
-        args.cancel = true;
         const draggedRow: IgxHierarchicalRowComponent = args.dragData;
         draggedRow.delete();
     }
 
     public onEnterAllowed(args) {
-        this.changeGhostIcon(args.drag.dragGhost, DragIcon.ALLOW);
+        this.changeGhostIcon(args.drag.ghostElement, DragIcon.ALLOW);
     }
 
     public onLeaveAllowed(args) {
-        this.changeGhostIcon(args.drag.dragGhost, DragIcon.DEFAULT);
+        this.changeGhostIcon(args.drag.ghostElement, DragIcon.DEFAULT);
     }
 
     private changeGhostIcon(ghost, icon: string) {

diff --git a/...rarchical-grid/hierarchical-grid-row-reorder/hierarchical-grid-row-reorder.component.html b/...rarchical-grid/hierarchical-grid-row-reorder/hierarchical-grid-row-reorder.component.html
@@ -1,5 +1,5 @@
 <igx-hierarchical-grid class="hgrid" igxDrop #grid1 [data]="localData" [primaryKey]="'id'"
-    [rowDraggable]="true" [rowSelectable]="true" (onRowDragStart)="rowDragStart($event)" (onDrop)="rowDrop($event)"
+    [rowDraggable]="true" [rowSelectable]="true" (onRowDragStart)="rowDragStart($event)" (dropped)="rowDrop($event)"
     [height]="'540px'" [width]="'800px'" #hGrid>
     <igx-column field="name" header="Name"></igx-column>
     <igx-column field="system" header="Is System Drive"></igx-column>

diff --git a/...ierarchical-grid/hierarchical-grid-row-reorder/hierarchical-grid-row-reorder.component.ts b/...ierarchical-grid/hierarchical-grid-row-reorder/hierarchical-grid-row-reorder.component.ts
@@ -29,7 +29,6 @@ export class HGridRowReorderComponent {
     }
 
     public rowDrop(args: IDropDroppedEventArgs): void {
-        args.cancel = true;
         const targetRow = args.dragData;
         const event = args.originalEvent;
         const cursorPosition: Point = { x: event.pageX, y: event.pageY };

diff --git a/src/app/tree-grid/tree-grid-row-drag-base/tree-grid-row-drag-base.component.html b/src/app/tree-grid/tree-grid-row-drag-base/tree-grid-row-drag-base.component.html
@@ -1,5 +1,5 @@
-<div class="drop-area" igxDrop (onEnter)="onEnterAllowed($event)" (onLeave)="onLeaveAllowed($event)"
-    (onDrop)="onDropAllowed($event)">
+<div class="drop-area" igxDrop (enter)="onEnterAllowed($event)" (leave)="onLeaveAllowed($event)"
+    (dropped)="onDropAllowed($event)">
     <igx-icon>delete</igx-icon>
     <div>Drag a row here to delete it</div>
 </div>

diff --git a/src/app/tree-grid/tree-grid-row-drag-base/tree-grid-row-drag-base.component.ts b/src/app/tree-grid/tree-grid-row-drag-base/tree-grid-row-drag-base.component.ts
@@ -26,17 +26,16 @@ export class TreeGridRowDragBase {
     }
 
     public onDropAllowed(args: IDropDroppedEventArgs) {
-        args.cancel = true;
         const draggedRow: IgxTreeGridRowComponent = args.dragData;
         draggedRow.delete();
     }
 
     public onEnterAllowed(args) {
-        this.changeGhostIcon(args.drag.dragGhost, DragIcon.ALLOW);
+        this.changeGhostIcon(args.drag.ghostElement, DragIcon.ALLOW);
     }
 
     public onLeaveAllowed(args) {
-        this.changeGhostIcon(args.drag.dragGhost, DragIcon.DEFAULT);
+        this.changeGhostIcon(args.drag.ghostElement, DragIcon.DEFAULT);
     }
 
     private changeGhostIcon(ghost, icon: string) {

diff --git a/src/app/tree-grid/tree-grid-row-drag/tree-grid-row-drag.component.html b/src/app/tree-grid/tree-grid-row-drag/tree-grid-row-drag.component.html
@@ -1,5 +1,5 @@
-<div class="drop-area" igxDrop (onEnter)="onEnterAllowed($event)" (onLeave)="onLeaveAllowed($event)"
-    (onDrop)="onDropAllowed($event)">
+<div class="drop-area" igxDrop (enter)="onEnterAllowed($event)" (leave)="onLeaveAllowed($event)"
+    (dropped)="onDropAllowed($event)">
     <igx-icon>delete</igx-icon>
     <div>Drag a row here to delete it</div>
 </div>

diff --git a/src/app/tree-grid/tree-grid-row-drag/tree-grid-row-drag.component.ts b/src/app/tree-grid/tree-grid-row-drag/tree-grid-row-drag.component.ts
@@ -26,17 +26,16 @@ export class TreeGridRowDrag {
     }
 
     public onDropAllowed(args: IDropDroppedEventArgs) {
-        args.cancel = true;
         const draggedRow: IgxTreeGridRowComponent = args.dragData;
         draggedRow.delete();
     }
 
     public onEnterAllowed(args) {
-        this.changeGhostIcon(args.drag.dragGhost, DragIcon.ALLOW);
+        this.changeGhostIcon(args.drag.ghostElement, DragIcon.ALLOW);
     }
 
     public onLeaveAllowed(args) {
-        this.changeGhostIcon(args.drag.dragGhost, DragIcon.DEFAULT);
+        this.changeGhostIcon(args.drag.ghostElement, DragIcon.DEFAULT);
     }
 
     private changeGhostIcon(ghost, icon: string) {

diff --git a/src/app/tree-grid/tree-grid-row-reorder/tree-grid-row-reorder.component.html b/src/app/tree-grid/tree-grid-row-reorder/tree-grid-row-reorder.component.html
@@ -1,7 +1,7 @@
 <div class="grid_wrapper">
     <igx-tree-grid #treeGrid igxDrop [data]="localData" childDataKey="Employees" width="900px" height="550px"
         [autoGenerate]="false" [rowDraggable]="true" [paging]="true" foreignKey="ParentID" [rowSelectable]="true"
-        [primaryKey]="'ID'" (onRowDragStart)="rowDragStart($event)" (onDrop)="dropInGrid($event)">
+        [primaryKey]="'ID'" (onRowDragStart)="rowDragStart($event)" (dropped)="dropInGrid($event)">
         <igx-column field="Name" dataType="string" [sortable]="true" [editable]="true" [movable]="true"
             [resizable]="true">
         </igx-column>

diff --git a/src/app/tree-grid/tree-grid-row-reorder/tree-grid-row-reorder.component.ts b/src/app/tree-grid/tree-grid-row-reorder/tree-grid-row-reorder.component.ts
@@ -24,7 +24,6 @@ export class TreeGridRowReorderComponent {
     }
 
     public dropInGrid(args: IDropDroppedEventArgs): void {
-        args.cancel = true;
         const draggedRow: IgxTreeGridRowComponent = args.dragData;
         const event = args.originalEvent;
         const cursorPosition: Point = { x: event.pageX, y: event.pageY };