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: