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
index 1e85e9c2ac..8d17fb9142 100644
--- 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
index 0d140ca8c3..7cd56b5f6b 100644
--- 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
index 4113dcea40..bded3776d2 100644
--- 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
index 9268c17cec..a0c66b0ef0 100644
--- 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
index 36106ff467..dc79c6c84a 100644
--- 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
index ef698e292c..0cc440052b 100644
--- 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
index 59583d13ba..308966c157 100644
--- 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
index 40a3e83bd6..be191e23e2 100644
--- 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/src/app/hierarchical-grid/hierarchical-grid-row-drag-base/hierarchical-row-drag-base.component.html b/src/app/hierarchical-grid/hierarchical-grid-row-drag-base/hierarchical-row-drag-base.component.html
index a24c8244bf..e510115b74 100644
--- a/src/app/hierarchical-grid/hierarchical-grid-row-drag-base/hierarchical-row-drag-base.component.html
+++ b/src/app/hierarchical-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/src/app/hierarchical-grid/hierarchical-grid-row-drag-base/hierarchical-row-drag-base.component.ts b/src/app/hierarchical-grid/hierarchical-grid-row-drag-base/hierarchical-row-drag-base.component.ts
index fe20caf87a..63e26c312d 100644
--- a/src/app/hierarchical-grid/hierarchical-grid-row-drag-base/hierarchical-row-drag-base.component.ts
+++ b/src/app/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/src/app/hierarchical-grid/hierarchical-grid-row-drag/hierarchical-grid-row-drag.component.html b/src/app/hierarchical-grid/hierarchical-grid-row-drag/hierarchical-grid-row-drag.component.html
index 2590c7027d..ca48c83615 100644
--- a/src/app/hierarchical-grid/hierarchical-grid-row-drag/hierarchical-grid-row-drag.component.html
+++ b/src/app/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
index 6354ea7865..2a20b9a543 100644
--- 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/src/app/hierarchical-grid/hierarchical-grid-row-reorder/hierarchical-grid-row-reorder.component.html b/src/app/hierarchical-grid/hierarchical-grid-row-reorder/hierarchical-grid-row-reorder.component.html
index b0f7200456..3b992dfa2b 100644
--- a/src/app/hierarchical-grid/hierarchical-grid-row-reorder/hierarchical-grid-row-reorder.component.html
+++ b/src/app/hierarchical-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/src/app/hierarchical-grid/hierarchical-grid-row-reorder/hierarchical-grid-row-reorder.component.ts b/src/app/hierarchical-grid/hierarchical-grid-row-reorder/hierarchical-grid-row-reorder.component.ts
index 21a4c21a8c..1376712c99 100644
--- a/src/app/hierarchical-grid/hierarchical-grid-row-reorder/hierarchical-grid-row-reorder.component.ts
+++ b/src/app/hierarchical-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
index 02993029c8..0aeec1089b 100644
--- 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
index 5638743e04..2a777d698b 100644
--- 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
index 195867e3d7..f7c2260b8d 100644
--- 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
index 8cf35f7e44..e1591794ac 100644
--- 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
index 02e24aba74..0c15862b55 100644
--- 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
index 88ab3b769c..d57a3c1e3b 100644
--- 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 };