How to access Grid API

You can access Grid API using the api reference or by init handler.

In the example below we block adding text to the inline editor if its length exceeds 15 symbols. To make this possible, we get access to the Grid API using the init handler, and then intercept and modify the editor action using the api.intercept() method.

Example:

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.intercept("editor", (ev) => {
        if (ev.value.length > 15) {
            alert(`${ev.value} exceeds 15 symbols`);
            return false;
        }
    });
}

export default function App() {
    return (
        <Grid data={data} columns={columns} init={init} />
    );
}

same can be done like next

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

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

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

api methods

See each method description in the next sections.

How to access Grid API

api methods​

api methods