Skip to main content

update-cell

Description​

Fires when updating a cell

Usage​

"update-cell": ({
    id: string | number,
    column: string | number,
    value: string | number | Date
}) => boolean|void;

Parameters​

The callback of the action takes an object with the following parameters:

  • id - (required) the ID of a row where a cell is updated
  • column - (required) the ID of a column that is updated
  • value - (required) a new value of a cell

Returning false from the event handler will prevent updating data in a cell.

Example​

<script>
    import { Grid } from "@wx/svelte-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: "combo",
            width: 160,
        },
        {
            id: "newsletter",
            header: "Newsletter",
            editor: "combo",
            width: 100,
        },
        {
            id: "date",
            header: "Date",
            width: 100,
            editor: "datepicker",
        },
        {
            id: "assigned",
            header: "Users",
            width: 100,
            editor: "combo",
            options: users,
        },
        {
            id: "companyName",
            header: "Comments",
            editor: "text",
            flexgrow: 1,
        },
    ];

    let api;

    $: if (api) {
        api.on("update-cell", (ev) => {
            console.log("The cell is updated in the row:", ev.id);
        });
    }

</script>

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

Related articles: