Tree Grid example with Lit not working

General
1

Hi,

I am struggling to understand how to build the items model to work with the Tree Grid. In the documentation a dataProvider is used, but I have the full data model in the client using Lit/TypeScript. More specifically I don’t understand how the itemHasChildrenPath should be used.
VS Copilot suggested this:

import { html, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import '@vaadin/grid/vaadin-grid.js';
import '@vaadin/grid/vaadin-grid-tree-column.js';

@customElement('my-tree-grid')
export class MyTreeGrid extends LitElement {
  @property({ type: Array })
  items = [
    {
      name: 'Parent 1',
      children: [{ name: 'Child 1.1' }, { name: 'Child 1.2' }],
    },
    {
      name: 'Parent 2',
      children: [{ name: 'Child 2.1' }, { name: 'Child 2.2' }],
    },
  ];

  render() {
    return html`
      <vaadin-grid .items=${this.items} item-has-children-path="children">
        <vaadin-grid-tree-column header="Name" path="name"></vaadin-grid-tree-column>
      </vaadin-grid>
    `;
  }
}

… but it results in this:
vaadin-tree-grid

2

Hi, unfortunately, the items convenience API still doesn’t support hierarchy. The code should work if you assign the following function as the dataProvider for the grid:

({ parentItem, page, pageSize }, cb) => {
  const startIndex = page * pageSize;
  const endIndex = startIndex + pageSize;
  const levelItems = parentItem ? parentItem.children : items;
  cb(levelItems.slice(startIndex, endIndex), levelItems.length);
};
1 Like
3

Thanks @virkki,
A followup question is that I defined a custom renderer for the vaadin-grid-tree-column but it is never called, is this a bug since the renderer is part of the vaadin-grid-tree-column API doc?

4

Indeed, renderer assigned to a <vaadin-grid-tree-column> doesn’t get called. Here’s a related feature request to support rendering custom content inside the tree toggles Support custom content in grid tree column toggle · Issue #6867 · vaadin/web-components · GitHub

1 Like
5

itemhaschildren works like this. what you put in itemhaschildren will be searched in your data, if some item have the attribute thats specified in itemhaschildren in your case children(you shouldnt put list of children like you do, you have to use .dataProvider to select which items are the children. in the data you will see some items have manager: true, if item have id then that person is manager and if the item have managerId then that is the child for corresponding manager…) and that attribute is true then it will put the > icon. and in order for the children to be shown you must use .dataProvider. The .dataProvider gets the data dynamically. check my example out… Too bad they don’t have detailed example of how to use .dataProvider.


  render(): TemplateResult {
    return html`
      <!-- adi-pages here, if you need it-->
      <section>
        <vaadin-grid .itemHasChildrenPath="${'manager'}" .dataProvider=${this.dataProvider.bind(this)}>
          <vaadin-grid-tree-column path="firstName"></vaadin-grid-tree-column>
          <vaadin-grid-column path="lastName"></vaadin-grid-column>
          <vaadin-grid-column path="email"></vaadin-grid-column>
        </vaadin-grid>
      </section>
    `;
  }

  getPeople() {
    return [
      {
        firstName: 'Aria',
        lastName: 'Bailey',
        address: {
          street: '4188 Crystal Orchard',
          city: 'Mousie',
          state: 'New Hampshire',
          zip: '03849-7787',
          country: 'USA',
          phone: '(603) 555-0548',
        },
        email: 'aria.bailey@company.com',
        id: '0',
        subscriber: !0,
        membership: 'Premium',
        pictureUrl: '',
        profession: 'Endocrinologist',
        birthday: '1984-01-13',
        managerId: null,
        status: 'Busy',
        manager: !0,
      },
      {
        firstName: 'Aaliyah',
        lastName: 'Butler',
        address: {
          street: '2560 Iron Brook Downs',
          city: 'Friendship',
          state: 'Tennessee',
          zip: '38489-1588',
          country: 'USA',
          phone: '(865) 555-9665',
        },
        email: 'aaliyah.butler@company.com',
        id: '1',
        subscriber: !0,
        membership: 'VIP',
        pictureUrl: '',
        profession: 'Nephrologist',
        birthday: '1977-07-12',
        managerId: null,
        status: 'Available',
        manager: !0,
      },
      {
        firstName: 'Eleanor',
        lastName: 'Price',
        address: {
          street: '3851 Gentle Hill',
          city: 'Zodiac',
          state: 'Delaware',
          zip: '19970-0027',
          country: 'USA',
          phone: '(302) 555-2277',
        },
        email: 'eleanor.price@company.com',
        id: '2',
        subscriber: !0,
        membership: 'Regular',
        pictureUrl: '',
        profession: 'Ophthalmologist',
        birthday: '1976-12-14',
        managerId: null,
        status: 'Available',
        manager: !0,
      },
      {
        firstName: 'Allison',
        lastName: 'Torres',
        address: {
          street: '5875 Bright Trail',
          city: 'Featherbed',
          state: 'Washington',
          zip: '99150-3631',
          country: 'USA',
          phone: '(509) 555-0764',
        },
        email: 'allison.torres@company.com',
        id: '3',
        subscriber: !1,
        membership: 'Regular',
        pictureUrl: '',
        profession: 'Allergist',
        birthday: '1972-12-04',
        managerId: null,
        status: 'Available',
        manager: !0,
      },
      {
        firstName: 'Madeline',
        lastName: 'Lewis',
        address: {
          street: '4721 Noble Maze',
          city: 'Kalifornsky',
          state: 'Nevada',
          zip: '89270-4436',
          country: 'USA',
          phone: '(702) 555-8425',
        },
        email: 'madeline.lewis@company.com',
        id: '4',
        subscriber: !1,
        membership: 'VIP',
        pictureUrl: '',
        profession: 'Gastroenterologist',
        birthday: '1978-02-03',
        managerId: null,
        status: 'Busy',
        manager: !0,
      },
      {
        firstName: 'Anna',
        lastName: 'Myers',
        address: {
          street: '2954 Crystal Quail Carrefour',
          city: 'Goat City',
          state: 'Michigan',
          zip: '48261-9915',
          country: 'USA',
          phone: '(231) 555-6601',
        },
        email: 'anna.myers@company.com',
        id: '5',
        subscriber: !0,
        membership: 'Premium',
        pictureUrl: '',
        profession: 'Anesthesiologist',
        birthday: '1990-04-23',
        managerId: null,
        status: 'Available',
        manager: !0,
      },
      {
        firstName: 'Ashley',
        lastName: 'Howard',
        address: {
          street: '6589 Lazy Oak Walk',
          city: 'Missouri Triangle',
          state: 'New Jersey',
          zip: '08203-2086',
          country: 'USA',
          phone: '(848) 555-4552',
        },
        email: 'ashley.howard@company.com',
        id: '6',
        subscriber: !0,
        membership: 'Regular',
        pictureUrl: '',
        profession: 'Urologist',
        birthday: '1977-06-27',
        managerId: null,
        status: 'Available',
        manager: !0,
      },
      {
        firstName: 'Cooper',
        lastName: 'Phillips',
        address: {
          street: '5868 Cinder Centre',
          city: 'Apponagansett',
          state: 'North Dakota',
          zip: '58777-1298',
          country: 'USA',
          phone: '(701) 555-0519',
        },
        email: 'cooper.phillips@company.com',
        id: '7',
        subscriber: !1,
        membership: 'Premium',
        pictureUrl: '',
        profession: 'Cardiologist',
        birthday: '1975-01-01',
        managerId: null,
        status: 'Busy',
        manager: !0,
      },
      {
        firstName: 'Lauren',
        lastName: 'Wright',
        address: {
          street: '9878 Emerald Beacon Wynd',
          city: 'Tomboy',
          state: 'Wisconsin',
          zip: '54995-7449',
          country: 'USA',
          phone: '(920) 555-6872',
        },
        email: 'lauren.wright@company.com',
        id: '8',
        subscriber: !1,
        membership: 'Regular',
        pictureUrl: '',
        profession: 'Pediatrician',
        birthday: '1974-09-13',
        managerId: null,
        status: 'Available',
        manager: !0,
      },
      {
        firstName: 'Abigail',
        lastName: 'Lewis',
        address: {
          street: '4912 Lost Brook Promenade',
          city: 'High Health',
          state: 'Florida',
          zip: '34389-3438',
          country: 'USA',
          phone: '(904) 555-7711',
        },
        email: 'abigail.lewis@company.com',
        id: '9',
        subscriber: !1,
        membership: 'Regular',
        pictureUrl: '',
        profession: 'Nephrologist',
        birthday: '1979-03-07',
        managerId: '1',
        status: 'Available',
        manager: !1,
      },
      {
        firstName: 'Ryder',
        lastName: 'Turner',
        address: {
          street: '9478 Hazy Green',
          city: 'Ragged Top',
          state: 'New Hampshire',
          zip: '03658-0772',
          country: 'USA',
          phone: '(603) 555-5774',
        },
        email: 'ryder.turner@company.com',
        id: '10',
        subscriber: !1,
        membership: 'Premium',
        pictureUrl: '',
        profession: 'Pulmonologist',
        birthday: '1986-09-03',
        managerId: null,
        status: 'Available',
        manager: !0,
      },
      {
        firstName: 'Isaac',
        lastName: 'Jones',
        address: {
          street: '3977 Heather Way',
          city: 'Nankipooh',
          state: 'Minnesota',
          zip: '56063-2417',
          country: 'USA',
          phone: '(320) 555-1707',
        },
        email: 'isaac.jones@company.com',
        id: '11',
        subscriber: !0,
        membership: 'VIP',
        pictureUrl: '',
        profession: 'Podiatrist',
        birthday: '1974-02-27',
        managerId: null,
        status: 'Busy',
        manager: !0,
      },
      {
        firstName: 'Amelia',
        lastName: 'Evans',
        address: {
          street: '8892 Wishing Leaf Parade',
          city: 'Jenny Lind',
          state: 'Pennsylvania',
          zip: '18926-4904',
          country: 'USA',
          phone: '(215) 555-7870',
        },
        email: 'amelia.evans@company.com',
        id: '12',
        subscriber: !0,
        membership: 'Premium',
        pictureUrl: '',
        profession: 'Surgeon',
        birthday: '1985-12-20',
        managerId: null,
        status: 'Available',
        manager: !0,
      },
      {
        firstName: 'Grace',
        lastName: 'Wilson',
        address: {
          street: '9878 Emerald Beacon Wynd',
          city: 'Tomboy',
          state: 'Wisconsin',
          zip: '54995-7449',
          country: 'USA',
          phone: '(920) 555-6872',
        },
        email: 'grace.wilson@company.com',
        id: '13',
        subscriber: !1,
        membership: 'Regular',
        pictureUrl: '',
        profession: 'Cardiologist',
        birthday: '1973-03-21',
        managerId: '7',
        status: 'Available',
        manager: !1,
      },
      {
        firstName: 'Zoe',
        lastName: 'Robinson',
        address: {
          street: '6261 Hidden Lake Manor',
          city: 'Foot of Ten',
          state: 'Alabama',
          zip: '36262-6582',
          country: 'USA',
          phone: '(251) 555-1099',
        },
        email: 'zoe.robinson@company.com',
        id: '14',
        subscriber: !0,
        membership: 'Premium',
        pictureUrl: '',
        profession: 'Obstetrician',
        birthday: '1975-06-22',
        managerId: null,
        status: 'Available',
        manager: !0,
      },
      {
        firstName: 'Connor',
        lastName: 'Garcia',
        address: {
          street: '9546 Middle Passage',
          city: 'Beans Corner',
          state: 'Connecticut',
          zip: '06257-5597',
          country: 'USA',
          phone: '(860) 555-6030',
        },
        email: 'connor.garcia@company.com',
        id: '15',
        subscriber: !0,
        membership: 'Regular',
        pictureUrl: '',
        profession: 'Neurologist',
        birthday: '1977-03-12',
        managerId: null,
        status: 'Available',
        manager: !0,
      },
      {
        firstName: 'Jeremiah',
        lastName: 'Foster',
        address: {
          street: '5553 Bright Wagon Dell',
          city: 'Duckroost',
          state: 'Alabama',
          zip: '36802-7139',
          country: 'USA',
          phone: '(205) 555-1102',
        },
        email: 'jeremiah.foster@company.com',
        id: '16',
        subscriber: !0,
        membership: 'Regular',
        pictureUrl: '',
        profession: 'Endocrinologist',
        birthday: '1976-01-01',
        managerId: '0',
        status: 'Available',
        manager: !1,
      },
      {
        firstName: 'Amelia',
        lastName: 'Hall',
        address: {
          street: '8635 Gentle Deer Heath',
          city: 'Dutch John',
          state: 'Colorado',
          zip: '80166-1633',
          country: 'USA',
          phone: '(303) 555-6720',
        },
        email: 'amelia.hall@company.com',
        id: '17',
        subscriber: !0,
        membership: 'Premium',
        pictureUrl: '',
        profession: 'Ophthalmologist',
        birthday: '1976-06-20',
        managerId: '2',
        status: 'Available',
        manager: !1,
      },
      {
        firstName: 'Leo',
        lastName: 'Turner',
        address: {
          street: '5015 Cozy Robin Common',
          city: 'Tomboy',
          state: 'Maryland',
          zip: '20964-2955',
          country: 'USA',
          phone: '(443) 555-0936',
        },
        email: 'leo.turner@company.com',
        id: '18',
        subscriber: !1,
        membership: 'VIP',
        pictureUrl: '',
        profession: 'Surgeon',
        birthday: '1975-03-09',
        managerId: '12',
        status: 'Available',
        manager: !1,
      },
      {
        firstName: 'David',
        lastName: 'Long',
        address: {
          street: '4660 High Downs',
          city: 'Offer',
          state: 'Massachusetts',
          zip: '01390-7301',
          country: 'USA',
          phone: '(351) 555-9202',
        },
        email: 'david.long@company.com',
        id: '19',
        subscriber: !1,
        membership: 'Premium',
        pictureUrl: '',
        profession: 'Oncologist',
        birthday: '1980-11-14',
        managerId: null,
        status: 'Available',
        manager: !0,
      },
      {
        firstName: 'Madeline',
        lastName: 'Rogers',
        address: {
          street: '4817 Fallen Swale',
          city: 'Louisiana',
          state: 'District of Columbia',
          zip: '20084-2834',
          country: 'USA',
          phone: '(202) 555-7072',
        },
        email: 'madeline.rogers@company.com',
        id: '20',
        subscriber: !0,
        membership: 'Regular',
        pictureUrl: '',
        profession: 'Neurologist',
        birthday: '1985-04-04',
        managerId: '15',
        status: 'Available',
        manager: !1,
      },
      {
        firstName: 'Taylor',
        lastName: 'Ramirez',
        address: {
          street: '5921 Silver Diversion',
          city: 'Parchment',
          state: 'Texas',
          zip: '76301-0113',
          country: 'USA',
          phone: '(915) 555-9170',
        },
        email: 'taylor.ramirez@company.com',
        id: '21',
        subscriber: !1,
        membership: 'Premium',
        pictureUrl: '',
        profession: 'Gastroenterologist',
        birthday: '1980-06-13',
        managerId: '4',
        status: 'Busy',
        manager: !1,
      },
      {
        firstName: 'William',
        lastName: 'Evans',
        address: {
          street: '3467 Green Rise Park',
          city: 'Ko Ko',
          state: 'Missouri',
          zip: '64085-3098',
          country: 'USA',
          phone: '(314) 555-7357',
        },
        email: 'william.evans@company.com',
        id: '22',
        subscriber: !1,
        membership: 'Regular',
        pictureUrl: '',
        profession: 'Orthopedist',
        birthday: '1971-11-11',
        managerId: null,
        status: 'Busy',
        manager: !0,
      },
      {
        firstName: 'Annabelle',
        lastName: 'Rodriguez',
        address: {
          street: '4864 Tawny Bend',
          city: 'Plentywood',
          state: 'Iowa',
          zip: '51377-1040',
          country: 'USA',
          phone: '(319) 555-1931',
        },
        email: 'annabelle.rodriguez@company.com',
        id: '23',
        subscriber: !1,
        membership: 'Regular',
        pictureUrl: '',
        profession: 'Psychiatrist',
        birthday: '1990-12-15',
        managerId: null,
        status: 'Busy',
        manager: !0,
      },
      {
        firstName: 'Grace',
        lastName: 'Gutierrez',
        address: {
          street: '2239 Quaking Row',
          city: 'Zipp',
          state: 'South Carolina',
          zip: '29814-0324',
          country: 'USA',
          phone: '(843) 555-4899',
        },
        email: 'grace.gutierrez@company.com',
        id: '24',
        subscriber: !0,
        membership: 'Premium',
        pictureUrl: '',
        profession: 'Psychiatrist',
        birthday: '1977-12-01',
        managerId: '23',
        status: 'Busy',
        manager: !1,
      },
      {
        firstName: 'Naomi',
        lastName: 'Garcia',
        address: {
          street: '8443 Middle Pony Estates',
          city: 'Ty Ty',
          state: 'Arizona',
          zip: '86773-7692',
          country: 'USA',
          phone: '(623) 555-7979',
        },
        email: 'naomi.garcia@company.com',
        id: '25',
        subscriber: !1,
        membership: 'Regular',
        pictureUrl: '',
        profession: 'Nephrologist',
        birthday: '1988-01-25',
        managerId: '1',
        status: 'Available',
        manager: !1,
      },
    ];
  }
  async dataProvider(params: GridDataProviderParams<Person>, callback: GridDataProviderCallback<Person>) {
    // The requested page and the full length of the corresponding
    // hierarchy level is requested from the data service
    // debugger;
    const people = this.getPeople().filter((person) => {
      debugger;
      console.log(params);
      if (params.parentItem) {
        if (params.parentItem?.id === person.managerId) return true;
      } else {
        return true;
      }

      return false;
    });

    callback(people, people.length);
}