We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Nested Grid Detail Template not indenting

Hello, 


I have a grid with multiple nested detail templates. In previous versions, I was able to hide the grid header with the following CSS found here https://blazor.syncfusion.com/documentation/datagrid/how-to/hide-grid-header.

<style>
    .e-grid .e-gridheader .e-columnheader{
        display: none;
    }
</style>

However, upon updating to 20.4.0.42 it seems that this stops the nested indentation of the detail templates and also covers the arrow button. See attached screenshot. 

How do I hide the grid headers while preserving the nested indentation?






3 Replies

SP Sarveswaran Palani Syncfusion Team January 11, 2023 04:38 AM UTC

Hi Leland,


Greetings from Syncfusion support,


Based on your issue, we created a code snippet to meet your requirements. Please see the attached code snippet and sample solution for reference.


 

<SfGrid DataSource="@Employees">

    <GridEvents DataBound="DataBoundHandler" TValue="EmployeeData"></GridEvents>

</SfGrid>

 

@if (Hide)

{

 

    <style>

        .e-grid .e-gridheader .e-columnheader {

        display: none;

        }

    </style>

}

 

@code {

public bool Hide{ get; set; }

    public void DataBoundHandler()

    {

        Hide = true;

        StateHasChanged();

    }

}


Reference: https://blazor.syncfusion.com/documentation/datagrid/events#databound

Regards,
Sarvesh


Attachment: DatagridModified_c02577c6.zip


LE Leland January 11, 2023 06:05 PM UTC

Hello, please see attached project. The issue still occurs when nesting further grids inside of a detail template. 




Attachment: DatagridModified_c02577c6_nestedGrids_9acdbf9f.zip


NP Naveen Palanivel Syncfusion Team February 16, 2023 05:57 PM UTC

Hi Leland,

Sorry for the delay and  inconvenience caused.

Based on your last update, we can achieve your requirement by styling the CSS property through traversing the CSS class. As you mentioned that this issue was occurred after updating to 20.4.42, could you please confirm the version you're using before?  Based on that we’ll evaluate your query and provide solution as early as possible.

If you have any other concern, please don’t hesitate to reach us


Regards,

Naveen Palanivel


Loader.
Up arrow icon