Skip to main content

api.setNext()

Description​

Allows adding some action into the Event Bus order

Usage​

api.setNext(next: any): void;

Parameters​

  • next - (required) the action to be included into the Event Bus order

Example​

In the example below we include the RestDataProvider service into the Event Bus order to perform operations with data (adding, deleting, and etc.) and send the corresponding requests to the server.

<script>
    import { Button } from "@svar-ui/svelte-core";
    import { RestDataProvider } from "@svar-ui/grid-data-provider";
    import { Grid } from "@svar-ui/svelte-grid";

    const columns = [
        {
            id: "name",
            header: "Title",
            flexgrow: 1,
            sort: true,
            editor: "text",
        },
        {
            id: "year",
            header: "Year",
            width: 100,
            sort: true,
            editor: "text",
        },
        {
            id: "votes",
            header: "Votes",
            width: 100,
            sort: true,
            editor: "text",
        },
    ];
    let data = [];
    const provider = new RestDataProvider("https://some-backend-url", (obj) => {
        obj.year = obj.year * 1;
        obj.votes = obj.votes * 1;
    });
    provider.getData().then((v) => (data = v));

    let api = $state();
    const addRow = () => {
        api.exec("add-row", {
            row: { name: "New Film", year: 2022, votes: 1 },
        });
    };

    const init = (api) => {
        api.setNext(provider);
    };
</script>

<Button onclick={addRow} type="primary">Add Row</Button>

<Grid {data} {columns} bind:this={api} {init} />

Related articles: How to access Grid API