Validate before cell value changed?

Question

I have this grid options :

gridOptions: GridOptions = {
    suppressFieldDotNotation: true,
    paginationAutoPageSize: false,
    paginationPageSize: 10,
    domLayout: 'autoHeight',
    rowMultiSelectWithClick: false,
    rowSelection: 'multiple',
    onFilterChanged: (event) => this.onFilterChanged(event),
    onCellValueChanged: (event) => this.onCellValueChanged(event)
  } as GridOptions;

On cell value i have this:

  onCellValueChanged(event) {

    if (typeof event.newValue === 'string') {
      this.toastrService.error(event.newValue + ' is not a number!');
      return;
    }
}

Only one column is editable, and what i want is user enter some value that is not number or decimal, for example (1, 1.1, 1,1), that i set that column to zero, and display message.

I tried like this but it display validation message for decimal values 1.1 and 1,2 ( with dot and comma), and other problem is that i dont know how to set that column on that row to zero if validation is false.

Any suggestion?

Answer 1

Unfortunately, there is no direct config property to do this.

We have to create a new cell-editor component and register it to the column in columnDefs.

Something like this: In this example, there are three ways in which we can manipulate the data.

1. Here, first of all, since input type is number, only numeric entries will be allowed.

2. If you dont want to do that, then check whether input value is number or not. If not, then assign zero.

3. Third, do not edit value if it is incorrect.

   import {
    AfterViewInit,
    Component,
    ViewChild,
    ViewContainerRef,
    } from '@angular/core';
    import { AgEditorComponent } from 'ag-grid-angular';
   
    @Component({
    selector: 'editor-cell',
    template: `<input
      type="number"  #########check1
      [(ngModel)]="value"
      #input
      style="width: 100%"
    />`,
    })
    export class PercentageCellEditor implements AgEditorComponent, AfterViewInit {
    private params: any;
    public value: number;
   
    @ViewChild('input', { read: ViewContainerRef })
    public input: ViewContainerRef;
   
    ngAfterViewInit() {
        // focus on the input
        setTimeout(() => this.input.element.nativeElement.focus());
    }
   
    agInit(params: any): void {
        this.params = params;
    }
   
    /* Component Editor Lifecycle methods */
    // the final value to send to the grid, on completion of editing
    getValue() {
        // check2
        this.value = !Number.isNaN(parseFloat(this.params.value)) ? parseFloat(this.params.value) : 0;
        return this.value;
    }
   
    // Gets called once before editing starts, to give editor a chance to
    // cancel the editing before it even starts.
    isCancelBeforeStart() {
        return false;
    }
   
    // Gets called once when editing is finished (eg if enter is pressed).
    // If you return true, then the result of the edit will be ignored.
    isCancelAfterEnd() {
        // check3
        return (this.value < 0 || this.value >= 100);
    }
    }
   

Component:

Register it in frameworkComponents of grid.

this.frameworkComponents = {
        percentageEditor: PercentageCellEditor
    }

Add it to columnDefs:

           {
                headerName: "Column Name",
                field: "columnFieldName",
                editable: true,
                cellEditor: "percentageEditor",
            }

Answer 2

Use Value Setters for basic validation as shown in this example: https://plnkr.co/edit/lRxzoiYSAjtsOAKX

If the entered value is not a number or larger than 100, it is not saved to the grid and an alert is shown:

        valueSetter: (params) => {
          if (isNaN(params.newValue)) {
            alert('not valid number');
            return false;
          }

          if (params.newValue > 100) {
            alert('input is larger than 100');
            return false;
          } else {
            params.data.numberGood = params.newValue;
            return true;
          }
        },

Answer 3

You can use valueSetter :

{
      headerName: 'Role',
      field: 'role',
      editable: true,
      valueSetter: (ev: CellValueChangedEvent) => {
        if (ev.newValue.role !== 'Valid') {
          alert('not valid role');
          return false;
        } else {
          return true;
        }
      },
      onCellValueChanged: (ev) => this.submitRole(ev)
  }