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