I am using custom dropdown cell renderers in ag-grid-react table (i.e. Autocomplete and few columns are editable). here is reference columns

whenever I am trying to edit the column with help of tab button navigation in any row, it automatically focuses editable column but it skips the column with dropdown renderer column & goes direct to next editable column.

I want to navigate through columns using tab button without skipping dropdown/date renderer column and edit the value.

in the page onGridready function I am adding rows. like

 const onGridReady = (params) => {
    setGridApi(params.api);
    AddNewLine();

    params.api.applyTransaction({
      add: editColumns,
      // editcolumns is object of key values of column field and data.
      addIndex: 0,
    });
  };

in table's onCellValueChange I am assigning user's given values in column row and refreshing the cells.

 const onCellValueChanged = (event) => {
    if (event.oldValue !== event.newValue) {
        event.data.modified = true;
        event.data[event.col] = event.newValue;
    }
    gridApi.refreshCells();
  };

here is the how table is called with frameworkComponents.

  const frameworkComponents = {
    dropDownRenderer: CustomDropDown,
    dateRenderer: CustomDateFieldInGrid,
    checkboxRenderer: CheckboxCellRenderer,
    YMDdateRenderer: CustomYMDDateFieldInGrid,
  };

return(<>
 <AgGridReact
  columnDefs={columnDef}
  frameworkComponents={frameworkComponents}
  onGridReady={(params) => onGridReady(params)}
  animateRows={true}
  undoRedoCellEditing={true}
  enableCellTextSelection={true}
  onCellValueChanged={(e) => onCellValueChanged(e)}
  rowSelection="multiple"
  modules={AllCommunityModules}
 />
</>);

I am expecting to edit the table row from starting column to end by navigating through tab button. but it always skips the non editable column i.e. custom cell renderers and directly goes to next editable column. Which is defined without use of cell renderer.

0

There are 0 best solutions below