Reactjs - Custom cell editor for ag grid

AngelGabrielChableConcepcio
December 19, 2023
132 views
0 votes
2 Answers

Hi guys I’m basically trying to create a custom cell editor for ag-grid, i want to use a custom dropdown using ant design, but i cannot make it work, i’m displaying the values in my screeen in the cell, but unfortunately i cannot set the value when clicking on it, i’m pretty new with at coding so if someone can help me out with this it would be very helpful (if ther’s something else i need to add so that it can be more understandable please tell me)

This is basically the table

import DropdownComponent from "containers/sensitivityanalysis/DropdownCell";

const ParametersListsTable: React.FC = () => {
  const [rowData, setRowData] = useState([{}]);

  const [columnDefs, setColumnDefs] = useState<ColDef[]>([
    {
      field: "Description",
      headerName: "Description",
      width: 200,
      cellEditor: DropdownComponent,
      cellEditorParams: {
        values: [
          "Manifold Pressure",
          "Reservoir Pressure",
          "Bubble Point Pressure",
          "FBHP",
          "Liquid Rate",
          "Total Gas Rate",
          "Oil Rate",
          "Formation Gas Rate",
          "Limit Lift Meas Depth",
          "SG Formation Gas",
          "SG Water",
          "Oil API Gravity",
          "Static Surface Temp.",
          "BHT",
          "Choke Coefficient",
          "Surface Temperature",
          "Operating Mandre Number",
          "OPerating Valve Throughput",
          "SBHP",
          "Bean Size",
          "Minimum Require LG Rate",
          "Tubing Sizing",
          "Diameter For Lifting",
        ],
      },
    },
]);

const defaultColDef = useMemo(() => {
    return {
      resizable: true,
      filter: true,
      editable: true,
    };
  }, []);

And this is my custom dropdown

import { Select } from "antd";
import { useState } from "react";

const { Option } = Select;

const DropdownComponent = (props) => {
  const [selection, setSelection] = useState();
  const handleDropDown = (e) => {
    setSelection(e.target.value);
  };

  return (
    <Select
      style={{ width: "100%", height: "100%" }}
      onClick={handleDropDown}
      value={selection}
    >
      {props.values.map((item) => (
        <Option key={item} value={item}>
          {item}
        </Option>
      ))}
    </Select>
  );
};

export default DropdownComponent;

Tags: ag-grid reactjs

Answers

Chosen as BEST ANSWER

I came up with a solution reading some stuff from the documentation and checking on some examples that i found on it

This is my cell editor custom component:

import { Select } from "antd";
import {
  forwardRef,
  useEffect,
  useImperativeHandle,
  useRef,
  useState,
} from "react";

const { Option } = Select;

interface ICellEditorReactComp {
  values: string[];
  getValue: () => string[];
  value: string;
}

const DropdownCell = forwardRef((props: ICellEditorReactComp, ref) => {
  console.log(props);
  const [value, setValue] = useState(props.value);
  const refInput = useRef(null);

  useEffect(() => {
    // focus on input
    refInput.current?.focus();
  }, []);

  useImperativeHandle(ref, () => {
    return {
      getValue: () => {
        return value;
      },
    };
  });

  return (
    <Select
      style={{ width: "100%", height: "100%" }}
      value={value}
      onChange={setValue}
    >
      {props.values.map((item) => (
        <Option key={item} value={item}>
          {item}
        </Option>
      ))}
    </Select>
  );
});

export default DropdownCell;

And I'm simply using it this way

import DropdownCell from "containers/sensitivityanalysis/DropdownCell";

const [columnDefs, setColumnDefs] = useState<ColDef[]>([
    {
      field: "Description",
      headerName: "Description",
      width: 200,
      cellEditor: DropdownCell,
      cellEditorParams: {
        values: [
          "Manifold Pressure",
          "Reservoir Pressure",
          "Bubble Point Pressure",
          "FBHP",
          "Liquid Rate",
          "Total Gas Rate",
          "Oil Rate",
          "Formation Gas Rate",
          "Limit Lift Meas Depth",
          "SG Formation Gas",
          "SG Water",
          "Oil API Gravity",
          "Static Surface Temp.",
          "BHT",
          "Choke Coefficient",
          "Surface Temperature",
          "Operating Mandre Number",
          "OPerating Valve Throughput",
          "SBHP",
          "Bean Size",
          "Minimum Require LG Rate",
          "Tubing Sizing",
          "Diameter For Lifting",
        ],
      },
      cellDataType: false,
    },

(Edit)

You’re on the wrong path to overcome this issue.

First, I am going to define the DropdownRenderer component

class DropdownRenderer {
  init(params) {
    this.eGui = document.createElement('div');
    this.eGui.innerHTML = `<span style="overflow: hidden; text-overflow: ellipsis">${params.value}</span>`;
  }

  getGui() {
    return this.eGui;
  }

  refresh(params) {
    return false;
  }
}

As to its column definition

{
        field: 'description',
        width: 110,
        cellEditor: 'agRichSelectCellEditor',
        cellRenderer: DropdownRenderer,
        keyCreator: (params) => {
          return params.value;
        },
        cellEditorParams: {
          cellRenderer: DropdownRenderer,
          values: [
            'Manifold Pressure',
            'Reservoir Pressure',
            'Bubble Point Pressure',
            'FBHP',
            'Liquid Rate',
            'Total Gas Rate',
            'Oil Rate',
            'Formation Gas Rate',
            'Limit Lift Meas Depth',
            'SG Formation Gas',
            'SG Water',
            'Oil API Gravity',
            'Static Surface Temp.',
            'BHT',
            'Choke Coefficient',
            'Surface Temperature',
            'Operating Mandre Number',
            'OPerating Valve Throughput',
            'SBHP',
            'Bean Size',
            'Minimum Require LG Rate',
            'Tubing Sizing',
            'Diameter For Lifting',
          ],
        },
        editable: true,
        cellDataType: false,
      },
}

Result: