How to hide column header of parent grid but not detail component?

[Phil Seeman]

Inside of a grid, I'm displaying a child treegrid using the grid's capability of displaying a custom component in its detail row, as illustrated here:

https://ej2.syncfusion.com/aspnetcore/documentation/grid/row/?no-cache=1#rendering-custom-component

Everything works great. But I'm wanting to hide the column header area of the parent grid, while still displaying the column header of the child (detail) treegrids.

I know I can do this as a style:

        e-headercell, .e-headercelldiv, .e-gridheader {

            height: 0 !important;

            border: 0 !important;

        }

but the problem is, that hides the header of both the parent grid and the detail treegrids. Is there a way I can hide the header of just the parent grid?

[Pavithra Subramaniyam]

Hi Phil, 

 

Greetings from Syncfusion support. 

 

You can achieve your requirement by adding a custom class for the header element inside the “created” event of Parent Grid. Please refer to the below code example and documentation link for more information. 

 

[index.cshtml] 

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" detailTemplate="#detailtemplate" created="created" 

  detailDataBound="detailDataBound"> 

  <e-grid-columns> 

    <e-grid-column field="FirstName" headerText="First Name" width="110"></e-grid-column> 

    <e-grid-column field="LastName" headerText="Last Name" width="110"></e-grid-column> 

  </e-grid-columns> 

</ejs-grid> 

 

<script> 

  function created(e) { 

    var gridObj = document.getElementById("Grid").ej2_instances[0]; 

    gridObj.getHeaderContent().classList.add("e-custom"); // Adding custom class for parent header element 

        } 

</script> 

 

<style> 

  .e-custom.e-gridheader { 

    // here you can add the custom styles 

} 

</style> 

 

 

Documentation: https://ej2.syncfusion.com/javascript/documentation/api/grid/#created 

 

Please get back to us if you need any further assistance on this. 

 

Regards, 

Pavithra S 

[Phil Seeman]

That's perfect, thanks!

[Ajith Govarthan]

Hi Phil, 

We are happy to hear that the provided solution has been working fine at your end. 

Please get back to us if you need further assistance. 

Regards, 

Ajith G.