debounce a grid cell text element

[edwardsmarkff]

Hello all –   this took a bit of work so i thought it might be worth sharing.

In a grid text field, the “onCellUpdate” does not necessarily fire unless you click another cell.  if the user forgets & closes the window, the entered value is lost.

debounce from freeCodeCamp appears to be a good solution to this issue.  but i had to jump through a few hoops to get it working.

one:  set up debounce function (actual codeFreeCamp function below)

const debounceErrorNotes = debounce( event => processErrorNotes(event) );

two:  create an addEventListener ‘beginEdit’ to capture the current cell being worked on:

smartGrid.addEventListener('beginEdit', event => {
. . processErrorNotes.rowIndex = event.detail.row.index ;
. . processErrorNotes.columnField = event.detail.dataField ;
});

three:  create the function that executes “endEdit” which will trigger the “onCellUpdate” method:

function processErrorNotes(event) {
. . document.querySelector('smart-grid').endEdit(); // this will trigger the onCellUpdate method
. . const rowIndex = processErrorNotes.rowIndex ;
. . const columnField = processErrorNotes.columnField ;
. . document.querySelector('smart-grid').beginEdit( rowIndex, columnField );  // make this cell current again
}

below is the recommended generic debounce function:

function debounce(func, timeout = 800){
' ' let timer;
' ' return (...args) => {
. . . . clearTimeout(timer);
. . . . timer = setTimeout(() => { func.apply(this, args); }, timeout);
. . };
}

• This topic was modified 2 weeks ago by edwardsmarkff.

[admin]

Hi,

We do not save the edited value, if the user do not confirm it either by clicking Enter or clicking somewhere else. Thanks for the input if someone else looks for a different behavior, your post will be helpful to the community of users.

Best regards,
Markov

[Author]

Posts