close-row
Description
Fires when closing (collapsing) a rowThe 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 rowsnested- (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: