Remove Header Row Completely

[Simon]

Hi All,

I have 3 grids on a page and need 2 of them to have no Header Row.

I have tried this:

    #GridLang .e-grid .e-gridheader .e-columnheader,

    #GridSys .e-grid .e-gridheader .e-columnheader {

        display: none;

    }

but it still shows an empty row above the grid rows.

Please can you let me know how to remove this empty row completely.

Thanks in advance

Simon

[Vignesh Natarajan]

Hi Simon,  

 

Thanks for contacting Syncfusion support.  

 

Query: “but it still shows an empty row above the grid rows. Please can you let me know how to remove this empty row completely.” 

 

We have analyzed the reported issue with the provided style and we are able to reproduce the reported issue at out end too. This because the class name is wrongly defined ( some space  left between Grid id and .e-grid class). Kindly modify the code example like below to resolve the issue.  

 

<h1>Grid1</h1> 

<SfGrid ID="GridLang" DataSource="@Orders" AllowPaging="true"> 

</SfGrid> 

<h1>Grid2</h1> 

<SfGrid DataSource="@Orders" AllowPaging="true"> 

</SfGrid> 

<h1>Grid3</h1> 

<SfGrid ID="GridSys" DataSource="@Orders" AllowPaging="true"> 

</SfGrid> 

<style> 

    #GridLang.e-grid .e-gridheader .e-columnheader, 

    #GridSys.e-grid .e-gridheader .e-columnheader { 

        display: none; 

    } 

</style> 

 

   

For your convenience we have prepared a sample which can be downloaded from below  

 

Sample: https://www.syncfusion.com/downloads/support/forum/158326/ze/DataGrid2087248684  

 

Kindly get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan 

[Simon]

Hi Vignesh,

Sorry for the delay in replying, but all good now.

Thanks

Simon

[Rahul Narayanasamy]

Hi Simon, 

Thanks for the update. 

We are happy to hear that the provided solution helpful to achieve your requirement.  

Please get back to us if you need further assistance. 

Regards, 

Rahul