I'm using ag-grid to show and edit some records.
In my ag-grid defination, I'm adding a cellEditorComponent as:
`<template>
<input
:ref="'input'"
v-model="value"
class="simple-input-editor"
@keydown="onKeyDown($event)"
/>
</template>
<script>
import Vue from 'vue'
const KEY_BACKSPACE = 'Backspace'
const KEY_DELETE = 'Delete'
const KEY_ENTER = 'Enter'
const KEY_TAB = 'Tab'
export default Vue.extend({
data() {
return {
value: '',
cancelBeforeStart: true
}
},
created() {
this.setInitialState(this.params)
this.cancelBeforeStart =
this.params.charPress && !'1234567890'.includes(this.params.charPress)
},
mounted() {
this.$nextTick(() => {
// need to check if the input reference is still valid - if the edit was cancelled before it started there
// wont be an editor component anymore
if (this.$refs.input) {
this.$refs.input.focus()
}
})
},
methods: {
getValue() {
return this.value
},
isCancelBeforeStart() {
return this.cancelBeforeStart
},
setInitialState(params) {
let startValue
if (params.key === KEY_BACKSPACE || params.key === KEY_DELETE) {
// if backspace or delete pressed, we clear the cell
startValue = ''
} else if (params.charPress) {
// if a letter was pressed, we start with the letter
startValue = params.charPress
} else {
// otherwise we start with the current value
startValue = params.value
}
this.value = startValue
},
// will reject the number if it greater than 1,000,000
// not very practical, but demonstrates the method.
isCancelAfterEnd() {
return this.value > 1000000
},
onKeyDown(event) {
if (event.key === 'Escape') {
return
}
if (this.isLeftOrRight(event) || this.deleteOrBackspace(event)) {
event.stopPropagation()
return
}
if (
!this.finishedEditingPressed(event) &&
!this.isKeyPressedNumeric(event)
) {
if (event.preventDefault) event.preventDefault()
}
},
isCharNumeric(charStr) {
return /\d/.test(charStr)
},
isKeyPressedNumeric(event) {
const charStr = event.key
return this.isCharNumeric(charStr)
},
finishedEditingPressed(event) {
const key = event.key
return key === KEY_ENTER || key === KEY_TAB
},
deleteOrBackspace(event) {
return [KEY_DELETE, KEY_BACKSPACE].includes(event.key)
},
isLeftOrRight(event) {
return ['ArrowLeft', 'ArrowRight'].includes(event.key)
}
}
})
</script>