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

samples/grids/grid/editing-columns/App.razor

@@ -1,5 +1,7 @@
 @using IgniteUI.Blazor.Controls
 
+@inject IJSRuntime JS
+
 <div class="container vertical ig-typography">
     <div class="container vertical fill">
         <IgbGrid
@@ -9,7 +11,8 @@
         @ref="grid"
         Data="NwindData"
         PrimaryKey="ProductID"
-        AllowFiltering="true">
+        AllowFiltering="true"
+        CellEditEnterScript="WebGridOnEditEnter">
             <IgbPaginator
             PerPage="10">
             </IgbPaginator>
@@ -59,8 +62,11 @@
             DataType="GridColumnDataType.Number"
             Sortable="true"
             HasSummary="true"
+            InlineEditorTemplateScript="WebGridNumericColEditCellTemplate"
             Editable="true"
-            Filterable="false">
+            Filterable="false"
+            Name="column1"
+            @ref="column1">
             </IgbColumn>
 
         </IgbGrid>
@@ -73,10 +79,12 @@
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         var grid = this.grid;
+        var column1 = this.column1;
 
     }
 
     private IgbGrid grid;
+    private IgbColumn column1;
 
     private NwindData _nwindData = null;
     public NwindData NwindData

samples/grids/grid/editing-columns/Program.cs

@@ -22,7 +22,8 @@ public static async Task Main(string[] args)
             builder.Services.AddIgniteUIBlazor(
                 typeof(IgbInputModule),
                 typeof(IgbGridModule),
-                typeof(IgbPaginatorModule)
+                typeof(IgbPaginatorModule),
+                typeof(IgbInputModule)
             );
             await builder.Build().RunAsync();
         }

samples/grids/grid/editing-columns/wwwroot/events.js

@@ -0,0 +1,36 @@
+
+igRegisterScript("WebGridNumericColEditCellTemplate", (ctx) => {
+    var html = window.igTemplating.html;
+    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) => {
+                cell.editValue = e.detail;
+            }}>
+        </igc-input>`
+}, false);
+
+igRegisterScript("WebGridOnEditEnter", (evtArgs) => {
+    const column = evtArgs.detail.column;
+    if(column.field === 'ReorderLevel') {
+        setTimeout(() => {
+            const rowId = evtArgs.detail.cellID.rowID;
+            const columnId = evtArgs.detail.cellID.columnID;
+            const inputTemplateId = `edit-cell-${rowId}-${columnId}`;
+            const element = document.getElementById(inputTemplateId);
+            element?.focus();
+        });
+    }
+}, false);
+

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

@@ -26,6 +26,8 @@
     <!-- importing blazor bundle for IG controls: -->
     <script src="_content/IgniteUI.Blazor/app.bundle.js"></script>
     <script src="_framework/blazor.webassembly.js"></script>
+    <!-- importing java scripts used in razor page -->
+    <script src="events.js"></script>
 </body>
 
 </html>