Click outside the grid, but cell still in edit mode and afteredit not fired

[Magenta94]

Hi, I have set a background color to highlight the revo-grid html element. If I edit a cell and then I click outside the grid, but inside the revo-grid element, the cell still in edit mode. Only if i click outside the element it exit edit mode.

Example here: https://codesandbox.io/s/quiet-sound-136d9?file=/src/App.vue

[Magenta94]

I also noticed that if I don't press enter key, as soon I click outside and the cell exit edit mode, the @afteredit event isn't fired and the cell has the old value. I expected that clicking outside, the cell gets the new value and fires the event, like Excel.

[revolist]

@Magenta94 first problem was fixed with v3.0.6

[revolist]

@Magenta94 could you be so kind and record a video or something where we can check your scenario and try to solve it?

[Magenta94]

Sure, I'll try to explain better here. At the moment your component updates the value in the grid after you press enter key, and afteredit gets fired. In the example below I press 4, then enter key, the value is saved and in the console you see the afteredit triggered. But next I press 6 then I click with the mouse on another cell (without pressing enter key), the value is not saved, and afteredit is not fired. The grid still have number 4 saved.

I was expecting a behaviour like Excel, as you can see here I can insert a value in a cell, then click on another cell (without pressing enter key) and the value is saved.

[van-huyen]

+1 need Improvement.

When cell lost focus by "mouse click (right, mid, left)" event or "tab key" event,
the value of the cell editing should be committed.
(same Enter key event: commit cell data)

Thanks @revolist for amazing revogrid.

[luis-f-lins]

Do we have any updates on this? Any workarounds to save the cell's value when clicking outside of a cell? Tahnks.

[Bruce0615]

@van-huyen

Can you please explain or show how did you make it for committing cell value by mouse click outside that cell?

Thanks in advance.

[van-huyen]

Hi @Bruce0615 ,
on @focusout event in v-grid, push a func to set cell value like that:

set cell value:

get row index and col name:

[maranyil]

Hi! I'm on Vue 2, try the @van-huyen method, but can't make it work. Can anyone help me, please?

[paramula]

Hi @Bruce0615 , on @focusout event in v-grid, push a func to set cell value like that:

set cell value:

get row index and col name:

`

  async commitCell(e){
    var viewData = await this.$refs.vgrid.$el.getVisibleSource()
    viewData[this.gRowIndex][this.gColName]=e.target.value
    /* focusout for without not click any where*/
    await this.$refs.vgrid.$el.clearFocus()
  },
  beforeEditStart(e){
    this.gRowIndex=e.detail.rowIndex
    this.gColName=e.detail.prop
  },

`

try it v:^3.3.0

[MattTheCuber]

Any update on a fix for this issue (without using workarounds)?

[revolist]

ApplyOnClose prop introduced
https://rv-grid.com/guide/api/revoGrid.html