Remove inner headers in nested grid

[Hong Nguyen]

Hello, I want to ask if there is any way to remove the inner headers in a nested grid. If you look at the picture, I have circled the inner headers should be removed, and an arrow pointed to an empty header should be removed as well. Here is how my code look like: @{ if (topLevelContext is GenericViewModel topLevelItem && topLevelItem.Groups.Any()) { @{ var groupItem = groupContext as GenericGroupViewModel; if (groupItem.Details.Any()) { } } } }

[Guhanathan Ramanathan]

Hi Hong Nguyen,

Greetings from Syncfusion,

We've reviewed your query, and it seems that you'd like to remove the inner headers in a nested grid. This can be achieved by applying custom CSS styles. Below is a sample code snippet for your reference.

 

<SfGrid DataSource="@Employees">

         <GridTemplates>

                <DetailTemplate>

                        @{

                            var employee = (context as EmployeeData);

                            <SfGrid ID="details" TValue="Order" Query="@GetEmployeesQuery(employee)" AllowPaging="true">

                                <GridPageSettings PageSize="8"></GridPageSettings>

                                <SfDataManager Url="https://blazor.syncfusion.com/services/production/api/Orders/" CrossDomain="true" Adaptor="Adaptors.WebApiAdaptor"></SfDataManager>

                                <GridTemplates>

                                   

                                            </SfGrid>

                                        }

                                    </DetailTemplate>

                                </GridTemplates>

                                <GridColumns>

                                    <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="110"> </GridColumn>

                                    <GridColumn Field=@nameof(Order.Freight) Format="c2" TextAlign="TextAlign.Right" Width="110"></GridColumn>

                                    <GridColumn Field=@nameof(Order.ShipName) HeaderText="Ship Name" Width="110"></GridColumn>

                                    <GridColumn Field=@nameof(Order.ShipCity) HeaderText="Ship City" Width="110"></GridColumn>

                                </GridColumns>

                            </SfGrid>

                        }

                    

</SfGrid>

 

<style>

    #details.e-gridheader {

        display: none;

    }

 

</style>

 

Sample: <attach sample here>

 

If we misunderstood your query, kindly get back to us with more details about your requirement.

Regards,

Guhanathan R

Attachment: BlazorApp3_954f3935.zip