Filter a date range in the Grid

[Marcelo de Oliveira]

Hello,

I'm using Syncfusion Blazor DataGrid version 34.1.29 in a Blazor Server App.

I have a column that stores the contract signing date, and its type is Date.

I noticed that the built-in filtering options allow filtering by a single date, but I couldn't find a way to filter by a date range (start date and end date).

What I'd like to achieve is something like:

Start Date: 01/01/2026

End Date: 01/31/2026

so that the grid displays only the records whose contract date falls within that range.

Is this supported by the DataGrid? If so, could you please provide an example of how to implement it?

If it is not supported out of the box, what would be the recommended approach to achieve this behavior?

Thank you!

[Prathap Senthil]

Hi Marcelo de Oliveira,

Based on your requirement, you want to filter data using a date range. We already have documentation available for this requirement. In this implementation, the SfDateRangePicker is rendered in the filter template of the OrderDate column. The ValueChange event captures the selected start and end dates. The filtering logic is handled in the Filtering event, where the default filtering action is canceled and custom predicates are applied based on the selected date range. Kindly refer to the code sample and documentation below for more information.

Code snippet:

<SfGrid @ref="Grid" TValue="OrderData" AllowFiltering="true" AllowPaging="true" DataSource="@GridData">

-----------       
<GridColumn Field=@nameof(OrderData.OrderDate) HeaderText=" Order Date" Format="MM/dd/yyyy hh:mm tt"

                    TextAlign="TextAlign.Right" Width="250">

            <FilterTemplate>

                @{

                    <SfDateRangePicker Placeholder="Choose a Range" Width="500" ShowClearButton="true"

                                       @bind-StartDate="StartDate" @bind-EndDate="EndDate" TValue="DateTime">

                        <DateRangePickerEvents TValue="DateTime" ValueChange="ValueChangeHandler">

                        </DateRangePickerEvents>

                    </SfDateRangePicker>

                }

            </FilterTemplate>

        </GridColumn>

        <GridColumn Field=@nameof(OrderData.Freight) HeaderText="Freight" Format="C2"

                    TextAlign="TextAlign.Right" Width="120"></GridColumn>

    </GridColumns>

</SfGrid>

 

Documentation: Filter Menu in Blazor DataGrid | Syncfusion®

Sample: https://blazorplayground.syncfusion.com/embed/rtVnZQjYJThpbkew?appbar=true&editor=true&result=true&errorlist=true&theme=fluent2

Regards,
Prathap Senthil