Skip to main content

open-row

Description

Fires when opening (expanding) a row

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

Usage

"open-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 have nested rows
  • nested - (optional) if set to true, all nested items will be expanded
note

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

Example

In the example below we make all rows expand 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 open-rowaction on a button click.

Example:

<script>
import { Button } from "@wx/svelte-core"; // import the Button component
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: false, //make rows initially collapsed

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: false, //make rows initially collapsed
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, // make rows collapsible
},
{
id: "firstName",
header: "First Name",
footer: "First Name",
treetoggle: true, // make rows collapsible
width: 150,
},
{
id: "city",
width: 100,
header: "City",
footer: "City",
},
];

let api;

function openAll() {
api.exec("open-row", { id: 0, nested: true });
}

</script>

<Button type="primary" click={() => openAll()}>Open all</Button>

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

Related articles: