We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Hi,
I'm using ag-grid to show and edit some records. In my ag-grid defination, I'm adding a cellEditorComponent as:
this.columnDefs = this.columns.map((el, i) => { return { headerName: el.attributeName, attributeId: el.attributeId, field: el.field, resizable: true, editable: true, cellEditorSelector: (params) => { return { component: TextBoxEditor } } } })
In my TextBoxEditor.vue, here is the following code:
`<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>
`
While editing, I'm getting the error as 'Params are not defined'
The text was updated successfully, but these errors were encountered:
No branches or pull requests
Hi,
I'm using ag-grid to show and edit some records.
In my ag-grid defination, I'm adding a cellEditorComponent as:
this.columnDefs = this.columns.map((el, i) => { return { headerName: el.attributeName, attributeId: el.attributeId, field: el.field, resizable: true, editable: true, cellEditorSelector: (params) => { return { component: TextBoxEditor } } } })
In my TextBoxEditor.vue, here is the following code:
`
While editing, I'm getting the error as 'Params are not defined'
The text was updated successfully, but these errors were encountered: