From 06d907ef0d04f026411f6a5262d31db703b7635a Mon Sep 17 00:00:00 2001
From: Mariela Tihova <MTihova@infragistics.com>
Date: Thu, 17 Oct 2024 16:31:47 +0300
Subject: [PATCH] Adding Edit Templates on Grid Cell Editing

---
 .../Blazor.js                                 | 19 +++++++++++++
 .../React.tsx                                 | 28 +++++++++++++++++++
 .../WebComponents.ts                          | 28 +++++++++++++++++++
 samples/grids/grid/editing-columns.json       |  4 ++-
 4 files changed, 78 insertions(+), 1 deletion(-)
 create mode 100644 code-gen-library/WebGridNumericColEditCellTemplate/Blazor.js
 create mode 100644 code-gen-library/WebGridNumericColEditCellTemplate/React.tsx
 create mode 100644 code-gen-library/WebGridNumericColEditCellTemplate/WebComponents.ts

diff --git a/code-gen-library/WebGridNumericColEditCellTemplate/Blazor.js b/code-gen-library/WebGridNumericColEditCellTemplate/Blazor.js
new file mode 100644
index 00000000..1ec858b8
--- /dev/null
+++ b/code-gen-library/WebGridNumericColEditCellTemplate/Blazor.js
@@ -0,0 +1,19 @@
+//begin template
+igRegisterScript("WebGridNumericColEditCellTemplate", (ctx) => {
+    var html = window.igTemplating.html;
+    const cell = ctx.cell;
+    const columnName = cell.column.field;
+    const cellValue = cell.row.data[columnName];
+
+    return html`
+        <igc-input 
+            type="number"
+            name="${cell.id.rowID}"
+            style="width: 100%;"
+            value="${cellValue}"
+            @igcChange=${(e) => {
+                cell.editValue = e.detail;
+            }}>
+        </igc-input>`
+}, false);
+//end template
\ No newline at end of file
diff --git a/code-gen-library/WebGridNumericColEditCellTemplate/React.tsx b/code-gen-library/WebGridNumericColEditCellTemplate/React.tsx
new file mode 100644
index 00000000..5bc678d4
--- /dev/null
+++ b/code-gen-library/WebGridNumericColEditCellTemplate/React.tsx
@@ -0,0 +1,28 @@
+//begin imports
+import { IgrCellTemplateContext } from 'igniteui-react-grids';
+import { IgrInput } from 'igniteui-react';
+//end imports
+
+export class WebGridNumericColEditCellTemplate {
+    //begin template
+    //begin content
+    public webGridNumericColEditCellTemplate = (e: { dataContext: IgrCellTemplateContext }) => {
+
+        const cell = e.dataContext.cell;
+
+        return (
+            <IgrInput 
+                type="number" 
+                name={cell.id.rowID} 
+                value={cell.editValue} 
+                inputOcurred={(s:any, e: any) => {
+                    cell.editValue = e.detail;
+                }} 
+                style={{width: "100%"}}
+            />
+        );
+    }
+    //end content
+    //end template
+}
+
diff --git a/code-gen-library/WebGridNumericColEditCellTemplate/WebComponents.ts b/code-gen-library/WebGridNumericColEditCellTemplate/WebComponents.ts
new file mode 100644
index 00000000..035a02c2
--- /dev/null
+++ b/code-gen-library/WebGridNumericColEditCellTemplate/WebComponents.ts
@@ -0,0 +1,28 @@
+//begin imports
+import { IgcCellTemplateContext } from 'igniteui-webcomponents-grids/grids';
+import { html } from 'lit-html';
+//end imports
+
+export class WebGridNumericColEditCellTemplate {
+//begin template
+//begin content
+public webGridNumericColEditCellTemplate = (ctx: IgcCellTemplateContext) => {
+    const cell = ctx.cell;
+    const columnName = cell.column.field;
+    const cellValue = cell.row.data[columnName];
+    
+    return html`
+        <igc-input 
+            type="number"
+            name="${cell.id.rowID}"
+            style="width: 100%;"
+            value="${cellValue}"
+            @igcChange=${(e: any) => {
+                cell.editValue = e.detail;
+            }}>
+        </igc-input>`;
+}
+//end content
+//end template
+}
+
diff --git a/samples/grids/grid/editing-columns.json b/samples/grids/grid/editing-columns.json
index 4a146ee5..f70077d2 100644
--- a/samples/grids/grid/editing-columns.json
+++ b/samples/grids/grid/editing-columns.json
@@ -63,6 +63,7 @@
           "dataType": "Number",
           "sortable": true,
           "hasSummary": true,
+          "inlineEditorTemplateRef": "WebGridNumericColEditCellTemplate",
           "editable": true,
           "filterable": false
         }
@@ -72,6 +73,7 @@
   "modules": [
     "withDescriptions",
     "grids/WebGridModule",
-    "grids/WebPaginatorModule"
+    "grids/WebPaginatorModule",
+    "webinputs/WebInputModule"
   ]
 }
\ No newline at end of file