Skip to main content

open-subrow

Description​

Fires when opening a subrow

The action is triggered when the subrow or subview property is enabled and the row is expanded by clicking the expand/collapse icon.

Usage​

"open-subrow": ({
    id: string | number
 }) => boolean|void;

Parameters​

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

  • id - (required) the id of a row the subrow belongs to

Returning false from the event handler will block opening subrows.

Example​

The example below shows how to output the id of the expanded row to Console:

<script>
    import { getData } from "./common/data";
    import { Grid } from "@wx/svelte-grid";

    const { data, columns } = getData();
    columns[0].subtoggle = true;
    columns[0].width = 60;

    function subTemplate(row) {
        return `Followers: ${row.followers}\nStars: ${row.stars}`;
    }

    function init(api){
        api.on("open-subrow", ev => {
            console.log("Expanded row:", (ev.id));
        });
    }

</script>

    <Grid {data} {columns}  subrow={subTemplate} subHeight={"50"} {init} />

Related articles: