How to disable a sibling column by a agRichSelectCellEditor dropdown selection

Question

I have an ag-grid with two columns set to use the agRichSelectCellEditor. When a user makes a selection in the first column dropdown, i want the second (sibling) column cell's dropdown to become invisible (not hidden!), based on the selected value.

How can this be achieved using the "onCellValueChanged" handler?

Answer 1

So you need to disable the editor in the Rounding Type cell and set it's value to empty. To achieve this you can use the editable and onCellValueChanged properties on the columnDefs.

Note: I've only shown example for Disable Price value. You can extend it enable/disable the editor based on the other options.

Disable Cell Editor based on the value in the other column

Here if column1 value is Delete Price, then the editor is disabled in column2 cell.

// Added in the column2 def
editable: (params) => params.data.column1 !== "Delete Price"

Set the cell value based on the value in the other column

// Added in the column1 def
onCellValueChanged: (event) => {
  if (event.newValue == "Delete Price") {
    event.node.setDataValue("column2", "");
  }
}

Full code for column defs:

const col1Values = [
  "Adjust Price",
  "As Default",
  "Delete Price",
  "Adjust Price Up",
  "Keep Existing Price",
  "Adjust Price Up/Down",
];

const col2Values = ["No Rounding", "Second Option", "Third Option"];

const [columnDefs, setColumnDefs] = useState([
  {
    headerName: "Rule Type",
    field: "column1",
    cellEditor: "agRichSelectCellEditor",
    cellEditorParams: {
      values: col1Values,
    },
    onCellValueChanged: (event) => {
      if (event.newValue == "Delete Price") {
        event.node.setDataValue("column2", "");
      }
    },
  },
  {
    headerName: "Rounding Type",
    field: "column2",
    cellEditor: "agRichSelectCellEditor",
    cellEditorParams: {
      values: col2Values,
    },
    editable: (params) => params.data.column1 !== "Delete Price",
  },
]);

Checkout this CodeSandbox Demo.