Hide filter bar while still allowing filtering

[Keane Kaiser]

I need to pull the filtering parameters into their own separate controls so that I have more direct access to them instead of using the filter bar and since FilterByColumn requires AllowFiltering to be true which by default shows the filter bar I was wondering if there was any way to hide the filter bar controls.

[Rahul Narayanasamy]

Hi Keane, 

Greetings from Syncfusion. 

Query: Hide filter bar while still allowing filtering 

We have validated your query and you want to hide the filter bar. You can achieve your requirement by using CSS. Find the below code snippets and sample for your reference. 

[code snippets] 

. . . 

<SfButton OnClick="Filter" CssClass="e-primary" Content="Filter"></SfButton> 

<SfGrid @ref="Grid" DataSource="@Orders" AllowFiltering="true" AllowPaging="true"> 

    . . . 

</SfGrid> 

@code{ 

    SfGrid<Order> Grid; 

    . . . 

    public void Filter() 

    { 

        // Show columns by its header text 

        this.Grid.FilterByColumn("CustomerID", "equal", "ALFKI"); 

    } 

} 

<style> 

//hided filterbar 

    .e-grid .e-filterbar { 

        display: none; 

    } 

</style> 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorGrid-165011092  

Please get back to us if you need further assistance. 

Regards, 

Rahul 

[vannak nhong]

Hi Keane, 

Greetings from Syncfusion. 

Query: Hide filter bar while still allowing filtering 

We have validated your query and you want to hide the filter bar. You can achieve your requirement by using CSS. Find the below code snippets and sample for your reference. 

[code snippets] 

. . . 

<SfButton OnClick="Filter" CssClass="e-primary" Content="Filter"></SfButton> 

<SfGrid @ref="Grid" DataSource="@Orders" AllowFiltering="true" AllowPaging="true"> 

    . . . 

</SfGrid> 

@code{ 

    SfGrid<Order> Grid; 

    . . . 

    public void Filter() 

    { 

        // Show columns by its header text 

        this.Grid.FilterByColumn("CustomerID", "equal", "ALFKI"); 

    } 

} 

<style> 

//hided filterbar 

    .e-grid .e-filterbar { 

        display: none; 

    } 

</style> 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorGrid-165011092  

Please get back to us if you need further assistance. 

Regards, 

Rahul 

Hi Rahul,

Your suggestion works great.  Thank you for your help

Best regards,

-Vannak

[Rahul Narayanasamy]

Hi Vannak, 

Thanks for the update. 

We are happy to hear that the provided solution helpful to achieve your requirement.  

Please get back to us if you need further assistance. 

Regards, 

Rahul