Angular Data Grid: Value Parsers

After editing cells in the grid you have the opportunity to parse the value before inserting it into your data. This is done using Value Parsers.

A Value Parser is the inverse of a Value Formatter.

valueParser: string | ValueParserFunc;

interface ValueParserFunc {
    (params: ValueParserParams) : any
}

interface ValueParserParams {
  // The value before the change 
  oldValue: any;
  // The value after the change 
  newValue: any;
  // Row node for the given row 
  node: RowNode | null;
  // Data associated with the node 
  data: any;
  // Column for this callback 
  column: Column;
  // ColDef provided for this column 
  colDef: ColDef;
  api: GridApi;
  columnApi: ColumnApi;
  // The context as provided on `gridOptions.context` 
  context: any;
}

The return value of a value parser should be the result of the parse, i.e. return the value you want stored in the data.

Example: Value Parser

Below shows an example using value parsers. The following can be noted:

• All columns are editable. After any edit, the console prints the new data for that row.
• Column 'Name' is a string column. No parser is needed.
• Column 'Bad Number' is bad because after an edit, the value is stored as a string in the data, whereas the data value should be number type.
• Column 'Good Number' is good because after an edit, the value is converted to a number using the value parser.

// Loading...