How to dynamically nest kendo detailRowTemplates in a Kendo Grid?

4 posts, 1 answers
  1. Ahan
    Ahan avatar
    3 posts
    Member since:
    Sep 2020

    Posted 21 Sep 2020 Link to this post

    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>
  2.
  3. Hetali
    Admin
    Hetali avatar
    88 posts

    Posted 23 Sep 2020 Link to this post

    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/.

  5. Ahan
    Ahan avatar
    3 posts
    Member since:
    Sep 2020

    Posted 22 Oct 2020 in reply to Hetali Link to this post

    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

  7. Answer
    Hetali
    Admin
    Hetali avatar
    88 posts

    Posted 22 Oct 2020 Link to this post

    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/.

  8.
Back to Top