Validate Data before Committing it to a Cell in Angular

Background:

You may have requirements to prevent users from entering certain data into a cell (for example, preventing users from entering data values lower than zero). By using cellEditEnding, you can validate the data before committing it to a cell on the grid.

Steps to Complete:

1. Bind the cellEditEnding event to a method

2. Check to see if the data meets your requirements

Getting Started

Bind the cellEditEnding event to a method

First, we must set up the FlexGrid by initializing it with data, and then bind a method to the cellEditEnding event of the grid.

<wj-flex-grid #mainGrid [itemsSource]="mainData" (cellEditEnding)="validateData(mainGrid,$event)">

Check to see if the data meets your requirements

Next, we check to see if the user-entered data matches the criteria to be saved in the cell. In this sample, we'll check to see if the numeric value entered is less than 0. If it is less, then we discard it; if not, we won't need to do anything and the grid will take care of updating itself with the new data.

validateData(s, e) {
    if(e.col == 3) {
        if(s.activeEditor.value < 0) {
            alert('Invalid data. Amount cannot be less than 0.');
            e.cancel = true;
        }
    }
}

You can find a live sample of this project here: https://stackblitz.com/edit/wijmo-knowledgebase-angular-flexgrid-data-validation

Tags: