open-editor
Description
Fires when opening the inline editorUsage
"open-editor": ({
id: string,
column: string,
}) => boolean|void;
Parameters
The callback of the action takes an object with the following parameters:
id
- (required) the ID of a cell that is updatedcolumn
- (required) the ID of a column for which the editor is open
Returning false from the event handler will block editor opening.
Example
import { Grid } from "wx-react-grid";
import { getData } from "./common/data";
const { data, countries, users } = getData();
const columns = [
{ id: "id", width: 50 },
{ id: "firstName", header: "Name", editor: "text", width: 160 },
{
id: "country",
header: "Country",
editor: "combo",
options: countries,
width: 160,
},
{
id: "checked",
hidden: true,
header: "Active",
editor: "switch",
width: 160,
},
{
id: "newsletter",
header: "Newsletter",
editor: "checkbox",
width: 100,
},
{
id: "date",
header: "Date",
width: 100,
editor: "datepicker",
},
{
id: "assigned",
header: "Users",
width: 100,
editor: "multicombo",
options: users,
},
{
id: "companyName",
header: "Comments",
editor: "textarea",
flexgrow: 1,
},
];
export default function App() {
const api = useRef(null);
useEffect(() => {
if (api.current) {
api.current.on("open-editor", (ev) => {
console.log("The column id for which the editor is open:", ev.column);
});
}
}, [api]);
return <Grid data={data} columns={columns} api={api} />;
}
Related articles: