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
}) => 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
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 bind:api and use the api.exec() method to trigger the close-row action on a button click.

Example:

<script>
import { Button } from "@wx/svelte-core";
import { Grid } from "@wx/svelte-grid";

const treeData = [
{
id: 1,
city: "Amieshire",
country: 6,
email: "Leora13@yahoo.com",
firstName: "Ernest",
lastName: "Schuppe",
street: "Ratke Port",
zipCode: "17026-3154",
date: new Date("2016-09-23T07:57:40.195Z"),
companyName: "Lebsack - Nicolas",
stars: 820,
followers: 70,
newsletter: true,
checked: 1,
open: true,

data: [
{
id: "2.1",
city: "Amieshire",
country: 2,
email: "Brisa46@hotmail.com",
firstName: "Suzanne",
lastName: "Wolff",
street: "Lemuel Radial",
zipCode: "88870-3897",
date: new Date("2017-02-23T17:11:53.875Z"),
companyName: "Mayer - Considine",
stars: 852,
followers: 770,
newsletter: true,
checked: 1,
},
{
id: "2.2",
city: "Amieshire",
country: 2,
email: "Cody.Schultz56@gmail.com",
firstName: "Alessandra",
lastName: "Feeney",
street: "Mosciski Estate",
zipCode: "81514",
date: new Date("2016-06-30T05:23:18.734Z"),
companyName: "Nikolaus and Sons",
stars: 3209,
followers: 2780,
},
],
},
{
id: 3,
city: "Schumm",
country: 2,
email: "Mitchel.Herman@yahoo.com",
firstName: "Emiliano",
lastName: "Moore",
street: "Maria Junctions",
zipCode: "33930-7081",
date: new Date("2016-03-27T07:26:57.345Z"),
companyName: "Gulgowski - Botsford",
stars: 3820,
followers: 880,
open: true,
data: [
{
id: "3.1",
city: "Gihaven",
country: 2,
email: "Gaylord_Reichel16@yahoo.com",
firstName: "Alessandra",
lastName: "Smith",
street: "Kali Spurs",
zipCode: "01370",
date: new Date("2017-01-24T22:11:53.835Z"),
companyName: "Maggio LLC",
stars: 330,
followers: 590,
},
{
id: "3.2",
city: "Fechester",
country: 2,
email: "Eileen48@gmail.com",
firstName: "Eldridge",
lastName: "Bins",
street: "Casper Squares",
zipCode: "80025-1552",
date: new Date("2016-07-20T05:59:45.630Z"),
companyName: "Leffler, Cummerata and Price",
stars: 923,
followers: 704,
},
{
id: "3.3",
city: "Caleven",
country: 6,
email: "Rico_Nolan@hotmail.com",
firstName: "Claude",
lastName: "Hermiston",
street: "Bode Pine",
zipCode: "76773",
date: new Date("2017-03-13T08:02:41.211Z"),
companyName: "Heller, Rosenbaum and Lockman",
stars: 421,
followers: 403,
checked: true,
newsletter: true,
assigned: [2],
},
],
},
];

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

let api;

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

</script>

<Button type="primary" click={() => closeRowThree()}>Close Row 3</Button>

<Grid
bind:api
tree={true}
data={treeData}
columns={treeColumns} />

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

<script>
import { Grid } from "../src/";
const { treeData, treeColumns } = getData();

let api;

$: if(api) {
table.exec("close-row", {
id: 8, nested: true
});
}

</script>

<Grid
bind:api
tree={true}
data={treeData}
columns={treeColumns} />

Related articles: