Disable save button till grid has error

Disable save button till grid has error

Posted by: sdayal on 30 July 2021, 2:07 am EST

• 

  sdayal

  • Post Options:
  • Link
    Copy

  Posted 30 July 2021, 2:07 am EST

  Hi team,

  We have a requirement where we have to disable the save button till the grid has error else the save button will be enabled.
  
  Created a small snippet for the same:-
  
  https://stackblitz.com/edit/angular-ndri8y?file=src/app/app.component.ts
  
  (validation code : - 229 - 256 and section cell lastUpdated is modified on line 439 - 442)
  
  In this snippet if you enter a already existing combination of ‘section’ cell value and ‘name’ cell value then error is reflected on the section cell showing ‘Already exist’
  
  So till this error persist on any cell , the save button will be disabled.

  Can you please provide solution for this requirement.

  Thank you.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 2 August 2021, 9:04 am EST

  Hi Shiva,

  We are working on this and will update you tomorrow.

  Regards,
  
  Ashwin

• 

  weide.zhu

  • Post Options:
  • Link
    Copy

  Posted 2 August 2021, 9:21 pm EST

  this feature will be useful, currently we have to perform the validations again on save event

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 2 August 2021, 11:55 pm EST

  Hi Shiva,

  To achieve the required functionality, you can use the getError method of collectionView and iterate over the sourceCollection(so that iteration can be done irrespective of paging). Please refer to the code snippet below:

    checkForError() {
      let errorFlag = false;
      let cv = this.grid.collectionView;
      for (var i = 0; i < cv.sourceCollection.length; i++) {
        let error = this.grid.collectionView.getError(
          cv.sourceCollection[i],
          'section'
        );
        if (error != '') {
          errorFlag = true;
          return true;
        }
      }
  
      return errorFlag;
    }
  
  

  Now, using this method you can set the submit to disable. Please refer to the code snippet below:
  
  disableSubmitUntillError() {
  
  var hasErrors = this.checkForError();
  
  hasErrors == true
  
  ? (document.querySelector(‘#submit’).disabled = true)
  
  : (document.querySelector(‘#submit’).disabled = false);
  
  }

  Also you need to call the disableSubmitUntillError on cellEditEnded, on selectedIndexChanged of “section” column comboBox, on adding new user. Please refer to the sample below for demonstration:

  https://stackblitz.com/edit/angular-uhpebj

  Let us know if you face any issues or have any doubts.

  Regards,
  
  Ashwin

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 2 August 2021, 11:56 pm EST

  Hi Weide,

  In the original thread, the getError method is used to determine the error. Similarly, for your case, you need to use the custom validation method which you are using instead of the getError and rest will be the same.

  ~regards