Ag Grid Vue 3 setting/saving editor value

Question

I think I'm a bit confused on how to implement my cell editor as I'm testing out AG Grid. I have a field called "Week1" with a value of "a:8:0.63:0:1:0:1".

I'm using a cellRenderer to split that and use the second element as a number of hours to display along with some cell coloring based on the other values. I'm returning html like '<div class="' + bg + '">' + hrs + '</div>'.

That all looks great. But now I'm trying to apply an "agNumberCellEditor" editor. When it goes into edit mode it has a blank value so I don't understand how/when/where to set that value from the second value of my split.

When I type in another value I'm returning it via a valueParser which combines the string back onto the colon separated string. If I type a "5" I'm returning "a:5:0.63:0:1:0:1" but that just throws an error as it re-calls the renderer which now has a blank value.

Am I missing something or just plain doing it wrong? I already gave up on a custom editor as the documentation is lacking, especially for Vue. I did try using a valueGetter which allowed the number to come through to the editor but wiped out all my rendering. Any clue(s) would be appreciated.

Renderer:

const hourCellRenderer = (params) => {
  const parts = params.value.split(':')
  let hrs = parts[1]
  const val = parseFloat(parts[2])
  const vacDays = parts[3]
  const isWeekEmployed = parts[4]
  const isOnLeave = parts[5]
  let bg = val >= 1 ? 'cap-gt-115' : val >= 0.79 ? 'cap-80-115' : 'cap-lt-80'

  bg += parseInt(isWeekEmployed)
    ? (parts[0] === 'a')
        ? ' actual'
        : ' future'
    : ' notEmployed'

  if (parseInt(hrs) === 0 && parts[0] === 'f') { hrs = '&nbsp;' } // no hours is blank
  if (!parseInt(isWeekEmployed)) { hrs = '&nbsp;' } // not employed is blank

  if (vacDays === '1') { bg += ' cap-vac-1' } // vacation gradients
  if (vacDays === '2') { bg += ' cap-vac-2' }
  if (vacDays === '3') { bg += ' cap-vac-3' }
  if (vacDays === '4') { bg += ' cap-vac-4' }
  if (vacDays === '5') { bg += ' cap-vac-5' }

  if (parseInt(isOnLeave) === 1) { bg += ' onLeave' } // on leave is blue

  return '<div class="' + bg + '">' + hrs + '</div>'
}

valueParser:

const HoursParser = (params) => {
  const val = parseInt(params.newValue)
  const oldValues = params.oldValue.split(':')
  oldValues[1] = val + ''
  return oldValues.join(':')
}

JoelCool · Accepted Answer · 2025-01-02 16:50:27Z

I finally figured out how to roll my own custom editor using the information @ [Custom Editor Docs][1]. It would be super helpful if there were a nice example there for Vue. I couldn't get the editor to select the text until I tried to select it in 2 different ways combined with @focus AND afterGuiAttached. Eliminating either one does not select text.

In case it helps anyone, here is my example code:

import { ref, onMounted, nextTick } from 'vue'

const originalValue = ref('')
const value = ref('')
const props = defineProps(['params'])
const input = ref(null) // reference to input

onMounted(() => {
  originalValue.value = props.params.value
  value.value = props.params.value.split(':')[1] // getting the number I need
})

const afterGuiAttached = () => {
  nextTick(() => {
    input.value.focus() // trying to select text/number
  })
}

const getValue = () => {
  // reassembling the string to be stored back to the grid
  const parts = originalValue.value.split(':')
  parts[1] = value.value
  const newValue = parts.join(':')
  return newValue
}

const isCancelBeforeStart = () => {
  // testing some logic to cancel editing
  if (props.params.value.split(':')[0] === 'a') {
    return true
  }
  return false
}

const isCancelAfterEnd = () => {
  // testing some logic to save the value or not
  console.log('saving data...', value.value)
  return value.value === 20
}

const selectAll = (event) => {
  nextTick(() => {
    event.target.select()
  })
}

defineExpose({
  afterGuiAttached,
  isCancelBeforeStart,
  isCancelAfterEnd,
  getValue
})
</script>

<template>
  <input :ref="'input'" class='simple-input-editor' v-model='value' type="number" min="0" max="24" style="height: 24px;" @focus="selectAll" />
</template>```



  [1]: https://www.ag-grid.com/vue-data-grid/cell-editors/#custom-components

Collectives™ on Stack Overflow

Ag Grid Vue 3 setting/saving editor value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related