Custom Clear Button action in Filter Menu popup

[Andy Terbovich]

I created a filter template for an SfGrid that I'm using to add the ability to filter by a date range (using DateRangePicker). My question is whether the default "Clear Button" on the filter popup can be overridden with some custom code to clear  items that I'm using for the Date Range filter.

Alternately, another route I could take is adding a custom button into that popup and hiding the default Clear button along with the apply button (no problem here, already hiding apply and the operator drop down).

Thanks for any help you can provide.

[Renjith Singh Rajendran]

Hi William, 

Greetings from Syncfusion support. 

Based on this scenario, we suggest you to hide the footer area of filter menu dialog for the particular column using styles based on the ColumnName and RequestType as FilterBeforeOpen inside OnActionBegin. And then render a custom button inside FilterTemplate along with SfDateRangePicker.  

Please refer and use as like the codes below, 

 

     <GridEvents OnActionBegin="OnActionBegin" TValue="Order"></GridEvents> 

     ... 

     <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" ...> 

        <FilterTemplate> 

            <SfDateRangePicker @ref="RangePickerRef" TValue="DateTime?"></SfDateRangePicker><br /><br /> 

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

        </FilterTemplate> 

     </GridColumn> 

 

@if (@IsCustomComponent)                      @*Based on IsCustomComponent value apply styles*@ 

{ 

    <style> 

        .e-filter-popup .e-footer-content { 

            display: none; 

        } 

    </style> 

} 

 

@code{

    public bool IsCustomComponent = false; 

 

    SfDateRangePicker<DateTime?> RangePickerRef; 

    public void OnClick() 

    { 

        //hear handle custom clear action 

    } 

    public void OnActionBegin(ActionEventArgs<Order> Args) 

    { 

        if (Args.RequestType.Equals(Action.FilterBeforeOpen)) 

        { 

            if (Args.ColumnName == "OrderDate")   //Based on the column having custom component set the IsCustomComponent value 

            { 

                IsCustomComponent = true; 

            } 

            else 

            { 

                IsCustomComponent = false; 

            } 

        } 

 

    } 

    ... 

}

References :  

https://blazor.syncfusion.com/documentation/datagrid/filtering#custom-component-in-filter-menu 

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

Please get back to us if you need further assistance. 

Regards, 

Renjith R 

[Andy Terbovich]

Thanks! This works great.

[Renjith Singh Rajendran]

Hi William, 

Thanks for your update. Please get back to us if you need further assistance. 

Regards, 

Renjith R