Implement the X button : EditEnding event is called when cell losing it's focus

Implement the X button : EditEnding event is called when cell losing it's focus

Posted by: lior.sharabi on 19 April 2023, 11:32 am EST

• 

  lior.sharabi

  • Post Options:
  • Link
    Copy

  Posted 19 April 2023, 11:32 am EST - Updated 19 April 2023, 11:37 am EST

  Hi

  I’m trying to implement the X button like you did in your demo:
  
  (when the cell is in edit mode and the user clicked on the x button the editing will be canceled and the value will return to how it was before the editing)

  

  From your documentation i understand that to undo the edit of a cell i should set the cancel value to true in “EditEnding” event:
  
  https://www.grapecity.com/spreadjs/docs/versions/v14/online/SpreadJS~GC.Spread.Sheets.Events~EditEnding_EV.html?highlight=editending%2C

  So my plan was:
  
  -When the user click on the x button i will save an indication that the x button was clicked.

  • the edit ending event will trigger, if the x button was clicked before the event ( ill check by the indication i set before) i will set cancel to true.

  My problem is that edit ending event is triggering before the x button onClick event is triggering so i cant get indication that the cell editing ended because x button was pressed.

  Any suggestion on how to solve this issue?
  
  Thank you

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 20 April 2023, 7:30 am EST

  Hello Lior,

  As I can understand, you want to cancel edit mode of a cell and ignore changes of cell editor when a custom icon/button is clicked. For this use case, you need to set “gcuielement” attribute to the button or div. Doing this will ensure that clicking on the button or div element does not close cell editor and fire EditEnded event before button or div elements’ click handler is executed.

  You can use sheet.endEdit(ignoreChanges) method to close the editor of a cell and exit from edit mode.

  Please refer to the code snippet and attached sample.

  let button = document.getElementById('button');  
  button.setAttribute('gcuielement', 'gcAttachedElement');  
  button.addEventListener('mousedown', (e) => {  
      sheet.endEdit(true);  
  });  

  Sample: https://jscodemine.grapecity.com/share/zDq7SrNNS0SJjubkK3MFUA/?defaultOpen={“OpenedFileName”%3A[“%2Findex.html”%2C"%2Fsrc%2Fapp.js"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.js"}

  Please let us know if you face any problems

  Doc reference:

  sheet.endEdit(): https://www.grapecity.com/spreadjs/api/v15/classes/GC.Spread.Sheets.Worksheet#endedit

  Regards,

  Ankit