Change the date format of grid filter

[Preity]

hi there,

I'm using filter template to filter grid. For one of the columns which is a date, I'm using a dropdown filter. I'm using List<string> as the data source for that dropdown. The problem is when I select a date from the dropdown to filter the grid, it changes the date format from "dd/MM/yyyy" to "MM/dd/yyyy". I've even tried with hardcoded date, but then also it doesn't work. To filter the grid I'm using Grid.FilterByColumn("FabETDDate","contains",Convert.ToDateTime("24/02/2019")). 

[Vignesh Natarajan]

Hi Preity,  

 

Thanks for contacting Syncfusion support.  

 

Query: “The problem is when I select a date from the dropdown to filter the grid, it changes the date format from "dd/MM/yyyy" to "MM/dd/yyyy"” && “To filter the grid I'm using Grid.FilterByColumn("FabETDDate","contains",Convert.ToDateTime("24/02/2019")).”  

 

From your query we understand that you are facing issue while filtering the date column based on the value selected from DropDownList. For that you have converted DateTime Object to string for DropDownList dataSource. We are able to reproduce the reported issue at our end when we change the format of string to dd/MM/yyyy while binding it to DropDownList.  

 

Now the string is in format “dd/MM/yyyy”. In the Change event you have directly used the Args.Value, hence the reported issue occur.  To overcome the reported issue, kindly parse the string value in DropDownList change event like below  

 

<EjsGrid @ref="@Grid" DataSource="@Orders" AllowFiltering="true" AllowPaging="true" Height="315"> 

    <GridColumns> 

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" 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="dd/MM/yyyy" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"> 

            <FilterTemplate> 

                @{ 

                    <EjsDropDownList Placeholder="Order Date" ID="OrderDate" Value="@((string)(context as PredicateModel).Value)" DataSource="@Dropdown" TValue="string" TItem="Data"> 

                       <DropDownListEvents ValueChange="@Change" TValue="string"></DropDownListEvents> 

                        <DropDownListFieldSettings Value="OrderDate" Text="OrderDate"></DropDownListFieldSettings> 

                    </EjsDropDownList> 

                } 

            </FilterTemplate> 

        </GridColumn> 

        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

    </GridColumns> 

</EjsGrid> 

  

@code{ 

    EjsGrid<Order> Grid; 

    public List<Order> Orders { get; set; } 

    List<Data> Dropdown = new List<Data>(); 

    protected override void OnInitialized() 

    { 

        Orders = Enumerable.Range(1, 75).Select(x => new Order() 

        { 

            OrderID = 1000 + x, 

            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)], 

            Freight = 2.1 * x, 

            OrderDate = (new DateTime[] { new DateTime(2010, 5, 1), new DateTime(2010, 5, 2), new DateTime(2010, 5, 3) })[new Random().Next(3)], 

        }).ToList(); 

        foreach (var record in Orders) 

        { 

            Dropdown.Add(new Data() { OrderDate = record.OrderDate.ToString("dd/MM/yyyy") }); 

        } 

    } 

    public class Data 

    { 

        public string OrderDate { get; set; } 

    } 

    public class Order 

    { 

. . . . .. .  

        public DateTime OrderDate { get; set; } 

        public double? Freight { get; set; } 

    } 

    public void Change(Syncfusion.EJ2.Blazor.DropDowns.ChangeEventArgs<string> args) 

    { 

        //parse the string value to datetime and convert to required format MM/dd/yyyyy 

        Grid.FilterByColumn("OrderDate", "contains", Convert.ToDateTime(DateTime.ParseExact(args.Value, "yyyy-MM-dd", CultureInfo.InvariantCulture).ToString("MM/dd/yyyy"))); 

    } 

} 

 

 

Kindly download the sample from below 

 

Sample:  https://www.syncfusion.com/downloads/support/forum/151879/ze/BlazorApp1-443836471  

 

If you are still facing the issue, kindly get back to us with more details about regarding your issue.  

 

Regards, 

Vignesh Natarajan.