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

How to hide grid Header

hi.How to hide grid Header.
please see Attached screenShot

Attachment: gridheader_381d6342.zip

9 Replies

VN Vignesh Natarajan Syncfusion Team January 21, 2020 11:58 PM

Hi Ebi,  
 
Greetings from Syncfusion support.  
 
Query: “How to hide grid Header. 
 
We suggest you to achieve your requirement by applying the below styles to your Grid header. Refer the below code example.   
 
<style> 
    .e-grid .e-gridheader .e-columnheader{ 
        display: none; 
    } 
    </style> 
 
Please get back to us if you have further queries.  
 
Regards, 
Vignesh Natarajan. 



ET ebi torabi January 22, 2020 06:41 PM

Hi Vignesh Natarajan.
Thank you very much for example.I have a few Grids on a page and want to display header only one of them. 



VN Vignesh Natarajan Syncfusion Team January 22, 2020 11:44 PM

Hi Ebi,  
 
Thanks for the update.  
 
Query: “Thank you very much for example.I have a few Grids on a page and want to display header only one of them 
 
We understand that you want to display header in one Grid and want to hide the header in rest of the Grid. We suggest to hide the header using the ID property of the Grid. Refer the below modified code example.  
 
<EjsGrid ID="Grid1" @ref="grid" TValue="Order" Toolbar="@(new List<string> { "Search"})" Height="50">   
. . . . .. . . . .  
</EjsGrid> 
 
<EjsGrid ID="Grid2" @ref="grid" TValue="Order" Toolbar="@(new List<string> { "Search"})" Height="50"> 
. . . . . . . ..  
</EjsGrid> 
 
<EjsGrid ID="Grid3" @ref="grid" TValue="Order" Toolbar="@(new List<string> { "Search"})" Height="50"> 
. . . . . .. .  
</EjsGrid> 
 
<style> 
    #Grid1.e-grid .e-gridheader .e-columnheader, 
    #Grid3.e-grid .e-gridheader .e-columnheader { 
        display: none; 
    } 
</style> 
 
Refer the below screenshot for output 
 
 
 
We have displayed the Grid header for second grid alone by hiding the remaining Grid header using CSS.  
 
Kindly get back to us if you have further queries. 
 
Regards, 
Vignesh Natarajan. 



ET ebi torabi January 23, 2020 10:06 AM

Hi Vignesh Natarajan. Thank you very much.
It worked very well.


VN Vignesh Natarajan Syncfusion Team January 23, 2020 11:05 PM

Hi Ebi,  
 
Thanks for the update.  
 
We are glad to hear that you have resolved your query using our solution.  
 
Kindly get back to us if you have further queries.  
 
Regards, 
Vignesh Natarajan. 



ET ebi torabi February 1, 2020 01:53 AM

Hi Vignesh Natarajan .Thank you very much.it work well.


VN Vignesh Natarajan Syncfusion Team February 3, 2020 12:45 AM

Hi Ebi Torabi,  
 
Thanks for the update.  
 
Kindly get back to us if you need any further assistance from us. 
 
Regards, 
Vignesh Natarajan. 



SI Simon September 18, 2020 06:26 PM

Hi Vignesh,

Sorry to drag up an old(ish) thread, but I tried your suggestions and the Header Row is still visible, even though it's empty (see attached image).

Any help would be greatly appreciated.

Regards

Simon

Attachment: Header_Row_b13a82f8.7z


VN Vignesh Natarajan Syncfusion Team September 21, 2020 02:16 AM

Hi Simon,  
 
Thanks for contacting Syncfusion support.  
 
Query: “ but I tried your suggestions and the Header Row is still visible, even though it's empty (see attached image). 
 
In the previous update, we have provided solution to hide the Grid Header using a style tag which required the Grid ID. So the reported issue might occur when ID property not defined or wrongly defined in Grid definition. So we suggest you to resolve the issue either by providing matching Grid id or define the style tag without ID.  
 
Refer the below code example.  
 
<SfGrid ID="Grid" DataSource="@Orders" AllowPaging="true"> 
. . .  
</SfGrid> 
<style> 
    #Grid.e-grid .e-gridheader .e-columnheader { 
        displaynone; 
    } 
</style> 
 
Or 
 
<SfGrid DataSource="@Orders" AllowPaging="true">. . . . </SfGrid><style>    .e-grid .e-gridheader .e-columnheader {        displaynone;    }</style>
 
 
Kindly get back to us with more details if you are still facing the reported issue.     
 
Regards, 
Vignesh Natarajan 


Loader.
Live Chat Icon For mobile
Up arrow icon