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: