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 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: