Can you have a grid within a Detail Template?

[paul stanley]

The file contains a grid with a detail template which causes the following error.

TypeError: Cannot read property 'querySelector' of null.

Is it possible to include a grid within the detail template

Attachment: detail_template_error_2221adc1.zip

[Vignesh Natarajan]

Hi Paul,  

 

Thanks for contacting Syncfusion support.  

 

Query: “Is it possible to include a grid within the detail template && The file contains a grid with a detail template which causes the following error.” 

 

Yes. We can render Grid component inside the DetailTemplate. We already have UG documentation and online sample for your reference 

 

UG: https://blazor.syncfusion.com/documentation/datagrid/row/#rendering-custom-component  

Online Demo:  https://blazor.syncfusion.com/demos/datagrid/hierarchy-grid?theme=bootstrap4  

 

We have validated the reported issue by preparing a sample using your code example and we are able to reproduce the reported issue at our end. We found that issue occur due to AutoGenerated column for detail template Grid. Since it is a known issue, we have considered the reported query as bug and logged the defect report “Exception throws while defining grid with auto-generated columns” for the same. Fix for the issue will be included in our Weekly patch release expected to be rolled out by month end of September 2020.  

 

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.     

     

https://www.syncfusion.com/feedback/17639/exception-throws-while-defining-grid-with-auto-generated-columns  

 

Note: Kindly login into your account to view the feedback. 

 

Till then we have modified the sample to generate the columns with Model class. Please find the modified code example and sample (Auto Generated) from below 

 

<SfGrid TValue="Person" DataSource="People"> 

    <GridTemplates> 

        <DetailTemplate> 

            @{ 

                Person person = context as Person; 

            } 

            <SfGrid TValue="Interest" DataSource="person.Interests"> 

                <GridColumns> 

                    @foreach (var prop in typeof(Interest).GetProperties()) 

                    { 

                        <GridColumn Field="@prop.Name"></GridColumn> 

                    } 

                </GridColumns> 

            </SfGrid> 

        </DetailTemplate> 

    </GridTemplates> 

    <GridColumns> 

        <GridColumn Field="@nameof(Person.FullName)"></GridColumn> 

    </GridColumns> 

</SfGrid> 

 

 

Sample: https://www.syncfusion.com/downloads/support/forum/157572/ze/DataGrid-1113958928  

 

Please get back to us if you have further queries.    

 

Regards, 

Vignesh Natarajan