sfgrid hide filter bar from css code behind

[Indy Gill]

Hi

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?

TIA

[Keerthana Ganesan]

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.

Regards,

Keerthana.

[Indy Gill]

Superb - that worked a treat.  Thanks!

[Keerthana Ganesan]

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.

Regards,

Keerthana.