Skip to main content

How to access Grid API

You can use either of the two ways below to get access to the Grid API:

  • apply the init handler function with the api as the parameter
  • apply the bind Svelte feature to bind to the api object

Apply the init handler​

You can access Grid API using the init handler function that takes api as the parameter.

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:

<script>
    import { Grid } from "./../src";
    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",
        },
    ];

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

 <Grid {data} {columns} {init} />

Bind to api​

You can access Grid API via the api gateway object. You should use the bind Svelte feature to bind to the api object.

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 object via bind:api, and then intercept and modify the editor action using the api.intercept() method. 

<script>
    import { Grid } from "./../src";
    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",
        },
    ];

    let api;

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

<Grid {data} {columns} bind:api />

api methods​

See each method description in the next sections.