This is a migrated thread and some comments may be shown as answers.

How to dynamically nest kendo detailRowTemplates in a Kendo Grid?

3 Answers 344 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ahan
Top achievements
Rank 1
Ahan asked on 21 Sep 2020, 06:42 PM
I am trying to dynamically nest grids within a kendo grid, up to 10 levels deep. Is there a good approach you can recommend to dynamically nest the ng-template data so it doesn't look bloated? This is only three hardcoded levels of nesting and already is bloated.  Thanks in advance!
<kendo-grid>
  <kendo-grid-column field="ProductID" title="ID" width="40"></kendo-grid-column>
  <ng-template kendoGridDetailTemplate let-dataItem>
    <kendo-grid>
      <kendo-grid-column field="ProductID" title="ID" width="40"></kendo-grid-column>
      <ng-template kendoGridDetailTemplate let-dataItem>
        <kendo-grid>
          <kendo-grid-column field="ProductID" title="ID" width="40"></kendo-grid-column>
          <ng-template kendoGridDetailTemplate let-dataItem>
          </ng-template>
        </kendo-grid>
      </ng-template>
    </kendo-grid>
  </ng-template>
</kendo-grid>

3 Answers, 1 is accepted

Sort by
0
Hetali
Telerik team
answered on 23 Sep 2020, 06:52 PM

Hi Ahan,

Unfortunately, the mentioned approach is the only way to define the Master-Detail Grid. To make the code look less bloated, you could define each nested Grid in a new component.

Please note that adding 10 nested Grid may affect the performance of the Grid. Take a look at our Performance Tips which can help you improve the Grid performance.

I hope this information helps. Let me know if I can further assist you.

Regards,
Hetali
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Ahan
Top achievements
Rank 1
answered on 22 Oct 2020, 06:44 AM

Thanks. Can you provide a code example of a grid with 4 layers depth, and how the data should be binded? That's my most common use case. I am able to bind my data up to 3 levels of depth but not to 4 levels of depth.

-Ahan

0
Accepted
Hetali
Telerik team
answered on 22 Oct 2020, 09:46 PM

Hello Ahan,

Please take a look at this StackBlitz example where I have added 4 layers depth in the Master-Detail Grid. I have used the same data for the Grids but you can also change the data of each Grid in the example.

I hope this helps. If I have misunderstood your requirement, please respond in this ticket with additional detailed information and updated StackBlitz example with the relevant code to further assist you.

Regards,
Hetali
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
Ahan
Top achievements
Rank 1
Answers by
Hetali
Telerik team
Ahan
Top achievements
Rank 1
Share this question
or