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

sfgrid hide filter bar from css code behind


I have a Blazor Server app that has a sfgrid in  a razor component (grid.razor).  I would like to hide the header of the Grid including the filter bar.  I believe the syntax to do this is:  .e-columnheader { display: none;}

So my current grid.razor control looks a bit like this:

<style> .VehicleGridClass .e-columnheader {        display: none;    }</style>

<SfGrid  class="VehicleGridClass" .... model etc with cols>

The above code works fine when in grid.razor.  However I like to keep my CSS in a seperate CSS file for each control.  As soon as I move the above CSS style  .VehicleGridClass .e-columnheader { display: none ; }  into the Grid.razor.css control it stops working.  Any idea why this is?


3 Replies

KG Keerthana Ganesan Syncfusion Team October 5, 2022 05:44 PM UTC

Hi Indy,

Welcome from Syncfusion support.

We have analyzed your query and we would like to inform you that to apply the CSS isolation for the DataGrid component, you have to wrap the SfGrid Component inside an HTML div element and then use the::deep selector. We have discussed this similar topic in our UG documentation Kindly refer to the attached reference link for your reference.

Reference link: https://blazor.syncfusion.com/documentation/datagrid/how-to/css-isolation-for-grid

Kindly get back to us if you have any further queries.



IG Indy Gill October 5, 2022 08:17 PM UTC

Superb - that worked a treat.  Thanks!

KG Keerthana Ganesan Syncfusion Team October 6, 2022 01:27 PM UTC

Hi Indy,

Thanks for the update.

We are happy to hear that issue has been resolved.

Kindly get back to us if you have any further queries.



Live Chat Icon For mobile
Up arrow icon