Hierarchical Binding in Angular TreeGrid like Grid

[Wilma Hill]

Hello,

Could you please tell me how to use hierarchical binding like grid  in treegrid ? I need to render another tree grid component when expanding a row.

I need the output like hierarchical binding like grid where row can render another table in treegrid. like https://ej2.syncfusion.com/angular/documentation/grid/hierarchy-grid/?no-cache=1

Regards,

Wilma Hill

[Padmavathy Kamalanathan]

Hi Wilma,
 

  

Thanks for contacting Syncfusion Forums. 

  

QUERY: Render Tree Grid on expanding row 

  

We have achieved your requirement by rendering the Tree Grid in the column Template of Tree Grid. In column template, we have checked whether the row is parent or child using the property "hasChildRecords". If the row is child row, we have rendered Tree Grid for that row. 

  

Please check the below code snippet, 

  

  

<ejs-treegrid #treegrid [dataSource]='data' height='400'  

      childMapping='subtasks' [treeColumnIndex]='0'> 

    <e-columns> 

        <e-column  headerText='Task ID' isPrimaryKey='true' 

        width='90' textAlign='Left' > 

      <ng-template #template let-data> 

        <span *ngIf="data.hasChildRecords">{{data.taskID}}</span> 

        <div *ngIf="!data.hasChildRecords"> 

          <ejs-treegrid  id='treegrid{{data.taskID}}'  

            [dataSource]='data1' height='200' childMapping='subtasks' 

          [treeColumnIndex]='0'  > 

           <e-columns> 

          <e-column  field='taskID' headerText='Task ID'  

            isPrimaryKey='true' width='90' textAlign='Left' > 

          </e-column> 

          </e-columns> 

         </ejs-treegrid> 

         </div> 

        </ng-template> 

        </e-column> 

    </e-columns> 

</ejs-treegrid> 

Please check the below sample, 

https://stackblitz.com/edit/angular-anpi3v-blycqk
 

 

Please check the below help documentations, 

https://ej2.syncfusion.com/angular/documentation/treegrid/columns/#column-template 

https://ej2.syncfusion.com/angular/demos/#/material/treegrid/columntemplate 

  

Kindly get back to us for further assistance. 

  

Regards, 

Padmavathy Kamalanathan