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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to hide grid Header

Thread ID:

Created:

Updated:

Platform:

Replies:

150836 Jan 21,2020 04:08 PM UTC Sep 21,2020 07:16 AM UTC Blazor 9
loading
Tags: Grid
ebi torabi
Asked On January 21, 2020 04:08 PM UTC

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

Attachment: gridheader_381d6342.zip

Vignesh Natarajan [Syncfusion]
Replied On January 22, 2020 04:58 AM UTC

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. 


ebi torabi
Replied On January 22, 2020 11:41 PM UTC

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. 


Vignesh Natarajan [Syncfusion]
Replied On January 23, 2020 04:44 AM UTC

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. 


ebi torabi
Replied On January 23, 2020 03:06 PM UTC

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

Vignesh Natarajan [Syncfusion]
Replied On January 24, 2020 04:05 AM UTC

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. 


ebi torabi
Replied On February 1, 2020 06:53 AM UTC

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

Vignesh Natarajan [Syncfusion]
Replied On February 3, 2020 05:45 AM UTC

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


Simon
Replied On September 18, 2020 11:26 PM UTC

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

Vignesh Natarajan [Syncfusion]
Replied On September 21, 2020 07:16 AM UTC

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon