set Select Cell Editor value in ag-grid

43 Views Asked by At

I'm using ag-grid in Angular, I have 2 columns, flight_number and company, the company column is a selector, 2 options to select: QANTAS and AIR JAPAN.

What I want to implement is, once flight_number is entered (foucs left), the compnay cell is updated. If flight number starts with QF then QANTAS is selected, if flight number starts with JP, AIR JAPAN is selected.

Below code works partially. After flight number is entered, if I click the company cell, the correct value is shown. But if I use tab to navigate to the company cell, the value is not correct.

I guess it's because clicking a cell and entering a cell by tab put the cell in different modes but I tried to add a onCellFocused on company cell and the row data is correct. So no idea why the display value is not correct.

export class Test3Component {
  columnDefs : ColDef[] = [
    {
      headerName: 'Flight Number',
      field: 'flight_number',
      editable: true,

    },
    {
      headerName: 'Company',
      field: 'company',
      editable: true,
      cellEditor: 'agSelectCellEditor',
      singleClickEdit: true,
      cellEditorParams: {
        values: ['QANTAS', 'AIR JAPAN']
      }
    },
  ];


  rowData = [
    { id: 1, flight_number: 'QF11', company: 'QANTAS' },
    { id: 2, flight_number: 'JP22', company: 'AIR JAPAN' },
  ];

  gridOptions: GridOptions = {
    getRowId: (data) => data.data.id // Use 'flight_number' as the unique identifier
  };

  addNewRow() {
    const newRow = { id: this.rowData.length + 1, flight_number: '', company: '' };
    this.rowData = [...this.rowData, newRow];
  }

  onCellValueChanged(event: any) {
    const newValue = event.data.flight_number as string;
    const updatedRow = { ...event.data };

    if (newValue.startsWith('QF')) {
      updatedRow.company = 'QANTAS';
    } else if (newValue.startsWith('JP')) {
      updatedRow.company = 'AIR JAPAN';
    }

    this.gridApi!.applyTransaction({ update: [updatedRow] });
  }

  onGridReady(params: any) {
    this.gridApi = params.api;
  }

  private gridApi!: GridApi;

}
0

There are 0 best solutions below