Cancel edit

Cancel edit

Posted by: bmakhlin on 24 January 2019, 3:13 pm EST

• 

  bmakhlin

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 24 January 2019, 3:13 pm EST

  Hi,
  
  I have Flex grid in Angular 6 application. When user enters invalid value I display red border around invalid cell and when cell becomes valid I remove red border. When cell is invalid and user clicks on the other cell I cancel edit and put focus back on the invalid cell forcing user to fix the problem before editing the other cell. This worked perfect in Angular 1. In Angular 6 cancel edit does not fully works. Please see my code below. For some reason I need to call startEditing in setTimeout. If I comment out setTimeout I am able to edit the other cell. The invalid cell does not get focus after I click the other cell. If I uncomment setTimeout invalid cell gets focus after I click the other cell but if I click the other cell and quickly type I am able to enter value in the other cell when invalid cell is present. The focus stays on the other cell instead of being put on the invalid cell.

  Please help me implement edit cancel correctly so that user is forced to fix invalid cell before be able to change the other cell.

      selectionChanging(s, e) {
          if (this.hasValidationErrors) {
              //e.cancel = true;
  
              setTimeout(() => {
                  e.cancel = true;
                  s.startEditing(true, this.editedRow, this.editedColumn);
              });
          }
      }
  

  thank you

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 25 January 2019, 1:07 am EST

  Hi,

  Instead of selectionChanging event, please use cellEditEnding event to validate edits. Inside the handle for cellEditEnding, you may set the stayInEditMode property to true to force the user to stay in edit mode.
  
  Please refer to the following code snippet and sample:

  grid.cellEditEnding.addHandler((s, e)=>{
        
        let panel = e.panel, row = e.panel.rows[e.row], col = e.panel.columns[e.col];
        let curValue = s.activeEditor.value; // get current editor value
        let prevValue = s.getCellData(e.row, e.col); // get previous value
  
        if(col.binding == "sales"){
          if(curValue < 1000){
            e.cancel = true; // if we set cancel = true without setting stayInEditMode then new value will be discarded and user will be able to exit cell editing
            e.stayInEditMode = true; // do not let the user leave edit mode
  
            // get cell
            let cell = panel.getCellElement(e.row, e.col);
            // style cell
            wjcCore.addClass(cell, 'wj-state-invalid');
            wjcCore.setAttribute(cell, 'title', 'value cannot be less than 1000');
          }
        }
      });
  

  https://stackblitz.com/edit/angular-z2hmbq?file=src%2Fapp%2Fapp.component.ts
  
  Also, you may use getError property to the collectionView to validate value automatically. Please refer to the following sample to get started with cell validation using getError:
  
  https://demos.wijmo.com/5/SampleExplorer/SampleExplorer/Sample/GridValidation

  ~Sharad

• 

  bmakhlin

  • Post Options:
  • Link
    Copy

  Posted 25 January 2019, 2:56 pm EST

  This works great! Thank you