Details row and Hierarchical binding

[Juan]

Hi,

I've read in the documentation about Hierarchicla binding that having a nested grid inside the main grid and expandable details in rows, is not possible, is that true?.

The grid scheme I need to implements is as it follows:

So I had a grid inside any of the rows, when expand icon is clicked, and also some expanded inforamtion whne click on the icons of the icon columns,

Is something I can do to get my goal? I'm being checking the grouping feature as well, but for the look and functioanlity of my prototype, it seems like it is not what I'm looking for.

Thank you

[Manivel Sellamuthu]

Hi Juan, 

Greetings from Syncfusion support. 

EJ 2 Grid supports n level of child grids. Hierarchical binding is not supported when DetailTemplate is enabled. Due some reasons, the image is not accessible at our end. So we suggest you to re-attach the image for our better understanding of your implementation. If possible, please share the implemented Grid code. 

Also We suggest you to take a glance at our Hierarchical binding demos and documentation links. 

Demo: https://ej2.syncfusion.com/angular/demos/#/material/grid/hierarchy 

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/hierarchy-grid/#hierarchical-binding 

Regards, 

Manivel 

[Juan]

Hi,

I attached the image as a 7z file.

Thank you!

Attachment: grid_scheme_b85e0587.7z

[Manivel Sellamuthu]

Hi Juan, 

Thanks for your update. 

From your attached image of the layout we can get your requirements. From that query we can confirm that we can achieve your layout in Grid applying by the below features. 

1. Selector column – which can be achieved using checkbox selection feature of the Grid

Demo: https://ej2.syncfusion.com/angular/demos/#/material/grid/checkbox-selection 

 

2. Regular columns and icons column and actions columns can be achieved respective by defining columns, template columns and command columns.

Regular columns: https://ej2.syncfusion.com/angular/demos/#/material/grid/default 

Icon column: https://ej2.syncfusion.com/angular/demos/#/material/grid/column-template 

Action column: https://ej2.syncfusion.com/angular/demos/#/material/grid/command-column 

 

3. Row Groups and rowGroup details can be achieved using detail template feature of the Grid.

Demo: https://ej2.syncfusion.com/angular/demos/#/material/grid/detail-template 

 

4. Hide expand icons for rows that have not details.

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/how-to/hide-the-expand-collapse-icon-in-parent-row/#hide-the-expandcollapse-icon-in-parent-row-with-no-record-in-child-grid 

 

Based on your confirmation , we will prepare the sample based on the layout and update the sample. 

Regards, 

Manivel 

[Juan]

Hi,

I've read your answer. It seems everything is okey, but the point 3 is not totally clear, that was my real concern when I open this ticket, rest of things are working perfectly.

My problem here is that I need a child grid and at  the same time, a row details for the rows of the main grid. As you say I can get that filling up the detailRowTemplate of the main grid with someting like this:

<ng-template #detailTemplate let-data>
  <div [hidden]="!data.isAttachmentDetailsVisible">Attachment details</div>
  <div [hidden]="!data.isCommentDetailsVisible">Comment details</div>
  <div [hidden]="!data.isLabelDetailsVisible">Label details</div>
  <div [hidden]="!data.isAccountingDetailsVisible">Accounting details</div>
  <ejs-grid #childGrid
            [dataSource]="data.items">
            <ng-template #detailTemplate let-data>
              <div [hidden]="!data.isAttachmentDetailsVisible">Attachment for {{data.name}}</div>
              <div [hidden]="!data.isCommentDetailsVisible">Comment nested details</div>
              <div [hidden]="!data.isLabelDetailsVisible">Label nested details</div>
              <div [hidden]="!data.isAccountingDetailsVisible">Accounting nested details</div>
            </ng-template>
    <e-columns>
      <e-column field="id" [visible]="false"></e-column>
      <e-column field="name" headerText="Document"></e-column>
      <e-column field="state" headerText="Document"></e-column>
      <e-column field="createdDate" headerText="Due date"></e-column>
      <e-column field="amount" headerText="Amount"></e-column>
      <e-column field="attachmentsNumber" headerTemplate="#attachment">
        <ng-template #template let-data>
          <ib-icon [icon]="'info'" (click)="showNestedDetails($event, data, 'isAttachmentDetailsVisible')"></ib-icon>
        </ng-template>
      </e-column>
      <e-column field="comments" headerTemplate="#comment">
        <ng-template #template let-data>
          <ib-icon [icon]="'people'" (click)="showNestedDetails($event, data, 'isCommentDetailsVisible')"></ib-icon>
        </ng-template>
      </e-column>
      <e-column field="labels" headerTemplate="#label">
        <ng-template #template let-data>
          <ib-icon [icon]="'plus'" (click)="showNestedDetails($event, data, 'isLabelDetailsVisible')"></ib-icon>
        </ng-template>
      </e-column>
      <e-column field="accountingList" headerTemplate="#accounting">
        <ng-template #template let-data>
          <ib-icon [icon]="'lens'" (click)="showNestedDetails($event, data, 'isAccountingDetailsVisible')"></ib-icon>
        </ng-template>
      </e-column>
    </e-columns>
  </ejs-grid>
</ng-template>

But the problem is that I lose the control of the child grid throught the property childGrid of the parent grid. I mean,
for example I could do something like this (this.grid is the main GridComponent):
this.grid.childGrid.columns // getting access to the childColumn
if I were defined the childGrid by this way:
<ejs-grid #gridRef
          [dataSource]='data'
          [allowSorting]="true"
          [childGrid]="childGrid"
I could have access all the properties, methods,.....
is there a way that defining the nested ejs-grid as this:
<ejs-grid #gridRef
          [dataSource]='data'
          [allowSorting]="true"
          [childGrid]="childGrid"
          [selectionSettings]="selectionOptions"
          (created)="created($event)"
          (dataBound)="dataBound($event)"
          [enableVirtualization]=true
          height=900>
  <ng-template #detailTemplate let-data>
    <div [hidden]="!data.isAttachmentDetailsVisible">Attachment details</div>
    <div [hidden]="!data.isCommentDetailsVisible">Comment details</div>
    <div [hidden]="!data.isLabelDetailsVisible">Label details</div>
    <div [hidden]="!data.isAccountingDetailsVisible">Accounting details</div>
    <ejs-grid #childGrid

I could set the internal ejs-grid as child of the outter ejs-grid?

[Manivel Sellamuthu]

Hi Juan 

Thanks for your update. 

From your shared code example we could see that you have enabled virtualization for the Grid. We would like to inform you that  

Virtual scrolling is not compatible with detail template and hierarchy features. The limitations can be found in the below documentation link. 

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/virtual/#limitations-for-virtualization 

Please let us know, if you need further assistance. 

Regards, 

Manivel