Angular Master Detail functionality

[Aya]

In Angular Grid Grouping, Do we have the ability to display a row with multiple columns instead of a specific field?
For Ex: 
https://www.telerik.com/kendo-angular-ui/components/grid/grouping/basics/
Instead of adding a specific field that we group by, Could we add a row with multiple columns?

Additionally, is there a way to achieve a hierarchical view within the grid itself? Similar to the Master Detail functionality, we'd like to have sub-rows that share the same columns as the main row, but without treating them as separate components with distinct headers.
https://www.telerik.com/kendo-angular-ui/components/grid/master-detail/#:~:text=To%20apply%20a%20hierarchical%20order%20to%20the%20desired,are%20filtered%20by%20the%20parent%20key%20field%20value.

[Georgi]

Hi Aya,

Thank you very much for the details provided.

I will address the questions in numerical order so that it is easier for you to keep track of the response.

1. Grouping Question

Based on the details provided in the thread so far, I am not entirely sure what the exact layout and desired functionality for the Grid component are.

For this reason, in order to avoid misunderstandings and provide the maximum utility out of the support service, I would ask you to provide more detailed description of the desired feature. This would allow me to gain a better understanding of the exact scenario and thus come up with a more suitable suggestion.

2. Hierarchical View within the Grid

Indeed, one possible approach that would allow the developer to render a hierarchical view inside the Kendo UI for Angular Grid would be to utilize the built-in Master Detail functionality. However, you are correct that with such an approach the content in the Master Detail section would be treated as a separate component. 

To avoid this, the developer could set the value of the built-in hideHeader property of the component in the detail section to true thus hiding its header:

<kendo-grid [kendoGridBinding]="data" [hideHeader]="true">
    ...
</kendo-grid>

Furthermore, the developer could use the .k-detail-cell CSS selector to remove the default padding of the component and match the column width using the designated width property:

.k-detail-cell{
    padding: 0!important;
}

<kendo-grid
    [data]="gridView"
    [selectable]="true"
    style="height:400px"
>
    ...      
    <kendo-grid-column field="ProductID" title="ID" [width]="50"></kendo-grid-column>    
    <ng-template kendoGridDetailTemplate let-dataItem>
        <kendo-grid [kendoGridBinding]="data" [hideHeader]="true">
            ...
            <kendo-grid-column field="ProductID" title="ID" [width]="50"></kendo-grid-column>    
        </kendo-grid>
    </ng-template>
</kendo-grid>

To better illustrate the suggested approach, I am sending you two StackBlitz demos that implement it:

https://stackblitz.com/edit/angular-pkyqnn

https://stackblitz.com/edit/angular-mtp8vj

Alternatively, I would suggest checking out the Kendo UI for Angular TreeList component which is especially useful in scenarios where hierarchical view should be displayed:

https://www.telerik.com/kendo-angular-ui/components/treelist/

I hope this helps. Please, let me know if I can further assist you with this case.

Regards,
Georgi
Progress Telerik