Added a row drag pin sample

code-gen-library/WebGridPinRowOnRendered/Blazor.js

@@ -1,7 +1,11 @@
 //begin eventHandler
 igRegisterScript("WebGridPinRowOnRendered", (event) => {
-        var grid = document.getElementById("grid");
-        grid.pinRow("ALFKI");
-        grid.pinRow("AROUT");
+        const grid = event.target || event.currentTarget;
+
+        if (!grid || typeof grid.pinRow !== 'function') { return; }
+
+        grid.pinRow("ALFKI", 0);
+        grid.pinRow("ANATR", 1);
 }, false);
+
 //end eventHandler

code-gen-library/WebGridPinRowOnRendered/React.tsx

@@ -0,0 +1,12 @@
+//begin imports
+//end imports
+
+export class WebGridPinRowOnRendered {
+    //begin eventHandler
+    public webGridPinRowOnRendered(args: any): void {
+        const grid = this.grid as any;
+        grid.pinRow("ALFKI");
+        grid.pinRow("AROUT");
+    }
+    //end eventHandler
+}

code-gen-library/WebGridRowPinningDragEndHandler/Blazor.js

@@ -0,0 +1,63 @@
+//begin eventHandler
+igRegisterScript("WebGridRowPinningDragEndHandler", (args) => {
+        const ghostElement = args.detail.dragDirective.ghostElement;
+        if (!ghostElement) { return; }
+
+        const dragElementPos = ghostElement.getBoundingClientRect();
+        const grid = args.target || args.currentTarget || document.querySelector("igc-grid");
+        const detail = args.detail;
+
+        let rows = Array.prototype.slice.call(document.getElementsByTagName("igc-grid-row"));
+        if (rows.length === 0) {
+            rows = Array.prototype.slice.call(document.getElementsByTagName("igx-grid-row"));
+        }
+
+        const targetRowElement = getRowElementAtPosition(rows, { x: dragElementPos.x, y: dragElementPos.y });
+        if (!targetRowElement) { return; }
+
+        const currRowIndex = parseInt(targetRowElement.getAttribute("data-rowindex"), 10);
+        const targetRow = grid.getRowByIndex(currRowIndex);
+        if (!targetRow) { return; }
+        const currRowID = targetRow.key;
+        const draggedRowPinned = detail.dragData.pinned;
+        const targetRowPinned = targetRow?.pinned;
+
+        let currRowPinnedIndex = 0;
+        if (targetRowPinned && grid.pinnedRows) {
+            const pinnedRows = grid.pinnedRows;
+            for (let i = 0; i < pinnedRows.length; i++) {
+                if (pinnedRows[i].key === currRowID) {
+                    currRowPinnedIndex = i;
+                    break;
+                }
+            }
+        }
+
+        // Remove the dragged row and insert at new position
+        grid.deleteRow(detail.dragData.key);
+        grid.data.splice(currRowIndex, 0, detail.dragData.data);
+
+        if (targetRowPinned && !draggedRowPinned) {
+            // Drop unpinned row into pinned area
+            grid.pinRow(detail.dragData.key, currRowPinnedIndex);
+        } else if (!targetRowPinned && draggedRowPinned) {
+            // Drop pinned row into unpinned area
+            grid.unpinRow(detail.dragData.key);
+        } else if (targetRowPinned && draggedRowPinned) {
+            // Reordering within pinned rows
+            grid.unpinRow(detail.dragData.key);
+            grid.pinRow(detail.dragData.key, currRowPinnedIndex);
+        }
+
+        function getRowElementAtPosition(rowList, cursorPosition) {
+            for (const row of rowList) {
+                const rowRect = row.getBoundingClientRect();
+                if (cursorPosition.y > rowRect.top && cursorPosition.y < rowRect.bottom &&
+                    cursorPosition.x > rowRect.left && cursorPosition.x < rowRect.right) {
+                    return row;
+                }
+            }
+            return null;
+        }
+}, false);
+//end eventHandler

code-gen-library/WebGridRowPinningDragEndHandler/React.ts

@@ -0,0 +1,74 @@
+//begin imports
+import { IgrRowDragEndEventArgs } from 'igniteui-react-grids';
+//end imports
+
+export class WebGridRowPinningDragEndHandler {
+//begin template
+//begin content
+
+
+public webGridRowPinningDragEndHandler(args: IgrRowDragEndEventArgs): void {
+        const ghostElement = (args as any).detail.dragDirective.ghostElement;
+        if (!ghostElement) { return; }
+
+        const dragElementPos = ghostElement.getBoundingClientRect();
+        const grid = this.grid as any;
+        const detail = (args as any).detail;
+
+        const rows = Array.prototype.slice.call(document.getElementsByTagName("igx-grid-row"));
+
+        const targetRowElement = this.getRowElementAtPosition(rows, {
+            x: dragElementPos.x + dragElementPos.width / 2,
+            y: dragElementPos.y + dragElementPos.height / 2
+        });
+        if (!targetRowElement) { return; }
+
+        const currRowIndex = parseInt(targetRowElement.getAttribute("data-rowindex"), 10);
+        const targetRow = grid.getRowByIndex(currRowIndex);
+        if (!targetRow) { return; }
+        const currRowID = targetRow.key;
+        const draggedRowPinned = detail.dragData.pinned;
+        const targetRowPinned = targetRow?.pinned;
+
+        let currRowPinnedIndex = 0;
+        if (targetRowPinned && grid.pinnedRows) {
+            const pinnedRows = grid.pinnedRows;
+            for (let i = 0; i < pinnedRows.length; i++) {
+                if (pinnedRows[i].key === currRowID) {
+                    currRowPinnedIndex = i;
+                    break;
+                }
+            }
+        }
+
+        // Remove the dragged row and insert at new position
+        grid.deleteRow(detail.dragData.key);
+        this._customersDataLocal.splice(currRowIndex, 0, detail.dragData.data);
+
+        if (targetRowPinned && !draggedRowPinned) {
+            // Drop unpinned row into pinned area
+            grid.pinRow(detail.dragData.key, currRowPinnedIndex);
+        } else if (!targetRowPinned && draggedRowPinned) {
+            // Drop pinned row into unpinned area
+            grid.unpinRow(detail.dragData.key);
+        } else if (targetRowPinned && draggedRowPinned) {
+            // Reordering within pinned rows
+            grid.unpinRow(detail.dragData.key);
+            grid.pinRow(detail.dragData.key, currRowPinnedIndex);
+        }
+    }
+
+    private getRowElementAtPosition(rowList: Element[], cursorPosition: { x: number, y: number }): Element | null {
+        for (const row of rowList) {
+            const rowRect = row.getBoundingClientRect();
+            if (cursorPosition.y > rowRect.top && cursorPosition.y < rowRect.bottom &&
+                cursorPosition.x > rowRect.left && cursorPosition.x < rowRect.right) {
+                return row;
+            }
+        }
+        return null;
+    }
+
+    //end content
+    //end template
+}

