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:

<script setup>
    import { Grid } from "@svar-ui/vue-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",
        },
    ];

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

<template>
    <Grid :data="data" :columns="columns" :init="init" />
</template>

Related articles: