diff --git a/samples/grids/grid/editing-columns/index.html b/samples/grids/grid/editing-columns/index.html
index 0dd51711b1..9b578df3c1 100644
--- a/samples/grids/grid/editing-columns/index.html
+++ b/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">
diff --git a/samples/grids/grid/editing-columns/package.json b/samples/grids/grid/editing-columns/package.json
index 4106159f72..0bb197147d 100644
--- a/samples/grids/grid/editing-columns/package.json
+++ b/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",
diff --git a/samples/grids/grid/editing-columns/src/index.ts b/samples/grids/grid/editing-columns/src/index.ts
index a8d57b898f..8a2ee07a70 100644
--- a/samples/grids/grid/editing-columns/src/index.ts
+++ b/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`
+ {
+ cell.editValue = e.detail;
+ }}>
+ `;
+ }
+
}
new Sample();
diff --git a/samples/grids/grid/paste/src/index.ts b/samples/grids/grid/paste/src/index.ts
index d1d29c689a..a39eae464b 100644
--- a/samples/grids/grid/paste/src/index.ts
+++ b/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) {
+ const grid = e.target as IgcGridComponent;
this.onKeyDown = this.onKeyDown.bind(this);
grid.addEventListener("keydown", this.onKeyDown);
}