Initial date selection when filtering a column with a date range picker
Hi,
We're using Syncfusion.Blazor 19.4.0.48
I'm using a DateRangePicker to filter dates on a date column. When the filter is first opened, instead of the placeholder a range with default date values are displayed as below. How would I display the placeholder?
@page "/"
@using Syncfusion.Blazor
@using Syncfusion.Blazor.Calendars
@using Syncfusion.Blazor.Data
@using Syncfusion.Blazor.Grids
<SfGrid @ref="Grid" TValue="Order" AllowSorting="true" Width="100%"
AllowFiltering="true" AllowPaging="true" AllowReordering="true" EnablePersistence="true"
AllowSelection="true" AllowResizing="true">
<SfDataManager Url="https://services.odata.org/V4/Northwind/Northwind.svc/Orders/" Adaptor="Adaptors.ODataV4Adaptor"></SfDataManager>
<GridEvents OnActionBegin="OnActionBegin" TValue="Order"></GridEvents>
<GridPageSettings PageSize="20" PageSizes="@(new int[] { 20, 50, 100, 200 })"></GridPageSettings>
<GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Menu"></GridFilterSettings>
<GridColumns>
<GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn>
<GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
<GridColumn Field=@nameof(Order.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(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
</GridColumns>
</SfGrid>
@code{
private SfGrid<Order> Grid;
public DateTime StartDate { get; set; }
public DateTime EndDate { get; set; }
public async Task OnActionBegin(ActionEventArgs<Order> args)
{
if (args.RequestType == Syncfusion.Blazor.Grids.Action.FilterBeforeOpen)
{
// Limit filter operations on DateTime columns
if (args.ColumnName == "OrderDate")
{
args.FilterOperators = new List<object> {
new { Text = "Equal", Value = "equal" }
};
}
}
else if (args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.Filtering) && args.CurrentFilteringColumn.Equals("OrderDate"))
{
args.Cancel = true; //cancel default filter action
if (Grid.FilterSettings.Columns == null)
{
Grid.FilterSettings.Columns = new List<GridFilterColumn>();
}
if (Grid.FilterSettings.Columns.Count > 0)
{
Grid.FilterSettings.Columns.RemoveAll(c => c.Field == "OrderDate");
}
//Get all the Grid columns
var columns = await Grid.GetColumns();
//Fetch the Uid of OrderDate column
string fUid = columns[2].Uid;
Grid.FilterSettings.Columns.Add(new GridFilterColumn
{
Field = "OrderDate",
Operator = Syncfusion.Blazor.Operator.GreaterThanOrEqual,
Predicate = "and",
Value = StartDate,
Uid = fUid
});
Grid.FilterSettings.Columns.Add(new GridFilterColumn
{
Field = "OrderDate",
Operator = Syncfusion.Blazor.Operator.LessThanOrEqual,
Predicate = "and",
Value = EndDate.AddDays(1).AddSeconds(-1),
Uid = fUid
});
Grid.Refresh();
}
}
public class Order
{
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public DateTime? OrderDate { get; set; }
public double? Freight { get; set; }
}
public void ValueChangeHandler(RangePickerEventArgs<DateTime> args)
{
StartDate = args.StartDate;
EndDate = args.EndDate;
}
}
Thanks in advance,
Alp
Hi Alp,
Greetings from Syncfusion support.
Query: “I'm using a DateRangePicker to filter dates on a date column. When the filter is first opened, instead of the placeholder a range with default date values are displayed as below. How would I display the placeholder?”
We have checked your query and we suggest you to use nullable datetime instead of DateTime. Because if use DateTime as column type then the default values will be assigned for the DataPicker. Kindly check the attached code snippet and screen snippet for your reference.
|
<SfGrid @ref="Grid" TValue="Order" AllowSorting="true" Width="100%" AllowFiltering="true" AllowPaging="true" AllowReordering="true" EnablePersistence="true" AllowSelection="true" AllowResizing="true"> <GridColumns> <GridColumn Field=@nameof(Order.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>
</SfGrid>
@code{ private SfGrid<Order> Grid; public DateTime? StartDate { get; set; } public DateTime? EndDate { get; set; }
public void ValueChangeHandler(RangePickerEventArgs<DateTime?> args) { } } |
|
|
Kindly get back to us if you have further queries.
Regards,
Monisha
