Conditional display of <FilterTemplate> content

[David Adler]

I am using SyncFusion.Blazor 18.1.0.45

I want to add a button to clear all applied filters and I only want the button to display when filters are currently applied.

I tried setting a bool to true when I call Grid.FilterByColumn() and back to false when I call Grid.ClearFiltering() but is seems like once the initial button is displayed when the component loads, I cannot get it hide/show it by toggling the bool. 

I also tried changing the class value of a wrapping div to where it is either class="visible" or class="invisible" depending upon whether i called the Grid.FilterByColumn() or Grid.ClearFiltering(). This had the same issue in that it had no impact after the initial display.

I am wondering if there is already a Grid property I can check to see if any filters have been applied and/or is there a built in way to clear all filters?

[Vignesh Natarajan]

Hi David,  

 

Thanks for contacting Syncfusion support.  

 

Query: “I want to add a button to clear all applied filters and I only want the button to display when filters are currently applied.” 

 

We have achieved your requirement using OnActionComplete event of Grid. We have Boolean variable to display the Button to ClearFiltering based on the filter applied to the Grid. Refer the below code example.  

 

@if (ShowFilter) 

{ 

    <SfButton OnClick="Clear" Content="Clear Filtering"></SfButton> 

} 

  

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

    <GridEvents OnActionComplete="ActionCompleteHanlder" TValue="Order" ></GridEvents> 

. . .. . . . .  

</SfGrid> 

  

@code{ 

    SfGrid<Order> NormalGrid { get; set; } 

    public List<Order> Orders { get; set; } 

    public bool ShowFilter { get; set; } = false; 

    public void Clear() 

    { 

        NormalGrid.ClearFiltering(); 

        ShowFilter = false; 

    } 

    public void ActionCompleteHanlder(ActionEventArgs<Order> Args) 

    { 

        if(Args.RequestType == Syncfusion.Blazor.Grids.Action.Filtering ) 

        { 

            if (Args.CurrentFilteringColumn != null) 

            { 

                ShowFilter = true; 

            } 

            else 

            { 

                ShowFilter = false; 

            } 

        } 

    } 

} 

 

 

Note: Above solution will also work if you have applied filtering suing FilterByColumn method.  

 

For your convenience we have prepared a sample which can be downloaded from below 

 

Sample: https://www.syncfusion.com/downloads/support/forum/153607/ze/BlazorApp1462868665  

 

Refer our UG documentation for your reference 

 

https://blazor.syncfusion.com/documentation/datagrid/events/#onactioncomplete  

 

Regards, 

Vignesh Natarajan