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); }