Angular - How can a user click on a particular button and then exit edit mode

Angular - How can a user click on a particular button and then exit edit mode

Posted by: andrewalisa on 15 June 2021, 7:08 pm EST

• 

  andrewalisa

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 15 June 2021, 7:08 pm EST - Updated 3 October 2022, 1:36 pm EST

  
  
  I am using Angular 9.

  I want the user to click (via a mousedown event) on the square in the lower right hand corner. When they click on that square, using the mousedown event, it will exit them out of edit mode.

  I tried using this using the mousedown event, but I cannot trigger the CellEditEndingEventArgs event so I can get the stayInEditMode boolean.

  My mouseDown event looks like this:

    onMouseDown(grid: wjcGrid.FlexGrid, e) {
      // Wijmo Solution for event handlers: https://www.grapecity.com/forums/wijmo/how-to-make-wijmo-flex-gri
      // and https://www.grapecity.com/wijmo/demos/Grid/Events/Mouse/angular
  
      var hti = grid.hitTest(e);
      var col = hti.col;
      var row = hti.row;
  
      if (hti.target.className.includes('autofill-handle')) {
        this.buttonMouseDownClick = true;
      }
    }
  

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 18 June 2021, 12:57 am EST

  Hi,

  Sorry for the delay.
  
  To implement the above requirement, we may perform the following:
  
  • We may make use of the prepareCellForEdit event which occurs when an editor cell is created and before it becomes active and we may use it, to create a square box when the cell is in edit mode.
  
  • We may handle mouse down event and check if the target is the square box in the editor.
  
  • To exit the edit mode, we may make use of finishEditing() method of FlexGrid which commits any pending edits and exits edit mode.

  Please refer to the sample below:
  
  https://stackblitz.com/edit/angular-1pfmua?file=src%2Fapp%2Fapp.component.ts

  Regards