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 Form Layout with two Date Edit components. These components allow 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.
Follow the steps below to allow users to filter a grid column by a date range:
-
Add a Grid component to a page and bind the component to data.
-
Display the Grid's filter row or filter menu.
-
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).
-
Create a base range component that contains two Date Edit components where users can set the start and end dates of a range.
-
Implement two-way data binding between Date properties of the Date Edit components and the data fields that store endpoints of the range.
-
Handle DateChanged events of the Date Edit components. In a component's 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.