TreeGrid: "Wrong level" in custom renderer

Vaadin 6 / 7 / 8 Framework UI
1

Hi,

I want to have a GridTree with the following elements in the first column.

  1. The tree-toggle
  2. The select box
  3. If level = 0, one clickable icon, if level != 0, two clickable icons.

Therefor I write a custom renderer for the first column. It works quite well, but I got the following problem / bug?:
The first child element of the first list displays the correct values in the other columns, but the click-binding shows, that the item for the row is the second “parent” item of the list.

Here the html:

<vaadin-grid aria-label="Users" height-by-rows>
       <vaadin-grid-column auto-width></vaadin-grid-column>
	   <vaadin-grid-column path="groupName" header="Group" auto-width flex-grow="0"></vaadin-grid-column>
       <vaadin-grid-column path="username" header="Username" auto-width flex-grow="0"></vaadin-grid-column>
</vaadin-grid>

And here the javascript / typescript:

const column = this._treeGrid.querySelector('vaadin-grid-column');

column.renderer = (root: any, col: any, rowData: any) => {
    let toggler: any;
    let checkbox: any;
    if (root.children.length === 0) {
		// this part is from the doc for own tree-toggle
        toggler = window.document.createElement('vaadin-grid-tree-toggle') as any;
        toggler.addEventListener('expanded-changed', () => {
			this._treeGrid[toggler.expanded ? 'expandItem' : 'collapseItem']
(toggler.item);
        });
        root.appendChild(toggler);

		// This part is from the doc for own select
        checkbox = window.document.createElement('vaadin-checkbox') as any;
        checkbox.setAttribute('aria-label', 'Select Row');
        checkbox.addEventListener('change', (event: any) => {
           if (event.target.checked === this._inverted) {
              this._treeGrid.deselectItem(checkbox.__item);
           } else {
              this._treeGrid.selectItem(checkbox.__item);
           }
           this._indeterminate = this._treeGrid.selectedItems.length > 0;
           this._treeGrid.render();
        });
        root.appendChild(checkbox);
		
		// this part is my part, where I decide, which icons should be displayed
        const editButton = this.createButtonElement('Edit'); // creates a clickable icon-element
        editButton.addEventListener('click', console.log.bind(this, rowData)); // [1]

        root.appendChild(editButton);
        if (rowData.level) {
           const deleteButton = this.createButtonElement('Delete');
           deleteButton.addEventListener('click', console.log.bind(this, rowData));
           root.appendChild(deleteButton);
        }
    } else {
        toggler = root.children[0]
;
        checkbox = root.children[1]
;
    }
    toggler.item = rowData.item;
    toggler.leaf = rowData.item.id !== -1;
    toggler.expanded = rowData.expanded;
    toggler.level = rowData.level;
    toggler.innerHTML = '&nbsp;';
    checkbox.__item = rowData.item;
    checkbox.checked = this._inverted !== rowData.selected;
};

this._treeGrid.dataProvider = (params: any, callback: any) => {
    const groupName = params.parentItem ? params.parentItem.groupName : '';
    if (groupName) {
       let users = this.users.filter((user) => user.group === groupName);
       callback(users, users.length);
       this._treeGrid.recalculateColumnWidths();
    } else {
       callback(groups, groups.length);
    }
};

The Result looks like this:

> [select]
 [edit]
 Groupname 1
	> [select]
 [edit]
 - Username // if i click on this icon, the log shows the item of Group2
	> [select]
 [edit]
 [delete]
 - Username
> [select]
 [edit]
 Groupname 2

Where have I done the misstake?