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

Example:

import { Grid } from "wx-react-grid";

const treeData = [ /* some data */ ];

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",
},
];

export default function App() {
const api = useRef(null);

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

return (
<>
<button onClick={() => closeRowThree()}>Close Row 3</button>
<Grid
api={api}
tree={true}
data={treeData}
columns={treeColumns} />
</>
);
}

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

import { useRef, useEffect } from "react";
import { Grid } from "../src/";
const { treeData, treeColumns } = getData();

export default function App() {
const api = useRef(null);

useEffect(() => {
if (api.current) {
api.current.exec("close-row", {
id: 8,
nested: true
});
}
}, [api]);

return (
<Grid
api={api}
tree={true}
data={treeData}
columns={treeColumns}
/>
);
}

Related articles: