vaadin-grid-tree , how/where the children data is added to be displayed?

Hello All,

I’m trying to create a 3 levels structure but don’t know how to configure the second and third levels. In ‘myGridData’ array you can see a two levels structure where ‘tests’ is the property where the children are defined.

The toggle is visible, even works accordingly to the expanded property value. But just when expanded it displays nothing.

I’m in Polymer 3, below you can see:

  1. my Array definition.
  2. my vaadin-grid element.
  3. The imports from vaadin-grid in my component at the bottom of this post.

I tried to follow the examples in https://vaadin.com/components/vaadin-grid/html-examples/grid-tree-demos but found no way to continue with this part of the game.

Even, I want to take advantage and asking how far is possible to create another header for the level 2 and above. This is due to the info to be displayed in all the different levels can vary then create a tree with different columns per level.

Thanks in advance

  myGridData: { 
    type: Array,
    value: [
      {sampleId: '1', sampleName: 'S1', objectLevel: 'SAMPLE', hasChildren:true, expanded:true, level:1,
        tests:[
          {sampleId: '1', testId: 1, testName: 'S1-T1', hasChildren:true, expanded:false, level:2},
          {sampleId: '2', testId: 2, testName: 'S1-T2', hasChildren:true, expanded:false, level:2}
        ]
      },
      {sampleId: '2', sampleName: 'S2', objectLevel: 'SAMPLE', hasChildren:false, expanded:false, level:1
      },
      {sampleId: '3', sampleName: 'S3', objectLevel: 'SAMPLE', hasChildren:true, expanded:false, level:1
      },
    ]
  }
  
  <vaadin-grid id="mygrid" name="mygrid" items="[[myGridData]

]">

      <vaadin-grid-column>          
          <template class="header">Id</template>
          <template>
            <vaadin-grid-tree-toggle
              leaf="[[!item.hasChildren]

]"
expanded=“{{item.expanded}}” itemHasChildrenPath=“tests.testName”
level=“[[level]
]”>
[[item.sampleId]
]




Name
[[item.sampleName]
]


Level
[[item.objectLevel]
]

import ‘@vaadin/vaadin-grid/vaadin-grid.js’;
import ‘@vaadin/vaadin-grid/vaadin-grid-selection-column’;
import ‘@vaadin/vaadin-grid/vaadin-grid-sort-column’;
import ‘@vaadin/vaadin-grid/vaadin-grid-filter’;
import ‘@vaadin/vaadin-grid/vaadin-grid-tree-toggle’;
import ‘@vaadin/vaadin-grid/vaadin-grid-tree-column’;