dataBinding for detailTemplate property

[Ahmad Al Edlbi]

Hello,

Ich möchte gerne das detailTemplate Property nachträglich setzen bzw. ändern abhängig von einem Attribut der Container-Component.

For example: (Note that the hierarchical attribute could change afterwards)

Unfortunately I saw that the saveChanges method of the Base component is not called because the passed value is not a string.

Therefore the onPropertyChanged method of the Grid component is not called and thus the detailTemplateFn property is not set again

Accordingly, I unfortunately cannot see the ChildGrid when expanding a row

I am also getting the following error message when I try to expand the last line

My question is is there the possibility to change or set the detailTemplate property afterwards depending on another attribute (hierarchical)

best regards

Ahmad Al Edlbi

[Praveenkumar Gajendiran]

Hi Ahmad,

Thanks for contacting Syncfusion support.

Based on your query, we understand you have facing an issue in the Grid while using detail template feature. Before proceeding with your query, we need the following details to validate the reported query at our end. So kindly share the following details.  

1. Share the complete code example.
2. How did you defined/rendered the detail template feature in Grid based on the mentioned attribute?
3. Let us know, what type of data are you using- remote data or local data? and the date structure.
4. Syncfusion package version used.

Please get back to us with the requested details which will be helpful for us to validate the reported issue at our end and provide solution as early as possible 

Regards,
Pravennkumar G 

[Ahmad Al Edlbi]

Hi Pravennkumar,

Thank you for your quick reply. I've created a sample project that illustrates the problem. You can also see the versions used there.

The problem is, if the detailTemplate is set afterwards, it is not displayed when opening a line of the grid.

There is also an error message when you try to open the last line

The link to the project:

https://stackblitz.com/edit/angular-ivy-cbj6qp

best regards

Ahmad Al Edlbi

[Praveenkumar Gajendiran]

Hi Ahmad, 

Thanks for sharing the details. 

Based on the provided information, we could understand that you need to render detailTemplate based on condition. Before proceeding with your requirement we would like to explain the detailTemplate feature of Grid for your reference below, 

The detail template provides additional information about a particular row by expanding or collapsing detail content. The detailTemplate property accepts either the template or HTML element ID. Since this is its default behaviour. 

In your sample you have not defined the proper HTML element to the detailTemplate property which is the cause of the issue. So, To overcome the reported issue, We suggest you to define the proper detailTemplate property(Since the detailTemplate will be rendered based on the element Id ) as demonstrated in the below code snippet, 

<ng-container *ngIf="dataSource$ | async as dataView"> 

              <ejs-grid #grid [height]="500" [dataSource]="dataView" [columns]="dataView.columns"> 

                  <ng-template *ngIf="hierarchical" #detailTemplate let-row> 

                             <app-child-table [parentRow]="row" [columns]="dataView.columns" [allRows]="dataView.allRows"> 

                             </app-child-table> 

                 </ng-template> 

              </ejs-grid> 

</ng-container> 

Also, we found in your sample you have enabled the ‘hierarchical’ flag variable inside the setTimeOut function(which means you have tried to define a property after the Grid is rendered). This will not render the detailTemplate feature in the Grid. So we suggest you to define the property while Grid initializes. 

More details on detailTemplate feature can be checked in the below documentation link, 

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

Documentation: https://ej2.syncfusion.com/javascript/documentation/grid/row/#detail-template

API Link: https://ej2.syncfusion.com/angular/documentation/api/grid/#detailtemplate 

We have modified your sample based on this for your reference,

Sample: https://stackblitz.com/edit/angular-ivy-mgztab?file=src%2Fapp%2Fapp.component.html

Regards,
Praveenkumar G 

[Ahmad Al Edlbi]

Hello,

Thanks alot for the explanation. I was able to fix the problem by re-rendering the component after changing the hierarchical property.

[Shalini Maragathavel]

Hi Ahmad, 

Thanks for the update.  

We are glad to hear that the provided solution resolved your query.

Regards,
Shalini M.