CODEWITHSUNDEEP
reactjsag-grid
Inspiraller
Inspiraller

Reputation: 3806

How to update the value of ag-grid date editor

I have created a codesandbox of my implementation. https://codesandbox.io/s/ag-grid-date-2-0y2zb

I haven't quite understood how to set the value in ag-grid after changing the date.

See example

import React, {
  forwardRef,
  useImperativeHandle,
  useState,
  useRef
} from "react";

// https://www.ag-grid.com/react-grid/cell-editing/
// https://www.ag-grid.com/react-grid/component-date/

export const DateEditor = forwardRef((props, ref) => {
  console.log("pnload = props = ", props.value);
  const [date, setDate] = useState(props.value);
  const refInput = useRef();

  const onDateChanged = (selectedDates) => {
    console.log("onDateChanged setDate = ", selectedDates.target.value);
    setDate(selectedDates.target.value);
    // updateAndNotifyAgGrid(selectedDates[0]);
  };

  useImperativeHandle(ref, () => ({
    // *********************************************************************************
    //          METHODS REQUIRED BY AG-GRID
    // *********************************************************************************
    getDate: () => {
      console.log("getDate()", date);
      return date;
    },
    setDate: (dt) => {
      console.log(
        "useImperative - setDate() - THIS IS NOT GETTING CALLED!!",
        dt
      );
      setDate(dt);
    },
    isCancelAfterEnd: () => {
      return !date;
    }
  }));

  // inlining styles to make simpler the component
  return (
    <div className="ag-custom-component-popup">
      <input
        type="date"
        ref={refInput}
        data-input
        style={{ width: "100%" }}
        onChange={onDateChanged}
      />
    </div>
  );
});

DateEditor.displayName = "DateEditor";

Upvotes: 0

Views: 503

Answers (1)

Manzer A
Manzer A

Reputation: 3826

Use getValue() method that executes on editors whenever cell editing is stopped and it returns the newValue on cell.

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

Upvotes: 1

Related Questions