From 99cba0b48b9c39925dc54fcfd9920aabb19e80e9 Mon Sep 17 00:00:00 2001 From: tishko0 Date: Tue, 27 Jan 2026 13:45:05 +0200 Subject: [PATCH] fix(sample): fixed sample & templates --- .../WebGridPinRowOnRendered/Blazor.js | 10 ++- .../WebGridPinRowOnRendered/React.tsx | 12 +++ .../WebGridRowPinningDragEndHandler/Blazor.js | 63 ++++++++++++++++ .../WebGridRowPinningDragEndHandler/React.ts | 74 ++++++++++++++++++ .../WebGridRowPinningDragEndHandler/Web.ts | 75 +++++++++++++++++++ samples/grids/grid/row-pinning-drag.json | 17 ++++- 6 files changed, 244 insertions(+), 7 deletions(-) create mode 100644 code-gen-library/WebGridPinRowOnRendered/React.tsx create mode 100644 code-gen-library/WebGridRowPinningDragEndHandler/Blazor.js create mode 100644 code-gen-library/WebGridRowPinningDragEndHandler/React.ts create mode 100644 code-gen-library/WebGridRowPinningDragEndHandler/Web.ts diff --git a/code-gen-library/WebGridPinRowOnRendered/Blazor.js b/code-gen-library/WebGridPinRowOnRendered/Blazor.js index 22d284eca..5b780ae02 100644 --- a/code-gen-library/WebGridPinRowOnRendered/Blazor.js +++ b/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 \ No newline at end of file diff --git a/code-gen-library/WebGridPinRowOnRendered/React.tsx b/code-gen-library/WebGridPinRowOnRendered/React.tsx new file mode 100644 index 000000000..ef95c55da --- /dev/null +++ b/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 +} \ No newline at end of file diff --git a/code-gen-library/WebGridRowPinningDragEndHandler/Blazor.js b/code-gen-library/WebGridRowPinningDragEndHandler/Blazor.js new file mode 100644 index 000000000..343561f6e --- /dev/null +++ b/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 diff --git a/code-gen-library/WebGridRowPinningDragEndHandler/React.ts b/code-gen-library/WebGridRowPinningDragEndHandler/React.ts new file mode 100644 index 000000000..b087946a0 --- /dev/null +++ b/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 +} \ No newline at end of file diff --git a/code-gen-library/WebGridRowPinningDragEndHandler/Web.ts b/code-gen-library/WebGridRowPinningDragEndHandler/Web.ts new file mode 100644 index 000000000..c4c9e0b24 --- /dev/null +++ b/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): 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 +} diff --git a/samples/grids/grid/row-pinning-drag.json b/samples/grids/grid/row-pinning-drag.json index 18061249e..d17a6d720 100644 --- a/samples/grids/grid/row-pinning-drag.json +++ b/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" + } + ] + } ] } },