Skip to main content

close-editor

Description​

Fires when closing the inline editor

Usage​

"close-editor": ({
    ignore?: boolean
}) => boolean|void;

Parameters​

The callback of the action takes an object with the following parameters:

  • ignore - (optional) if set to true, the inline editor closes and the cell data is not updated; if false, the cell is updated

Returning false from the event handler will prevent updating data in a cell on closing the inline editor.

Example​

In the example below we output to the console the value of the ignore parameter of the close-editor action by applying the api.on() method:

import { Grid } from "@svar-ui/react-grid";
import { getData } from "./common/data";

function App() {
  const { data } = getData();

  const columns = [
    { id: "id", width: 50 },
    { 
      id: "city", 
      header: "City",
      editor: "text", 
      width: 160 
    },
    {
      id: "email",
      header: "Email",
      editor: "text",
      width: 250,
      css: "center",
    },
  ];

  function init(api) {
    api.on("close-editor", ev => {
      console.log("The cell was updated:", ev.ignore);
    });
  }

  return <Grid data={data} columns={columns} init={init} />;
}

Related articles: