How to achieve Master-Detail grid with 2 details grid for one master in (Kendo-Angular)?

1 Answer 142 Views

Grid

1 Answer, 1 is accepted

answered on 08 Jun 2023, 10:58 PM

Hi Dev,

In order to show two detail Grids in the Kendo UI Master-Detail Grid, simply define both the Grids in the DetailTemplateDirective. For example:

<kendo-grid [data]="gridData">
  <ng-template kendoGridDetailTemplate let-dataItem>
    <kendo-grid [data]="gridData">
    </kendo-grid> <br />
    <kendo-grid [data]="gridData">
    </kendo-grid>
  </ng-template>
</kendo-grid>

Here is the StackBlitz example where I have added two grid in the detail template of the Master-Detail Grid.

To show a detail Grid within the detail grid of the Kendo UI Master-Detail Grid, use the DetailTemplateDirective in the detail grid as well. For example:

<kendo-grid [data]="gridData">
  <ng-template kendoGridDetailTemplate let-dataItem>
    <kendo-grid [data]="gridData">
      <ng-template kendoGridDetailTemplate let-dataItem>
        <kendo-grid [data]="gridData">
        </kendo-grid>
      </ng-template>
    </kendo-grid>
  </ng-template>
</kendo-grid>

In this StackBlitz example, I have defined a detail grid within the detail grid of the Master-Detail Grid.

Please let me know if this information helps or if I can further assist you with the Kendo UI Master-Detail Grid.

Regards,
Hetali
Progress Telerik

As of R2 2023, the default icon type will be SVG instead of Font. See this blogpost for more information.