Grid for Blazor - How to implement a date range filter

This example demonstrates how to allow users to filter a column in the DevExpress Blazor Grid by a date range in a filter row or filter menu. In the example, the Date column contains a Date Range Picker component that allows you to set the start and end dates of a date range. Once you set a date or both dates, the Grid filters the column by the specified range.

Overview

Follow the steps below to allow users to filter a grid column by a date range:

1. Add a Grid component to a page and bind the component to data.

2. Display the Grid's filter row or filter menu.

3. Specify the template for the chosen filtering approach (FilterRowCellTemplate or FilterMenuTemplate) for a column that displays dates. In the template, define context-specific component that processes filter (see FilerRow.razor and FilerMenu.razor file).

4. Create a base range component that contains the Date Range Picker component where users can set the start and end dates of a range.

5. Implement two-way data binding between StartDate and EndDate properties of the Date Range Picker and data fields that store endpoints of the range.

6. Handle StartDateChanged and EndDateChanged events of the Date Range Picker component. In each event handler, assign the component's new value to the corresponding endpoint of the date range. Once at least one endpoint of the date range is set, update the filter criteria that determine whether the current value is in the range. Apply the filter criteria to the grid column.

Files to Review

• DateRangeBase.razor
• DateRange-FilterRow.razor
• DateRange-FilterMenu.razor

Documentation

• Filter Data in Blazor Grid
• Examples

More Examples

• Grid for Blazor - Incorporate a selector for filter row operator type
• Grid for Blazor - Use the DxTagBox control to filter a column against multiple values

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)