Grid display grouped rows and groupless rows

[Max]

I was trying to use the grouping feature. I have several items which are grouped into groups and sub groups. This is how am item could look like, if its grouped into a group and a subgroup:

{
    name: 'E1',
    group: 'Investitionskosten',
    subgroup: 'Erzeuger',
    scenario1: 1000,
    scenario2: 2000,
}

This works as expected.

What I now need is, that I can group items only in either just one group, or in no group at all. E.g:

{
    name: 'Initial',
    group: 'Investitionskosten',
    scenario1: 10000,
    scenario2: 8000,
},
{
    name: "Amortisation",
    scenario1: 'Basis',
    scenario2: '19 Jahre'
}

Notice, that the first item has no 'subgroup' property. So its only grouped into the value of the group property. The second item doesn't have the 'group' property, so its not grouped at all.

Is this somehow possible? The result could look like the screenshot in the attachments (I manually modified the HTML output, to make it look like this):

 

[Plamen]

In general Kendo Grid for Vue is displaying its rows hierarchy based on the data that is passed so the default grouping behavior will have difficulties displaying the data passed in your scenario. One possible approach that I can think of is to still provide grouping properties to the "Amortisation" item so it is grouped correctly, yet provide also an additional property and based on it to hide the grouping row by using custom cell as for example it is done here - https://stackblitz.com/edit/3nxjwb?file=src%2FCustomCell.vue