Force a component to render using ag-grid

Question

Hi guys I´m creating a table using ag-grid and react where i have customized celleditor, basically I just need to set the value on my table once we choose an option, but for some reason the value is not rendering on the cell, in order to render i have to click again on the cell where my customized celleditor is and after undoing the click the value renders on the cell

so basically i have to force the rendering manually in order to see the value, so i´m trying to use refreshCells() from api once I perform the change on the select, but it´s not working (probably I´m using it incorrectly) it shtere a way i can force the rendering of the cellEditor component, or is there a way i can force the refresging of the cell once the selection is made? I´m pretty new using ag-grid and it woulbd be really helpful if someone can help me with this, if i need to give more specific information please let me know,

this is my cellEditor component, is an ant-d select because it fits my requirement:

interface ICellEditorReactComp {
  api: any;
  values: string[];
  getValue: any;
  change: any;
  dropdownValue: string;
}

export const DropdownCell = observer(
  forwardRef((props: ICellEditorReactComp, ref) => {
    
    console.log("asdasd", props);
    const handleChange = (value) => {

      props.api.refreshCells();
      props.change(value);
    };

    const getValue = () => {
      return props.dropdownValue;
    };

    useImperativeHandle(ref, () => ({
      getValue,
    }));

    return (
      <Select
        defaultValue={props.dropdownValue}
        style={{ width: "100%", height: "100%" }}
        onChange={handleChange}
        options={props.values.map((item) => {
          return { value: item, label: item };
        })}
      ></Select>
    );
  }),
);

this is basically my table

const ParametersListsTable: React.FC<ParametersListsTableProps> = ({
  filterText,
  rowData,
  descriptionInputs,
  onGeneratedListsChange,
  generatedLists,
  descriptionCellValue,
  methodCellValue,
})

const columns: any = [
    {
      field: "Description",
      headerName: "Description",
      width: 200,
      cellEditor: DropdownCell,
      cellEditorParams: {
        values: inputs,
        change: (value) => {
          dropdownCellRenderState.SetDropdownInputDescValue(value);
        },
        dropdownValue: dropdownCellRenderState.dropdownInputDescValue,
      },
      cellDataType: true,
      singleClickEdit: true,
    },
    ]

  return (
    <Flex vertical gap="small">
      <Flex gap="middle" horizontal wrap="wrap">
        <SearchBar />

        <Button type="primary" onClick={onNewRecordClick}>
          New record
        </Button>

        <Button danger onClick={onDeleteSelectedRowsClick}>
          Delete selected rows
        </Button>

        <Button onClick={onGenerateParametersListClick}>
          Generate parameters list
        </Button>
      </Flex>
      <div
        className="ag-theme-balham"
        style={{ height: "100%", width: "100%" }}
      >
        <AgGridReact
          columnDefs={columns}
          defaultColDef={defaultColDef}
          rowData={rowData}
          rowHeight={44}
          rowMultiSelectWithClick={true}
          rowSelection="multiple"
          overlayNoRowsTemplate={noRowsTemplate}
          quickFilterText={filterText}
          animateRows={true}
          domLayout="autoHeight"
          onSelectionChanged={onSelectionChanged}
        />
      </div>
    </Flex>
  );
};

export default observer(ParametersListsTable);

Answer 1

By default, Ag-grid uses change detection during the refreshCells call, so it only refreshes cells that have changed. If you didn't pass new data to ag-grid, it won't know there are any changes to refresh.

You can use the force option to override this behavior, and force the cells to refresh:

refreshCells({force: true})

Also, If you only need to update 1 row, I would also recommend telling ag-grid which row to refresh, for performance reasons. Something like this:

refreshCells({force: true, rowNodes: [row]})

Link to API docs: https://www.ag-grid.com/javascript-data-grid/grid-api/#reference-refresh-refreshCells

Link to refreshCells guide: https://www.ag-grid.com/javascript-data-grid/view-refresh/