Skip to main content

api.intercept()

Description​

Allows intercepting and blocking/modifying actions

Usage​

api.intercept(
  action: string,
  callback: function
): void;

Parameters​

  • action - (required) an action to be fired
  • callback - (required) a callback to be performed (the callback arguments will depend on the action to be fired)
info

The full list of the Grid actions can be found here

Example​

The example below shows how to block adding text to the inline editor if its length exceeds 15 symbols:

import { useRef } from 'react';
import { Grid } from "wx-react-grid";
import { getData } from "./common/data";

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",
    },
];

export default function App() {
    const api = useRef(null);

    if (api.current) {
        api.current.intercept("editor", (ev) => {
            if (ev.value.length > 15) {
                alert(`${ev.value} exceeds 15 symbols`);
                return false;
            }
        });
    }

    return (
        <Grid data={data} columns={columns} api={api} />
    );
}

Related articles: