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

Datarangepicker in datagrid filtering on filterbar option

Following your documentation at this page


the datarangepicker works when you use this line on datagrid

<GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Menu"></GridFilterSettings>

but how can I use your sample in the documentation if I need to use a filterbar type ?

If I simply use in your sample this line:

<GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.FilterBar"></GridFilterSettings>

the OnActionBegin Event of the datagrid is not fired after changing the date range


3 Replies

NP Naveen Palanivel Syncfusion Team April 3, 2023 05:41 PM UTC

Hi Walter,

Greetings from Syncfusion support.

We checked your query and would like to inform you that by specifying AllowFilter = true, the filter bar will be rendered. When we type a value and press the enter key, the ActionBegin event is triggered; this is the default behaviour. We'd also like to inform that we can override the default component by rendering the custom component inside the filter template as per our requirement. Using DataGrid's FilterByColumnsAsync method, we can perform filtering based on the changed value. Please see the code snippet for your convenience.

<GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130">


                <SfDatePicker TValue="DateTime?">

                    <DatePickerEvents TValue="DateTime?" ValueChange="ValueChangeHandler"></DatePickerEvents>




        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>




@code {

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

    SfGrid<Order> Grid;



    public void ValueChangeHandler(ChangedEventArgs<DateTime?> args)


        Grid.FilterByColumnAsync("OrderDate", "equal",args.Value);




Link : Filter Bar in Blazor DataGrid Component | Syncfusion

Please let us know if you have any concerns.


Naveen Palanivel

WM Walter Martin April 4, 2023 09:44 AM UTC

Hi Naveen

I needed a solution for datarangepicker not for datapicker and if I've well understood it's not possible to apply your solution using the function Grid.FilterByColumnAsync because it's not possible to use this function with the "AND" condition necessary to work with the datarangepicker (>= startdate AND <= enddate)

But I found a different solution using the Query function of the datagrid.

Thanks for you help


NP Naveen Palanivel Syncfusion Team April 10, 2023 08:47 PM UTC

Hi Walter,


We are glad to hear that your query has been resolved by you.

Please get back to us if you need further assistance.


Naveen Palanivel.

Live Chat Icon For mobile
Up arrow icon