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

Example:

import { Grid } from "wx-react-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, 

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

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

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

  return (
    <>
      <button  onClick={() => openAll()}>Open all</button>
  
      <Grid 
        api={api.current} 
        tree={true} 
        data={treeData} 
        columns={treeColumns} 
        footer={true} 
      />
    </>
  );
}

Related articles: