How to hide grid Header

[ebi torabi]

hi.How to hide grid Header.

please see Attached screenShot

Attachment: gridheader_381d6342.zip

[Vignesh Natarajan]

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]

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]

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]

Hi Vignesh Natarajan. Thank you very much.

It worked very well.

[Vignesh Natarajan]

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]

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

[Vignesh Natarajan]

Hi Ebi Torabi,  

 

Thanks for the update.  

 

Kindly get back to us if you need any further assistance from us. 

 

Regards, 

Vignesh Natarajan. 

[Simon]

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]

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 { 

        display: none; 

    } 

</style> 

 

Or 

 

<SfGrid DataSource="@Orders" AllowPaging="true">. . . . </SfGrid><style>    .e-grid .e-gridheader .e-columnheader {        display: none;    }</style>

 

 

Kindly get back to us with more details if you are still facing the reported issue.     

 

Regards, 

Vignesh Natarajan 

[Dietfrid Mali]

For some weird reason, this doesn't work for me when I prefix ".e-grid" with #, where is my grid's ID. I double checked my code to make sure I was using the correct ID. It also doesn't work when just putting

    .e-grid .e-gridheader.e-columnheader { display: none; } 

in my component's style section.

I cleared my browser's cache before checking in order to make sure it wouldn't interfere.

[Naveen Palanivel]

Hi Dietfrid,

We have tried the method you mentioned for hiding the column header in the Syncfusion Blazor DataGrid by using the ID property and class name of the grid along with CSS. The issue you reported did not occur when we tested it. Please see the provided sample and video demo for more information.

If the reported issue still reproduced then kindly share the below details to validate further at our end.

1. Share us entire Grid code snippet along with model class.
2. Share us the video demonstration of the issue in provided sample.
3. If possible share us an simple issue reproduceable sample or try to modify the above mentioned sample.

The above-requested details will be very helpful for us to validate the reported query at our end and provide the solution as early as possible

Regards,

Naveen Palanivel

Attachment: HideHeader_36ee9601.zip