DetailTemplate approach with nested Grid

[Ernesto Yoon]

Hello, I read all the threads for the Grid component and I couldn't find anything about what I'm trying to achieve.

Could you please provide a working example? if feasible.

I would like to have a Grid using detailTemplate.

Inside the ng-template create another Grid, that doesn't need to share the data binding of the container Grid, its DataSource can be loaded from another place like a plain object, or remote source.

Using as start point the example from the following documentation, the StackBlitz example:

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

What I found Is that, for some reason, if the inner grid has not the same number of columns as the container Grid, when you expand it, is like takes place over the container one, but this doesn't happen when the columns number is the same.

Could you try to reproduce this? Is it feasible to do? Maybe I am doing something wrong. Help appreciated.

Thanks,

Ernesto 

[Rajapandi Ravi]

Hi Ernesto, 

Greetings from Syncfusion support 

In this detailTemplate sample demo, we have used the same datasource for parent and display the detailTemplate with different columns of the same datasource which was used for parent. You can create the any component in detailTemplate and you can set the proper datasource for the detailTemplate component.  

So, before we start providing solution on your query, we need some information for our clarification. Please share the below details that will be helpful for us to provide better solution. 

1)        Please share what problem you are facing while using different column in the detailTemplate. 

2)        Please share the issue scenario in video demonstration format. 

Regards, 

Rajapandi R 

[Ernesto Yoon]

Hi Rajapandi,

I already saw that demo, it's the one I used to test the scenario I brought up.

Here is a template modified version that you can use to reproduce the issue:

<div class="control-section">

  <ejs-grid #grid [dataSource]="data" id="Grid">

    <ng-template #detailTemplate let-data>

      <ejs-grid #grid_2 [dataSource]="data_2" id="Grid_2">

        <e-columns>

          <e-column

            field="custom"

            headerText="Single"

          ></e-column>

          <e-column

            field="custom"

            headerText="Remove and test"

          ></e-column>

          <e-column

            field="custom"

            headerText="Remove and test"

          ></e-column>

          <e-column

            field="custom"

            headerText="Remove and test"

          ></e-column>

          <e-column

            field="custom"

            headerText="Remove and test"

          ></e-column>

        </e-columns>

      </ejs-grid>

    </ng-template>

    <e-columns>

      <e-column

        field="EmployeeID"

        headerText="Employee ID"

        width="125"

        textAlign="Right"

      ></e-column>

      <e-column field="FirstName" headerText="Name" width="120"></e-column>

      <e-column field="Title" headerText="Title" width="170"></e-column>

      <e-column

        field="HireDate"

        headerText="Hire Date"

        width="135"

        textAlign="Right"

        format="yMd"

      ></e-column>

      <e-column

        field="ReportsTo"

        headerText="Reports To"

        width="120"

        textAlign="Right"

      ></e-column>

    </e-columns>

  </ejs-grid>

</div>

As you can see, I just added a grid inside the ng-template container, if you try this as it is, it will work, if you remove any or all the "Remove and test" columns it will break when you expand details on the main grid.

This should be enough for you to understand the problem. The inner grid, uses a different datasource, reference, and id just for sample purpose.

Thank you for your help,

Ernesto

[Rajapandi Ravi]

Hi Ernesto, 

Thanks for the update 

We have checked your shared information and we suggest you define the #detailTemplate after the parent Grid column definition. Please refer the below code example and sample for more information. 

 

<ejs-grid #grid1 [dataSource]='data' id='Grid'> 

        <e-columns> 

            <e-column field='EmployeeID' headerText='Employee ID' width='125' textAlign='Right'></e-column> 

            <e-column field='FirstName' headerText='Name' width='120'></e-column> 

            <e-column field='Title' headerText='Title' width='170'></e-column> 

            <e-column field='HireDate' headerText='Hire Date' width='135' textAlign='Right' format='yMd'></e-column> 

            <e-column field='ReportsTo' headerText='Reports To' width='120' textAlign='Right'></e-column> 

        </e-columns> 

        <ng-template #detailTemplate>  

          <ejs-grid #grid2 [dataSource]='data2'> 

          <e-columns> 

          <e-column 

          field="custom" 

          headerText="Single" 

        ></e-column> 

        <e-column 

          field="custom" 

          headerText="Remove and test" 

        ></e-column> 

        <e-column 

          field="custom" 

          headerText="Remove and test" 

        ></e-column> 

        <e-column 

          field="custom" 

          headerText="Remove and test" 

        ></e-column> 

        <e-column 

          field="custom" 

          headerText="Remove and test" 

        ></e-column> 

        </e-columns> 

          </ejs-grid> 

          </ng-template> 

    </ejs-grid> 

 

Sample: https://stackblitz.com/edit/angular-vwukvh-cmgylu?file=app.component.html 

Regards, 

Rajapandi R 

[Ernesto Yoon]

Thank you Rajapandi,

with that change it's working as expected.

I would suggest you to change the demo page to reflect that and stress out that specific order to avoid this strange behavior on row expand.

Regards,

Ernesto

[Rajapandi Ravi]

Hi Ernesto, 

We are happy to hear that the provided solution work fine at your end. 

Please get back to us if you need further assistance. 

Regards, 

Rajapandi R