code-gen-library/WebGridRowPinningDragEndHandler/Web.ts

@@ -0,0 +1,75 @@
+//begin imports
+import { IgcRowDragEndEventArgs } from 'igniteui-webcomponents-grids/grids';
+//end imports
+
+export class WebGridRowPinningDragEndHandler {
+//begin template
+//begin content
+
+
+public webGridRowPinningDragEndHandler(args: CustomEvent<IgcRowDragEndEventArgs>): void {
+        const ghostElement = args.detail.dragDirective.ghostElement;
+        if (!ghostElement) { return; }
+
+        const dragElementPos = ghostElement.getBoundingClientRect();
+        const grid = this.grid as any;
+        const detail = args.detail;
+
+        const rows = Array.prototype.slice.call(document.getElementsByTagName("igx-grid-row"));
+
+        // Find the row element under the cursor
+       const targetRowElement = this.getRowElementAtPosition(rows, {
+            x: dragElementPos.x + dragElementPos.width / 2,
+            y: dragElementPos.y + dragElementPos.height / 2
+        });
+        if (!targetRowElement) { return; }
+
+        const currRowIndex = parseInt(targetRowElement.getAttribute("data-rowindex"), 10);
+        const targetRow = grid.getRowByIndex(currRowIndex);
+        if (!targetRow) { return; }
+        const currRowID = targetRow.key;
+        const draggedRowPinned = detail.dragData.pinned;
+        const targetRowPinned = targetRow?.pinned;
+
+        let currRowPinnedIndex = 0;
+        if (targetRowPinned && grid.pinnedRows) {
+            const pinnedRows = grid.pinnedRows;
+            for (let i = 0; i < pinnedRows.length; i++) {
+                if (pinnedRows[i].key === currRowID) {
+                    currRowPinnedIndex = i;
+                    break;
+                }
+            }
+        }
+
+        // Remove the dragged row and insert at new position
+        grid.deleteRow(detail.dragData.key);
+        this._customersDataLocal.splice(currRowIndex, 0, detail.dragData.data);
+
+        if (targetRowPinned && !draggedRowPinned) {
+            // Drop unpinned row into pinned area
+            grid.pinRow(detail.dragData.key, currRowPinnedIndex);
+        } else if (!targetRowPinned && draggedRowPinned) {
+            // Drop pinned row into unpinned area
+            grid.unpinRow(detail.dragData.key);
+        } else if (targetRowPinned && draggedRowPinned) {
+            // Reordering within pinned rows
+            grid.unpinRow(detail.dragData.key);
+            grid.pinRow(detail.dragData.key, currRowPinnedIndex);
+        }
+    }
+
+    private getRowElementAtPosition(rowList: Element[], cursorPosition: { x: number, y: number }): Element | null {
+        for (const row of rowList) {
+            const rowRect = row.getBoundingClientRect();
+            if (cursorPosition.y > rowRect.top && cursorPosition.y < rowRect.bottom &&
+                cursorPosition.x > rowRect.left && cursorPosition.x < rowRect.right) {
+                return row;
+            }
+        }
+        return null;
+    }
+
+    //end content
+    //end template
+}

samples/grids/grid/row-pinning-drag.json

@@ -1,8 +1,4 @@
 {
-  "todo": [
-    "add event handlers for row dragging",
-    "add action strip"
-  ],
   "skipAlterDataCasing": true,
   "descriptions": {
     "content": {
@@ -11,6 +7,8 @@
       "dataRef": "CustomersDataLocal",
       "rowDraggable": true,
       "autoGenerate": false,
+      "renderedRef": "WebGridPinRowOnRendered",
+      "rowDragEndRef": "WebGridRowPinningDragEndHandler",
       "pinning": {
         "type": "WebPinningConfig",
         "rows": "Top"
@@ -53,6 +51,17 @@
           "type": "WebColumn",
           "field": "Fax"
         }
+      ],
+      "actionStripComponents": [
+        {
+          "type": "WebActionStrip",
+          "name": "actionStrip",
+          "actionButtons": [
+            {
+              "type": "WebGridPinningActions"
+            }
+          ]
+        }
       ]
     }
   },