Date range filter (Blazor)
This guide shows how to use two DatePicker components to filter DataGrid by date range.
1. Create new CRUD application from our Sample database, open Orders page and add Row component with three Column components with size 5, 5 and 2.
2. Add DatePicker components to first and second column and a Button component to third column.
3. Create start and end properties on page Load and bind DatePicker components Value property to start and end properties.
4. Invoke getOrders() method on Button component Click event with {Filter(start, end)} expression as filter parameter and set getOrdersResult to returned value.
5. Open the Orders.razor.cs file that Radzen has generated for your page to add the Filter method. Radzen generates that file only once and will not overwrite it.
using System;
namespace SampleBlazor.Pages
{
public partial class OrdersComponent
{
string Filter(DateTime? start, DateTime? end)
{
return $@"OrderDate >= DateTime(""{GetUTCString(start)}"") && OrderDate <= DateTime(""{GetUTCString(end)}"")";
}
string GetUTCString(DateTime? date)
{
return date.HasValue ?
date.Value.ToUniversalTime().ToString("yyyy-MM-ddTHH:mm:ssZ") : null;
}
}
}
6. Run the application and press filter button.
