Skip to main content

close-row

Description​

Fires when closing (collapsing) a row

The action can be triggered if the treetoggle parameter of the columns property is enabled.

Usage​

"close-row": ({
    id: string | number,
    nested?: boolean,
    eventSource?: string,
}) => boolean|void;

Parameters​

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

  • id - (required) the id of a row that has nested rows

  • nested - (optional) if set to true, all nested items will be collapsed

  • eventSource - (optional) the name of the Grid action that triggered close-row

note

If id is set to 0 and nested to true, all rows in the table will be collapsed

Returning false from the event handler will prevent collapsing rows.

Example​

In the example below we make the row with id = 3 collapse on a button click. To do this, we get access to the Grid api via ref="api" and use the api.exec() method to trigger the close-row action on a button click.

Example:

<script setup>
    import { Button } from "@svar-ui/vue-core";
    import { Grid } from "@svar-ui/vue-grid";
    import { ref } from "vue";

    const treeData = [
        {
            id: 1,
            city: "Amieshire",
            firstName: "Ernest",
            lastName: "Schuppe",
            open: false,
            data: [
                {
                    id: "1.1",
                    city: "Gust",
                    firstName: "Janis",
                    lastName: "Vandervort",

                },
                {
                    id: "1.2",
                    city: "Amieshire",
                    firstName: "Makenzie",
                    lastName: "Bode",
                },
            ],
        },
        {
            id: 2,
            city: "Amieshire",
            firstName: "Ciara",
            lastName: "Towne",
            data: [
                {
                    id: "2.1",
                    city: "Amieshire",
                    firstName: "Suzanne",
                    lastName: "Wolff",
                },
                {
                    id: "2.2",
                    city: "Amieshire",
                    firstName: "Alessandra",
                    lastName: "Feeney",
                },
            ],
        },
    ];

    const treeColumns = [
        { id: "id", width: 80 },
        {
            id: "lastName",
            header: "Last Name",
            flexgrow: 1,
            treetoggle: true,
        },
        {
            id: "firstName",
            header: "First Name",
            treetoggle: true,
            width: 150,
        },
        {
            id: "city",
            width: 100,
            header: "City",
            footer: "City",
        },
    ];

    const api = ref();

    function closeRowThree() {
        api.value.exec("close-row", { id: 3, nested: true });
    }
    
</script>

<template>
    <Button type="primary" :onclick="() => closeRowThree()">Close Row 3</Button>

    <Grid
        ref="api"
        :tree="true"
        :data="treeData"
        :columns="treeColumns" />
</template>

In the next example we collapse a row with all nested items:

<script setup>
    import { Grid } from "@svar-ui/vue-grid";
    const { treeData, treeColumns } = getData();

    function init(api){
        api.exec("close-row", { 
            id: 8, nested: true
        });
    }

</script>

<template>
    <Grid
        :init="init"
        :tree="true"
        :data="treeData"
        :columns="treeColumns" />
</template>

Related articles: