Changes from igniteui-xplat-examples-output+PRs_2025.6.17.1

samples/grids/grid/editing-columns/index.html

@@ -71,7 +71,9 @@
             sortable="true"
             has-summary="true"
             editable="true"
-            filterable="false">
+            filterable="false"
+            name="column1"
+            id="column1">
             </igc-column>
         </igc-grid>
     </div>

samples/grids/grid/editing-columns/package.json

@@ -23,6 +23,7 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
+    "igniteui-webcomponents": "6.0.0",
     "igniteui-webcomponents-core": "6.0.0",
     "igniteui-webcomponents-grids": "6.0.3",
     "igniteui-webcomponents-inputs": "6.0.0",

samples/grids/grid/editing-columns/src/index.ts

@@ -1,22 +1,32 @@
 import 'igniteui-webcomponents-grids/grids/combined';
-import { ComponentRenderer, WebGridDescriptionModule, WebPaginatorDescriptionModule } from 'igniteui-webcomponents-core';
-import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
+import { ComponentRenderer, WebGridDescriptionModule, WebPaginatorDescriptionModule, WebInputDescriptionModule } from 'igniteui-webcomponents-core';
+import { IgcGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
 import NwindData from './NwindData.json';
+import { IgcCellTemplateContext } from 'igniteui-webcomponents-grids/grids';
+import { html } from 'lit-html';
 
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+import { defineAllComponents } from 'igniteui-webcomponents';
+defineAllComponents();
 
 import "./index.css";
 
 export class Sample {
 
     private grid: IgcGridComponent
+    private column1: IgcColumnComponent
     private _bind: () => void;
 
     constructor() {
         var grid = this.grid = document.getElementById('grid') as IgcGridComponent;
+        this.webGridOnEditEnter = this.webGridOnEditEnter.bind(this);
+        var column1 = this.column1 = document.getElementById('column1') as IgcColumnComponent;
 
         this._bind = () => {
             grid.data = this.nwindData;
+            grid.addEventListener("cellEditEnter", this.webGridOnEditEnter);
+            column1.inlineEditorTemplate = this.webGridNumericColEditCellTemplate;
         }
         this._bind();
 
@@ -34,10 +44,45 @@ export class Sample {
             var context = this._componentRenderer.context;
             WebGridDescriptionModule.register(context);
             WebPaginatorDescriptionModule.register(context);
+            WebInputDescriptionModule.register(context);
         }
         return this._componentRenderer;
     }
 
+    public webGridOnEditEnter(args: any): void {
+        const column = args.detail.column;
+        if(column.field === 'ReorderLevel') {
+            setTimeout(() => {
+                const rowId = args.detail.cellID.rowID;
+                const columnId = args.detail.cellID.columnID;
+                const inputTemplateId = `edit-cell-${rowId}-${columnId}`;
+                const element = document.getElementById(inputTemplateId);
+                element?.focus();
+            });
+        }
+    }
+
+    public webGridNumericColEditCellTemplate = (ctx: IgcCellTemplateContext) => {
+        const cell = ctx.cell;
+        const columnName = cell.column.field;
+        const cellValue = cell.row.data[columnName];
+        const rowId = cell.id.rowID;
+        const columnId = cell.id.columnID;
+        const inputTemplateId = `edit-cell-${rowId}-${columnId}`;
+
+        return html`
+            <igc-input
+                type="number"
+                id="${inputTemplateId}"
+                name="${cell.id.rowID}"
+                style="width: 100%;"
+                value="${cellValue}"
+                @igcChange=${(e: any) => {
+                    cell.editValue = e.detail;
+                }}>
+            </igc-input>`;
+    }
+
 }
 
 new Sample();

samples/grids/grid/paste/src/index.ts

@@ -5,7 +5,6 @@ import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionCo
 import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { InvoicesDataItem, InvoicesData } from './InvoicesData';
 import { IgcPropertyEditorPropertyDescriptionChangedEventArgs } from 'igniteui-webcomponents-layouts';
-import { IgcGridKeydownEventArgs, GridKeydownTargetType } from 'igniteui-webcomponents-grids/grids';
 
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
@@ -69,8 +68,8 @@ export class Sample {
         (this as any)["pasteMode"] = newVal === "NewRecords" ? "Paste data as new records" : "Paste starting from active cell";
     }
 
-    public webGridPasteFromExcel() {
-        const grid = document.getElementById("grid") as any;
+    public webGridPasteFromExcel(e: CustomEvent<any>) {
+        const grid = e.target as IgcGridComponent;
         this.onKeyDown = this.onKeyDown.bind(this);
         grid.addEventListener("keydown", this.onKeyDown);
     }