LiveLoveApp logo

Cell Editing

Goals

  • Learn to use the provided cell editors
  • Learn to create a custom cell editor using Angular

Enabling Cell Editing

  • Enable via the editable property on the column definition.
  • Set the editable to a boolean to enable/disable editing.
  • Set the editable to a function to determine if editing is enabled.
  • Enable via the Grid API.

Enable cell editing using the column definition.

export class GridComponent {
  columnDefs = [
    {
      colId: 'name',
      headerName: 'Customer Name',
      field: 'customer.name',
      editable: true
    }
  ] as ColDef<RowData>[];
}

Enable cell editing using the Grid API.

this.gridApi.startEditingCell({
  rowIndex: 0,
  colKey: 'name'
});

this.gridApi.stopEditing();