import { CellValueChangedEvent , GridOptions , ICellEditorComp , ICellEditorParams , RowValueChangedEvent } from '@ag-grid-community/core' ; const gridOptions = { columnDefs : [ { field : 'make' , cellEditor : 'agSelectCellEditor' , cellEditorParams : { values : [ 'Porsche' , 'Toyota' , 'Ford' , 'AAA' , 'BBB' , 'CCC' ] , } , } , { field : 'model' } , { field : 'field4' , headerName : 'Read Only' , editable : false } , { field : 'price' , cellEditor : 'numericCellEditor' } , { headerName : 'Suppress Navigable' , field : 'field5' , suppressNavigable : true , minWidth : 200 , } , { headerName : 'Read Only' , field : 'field6' , editable : false } , ] , defaultColDef : { flex : 1 , editable : true , } , components : { numericCellEditor : getNumericCellEditor ( ) , } , editType : 'fullRow' , rowData : getRowData ( ) , onCellValueChanged : onCellValueChanged , onRowValueChanged : onRowValueChanged , } ; function onCellValueChanged ( event ) { console . log ( 'onCellValueChanged: ' + event . colDef . field + ' = ' + event . newValue ) ; } function onRowValueChanged ( event ) { var data = event . data ; console . log ( 'onRowValueChanged: (' + data . make + ', ' + data . model + ', ' + data . price + ', ' + data . field5 + ')' ) ; } function getRowData ( ) { var rowData = [ ] ; for ( var i = 0 ; i < 10 ; i ++ ) { rowData . push ( { make : 'Toyota' , model : 'Celica' , price : 35000 + i * 1000 , field4 : 'Sample XX' , field5 : 'Sample 22' , field6 : 'Sample 23' , } ) ; rowData . push ( { make : 'Ford' , model : 'Mondeo' , price : 32000 + i * 1000 , field4 : 'Sample YY' , field5 : 'Sample 24' , field6 : 'Sample 25' , } ) ; rowData . push ( { make : 'Porsche' , model : 'Boxter' , price : 72000 + i * 1000 , field4 : 'Sample ZZ' , field5 : 'Sample 26' , field6 : 'Sample 27' , } ) ; } return rowData ; } function onBtStopEditing ( ) { gridOptions . api ! . stopEditing ( ) ; } function onBtStartEditing ( ) { gridOptions . api ! . setFocusedCell ( 2 , 'make' ) ; gridOptions . api ! . startEditingCell ( { rowIndex : 2 , colKey : 'make' , } ) ; } function getNumericCellEditor ( ) { function isCharNumeric ( charStr ) { return ! ! /\d/ . test ( charStr ) ; } function isKeyPressedNumeric ( event ) { var charStr = event . key ; return isCharNumeric ( charStr ) ; } class NumericCellEditor implements ICellEditorComp { focusAfterAttached ! : boolean ; eInput ! : HTMLInputElement ; cancelBeforeStart : any ; init ( params ) { this . focusAfterAttached = params . cellStartedEdit ; this . eInput = document . createElement ( 'input' ) ; this . eInput . style . width = '100%' ; this . eInput . style . height = '100%' ; this . eInput . value = ( params . charPress && isCharNumeric ( params . charPress ) ) ? params . charPress : params . value ; var that = this ; this . eInput . addEventListener ( 'keypress' , function ( event ) { if ( ! isKeyPressedNumeric ( event ) ) { that . eInput . focus ( ) ; if ( event . preventDefault ) event . preventDefault ( ) ; } } ) ; } getGui ( ) { return this . eInput ; } afterGuiAttached ( ) { if ( this . focusAfterAttached ) { this . eInput . focus ( ) ; this . eInput . select ( ) ; } } isCancelBeforeStart ( ) { return this . cancelBeforeStart ; } isCancelAfterEnd ( ) { return false ; } getValue ( ) { return this . eInput . value ; } focusIn ( ) { var eInput = this . getGui ( ) ; eInput . focus ( ) ; eInput . select ( ) ; console . log ( 'NumericCellEditor.focusIn()' ) ; } focusOut ( ) { console . log ( 'NumericCellEditor.focusOut()' ) ; } } return NumericCellEditor ; } document . addEventListener ( 'DOMContentLoaded' , function ( ) { var eGridDiv = document . querySelector ( '#myGrid' ) ; new agGrid . Grid ( eGridDiv , gridOptions ) ; } ) ;